WebSocket 前端使用

2023-11-13

h5提供了WebSocket网络协议,可以实现浏览器与服务器的双向数据传输

构造函数

WebSocket(url,protocol)
url:WebSocket API URL,URL之前需要添加ws://或者wss://(类似http://、https://)
protocol:与服务端定义的协议名称相同,协议的参数例如XMPP(Extensible Messaging and Presence Protocol)、SOAP(Simple Object Access Protocol)或者自定义协议。

  var ws = new WebSocket('ws://url', 'myprotocol');
  var ws = new WebSocket('ws://url', ['myprotocol','myprotovol2']);

方法

send(message) 通过已建立的websocket连接发送数据
close(code(numerical),reason(string)) 关闭打开的websocket连接

事件

-WebSocket API是纯事件驱动,建立连接之后,可自动发送状态改变的数据和通知
onopen 当建立websocket连接时触发,只触发一次
onerror 当连接出现错误时触发-因为当触发了onerror之后连接就会触发关闭事件。
onmessage 当服务端发送数据时触发,可多次触发,页面数据展示处理模块-实现轮询
onclose 当websocket连接关闭时触发,只触发一次

属性

readyState: WebSocket连接状态
0 正在与服务端建立WebSocket连接,还没有连接成功
1 连接成功并打开,可以发送消息
2 进行关闭连接的操作,且尚未关闭
3 连接已关闭或不能打开

bufferedAmount:检查传输数据的大小,当客户端传输大量数据时使用避免网络饱和

protocol:在构造函数中使用,protocol参数让服务端知道客户端使用的WebSocket协议。而WebSocket对象的这个属性就是指的最终服务端确定下来的协议名称,可以为空

完整案例

使用公开的“echo.websocket.org/echo” websocket接口服务写一个完整的案例

    var ws = new WebSocket('ws://echo.websocket.org/echo');
    console.log('ws连接状态:' + ws.readyState);
    //监听是否连接成功
    ws.onopen = function () {
        console.log('ws连接状态:' + ws.readyState);
        //连接成功则发送一个数据
        ws.send('test1');
    }
    //接听服务器发回的信息并处理展示
    ws.onmessage = function (data) {
        console.log('接收到来自服务器的消息:');
        console.log(data);
        //完成通信后关闭WebSocket连接
        ws.close();
    }
    //监听连接关闭事件
    ws.onclose = function () {
        //监听整个过程中websocket的状态
        console.log('ws连接状态:' + ws.readyState);
    }
    //监听并处理error事件
    ws.onerror = function (error) {
        console.log(error);
    }

`
websocket

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

WebSocket 前端使用 的相关文章

随机推荐

  • 最新最全论文合集——基于统计学习的关系抽取

    AMiner平台 https www aminer cn 由清华大学计算机系研发 拥有我国完全自主知识产权 平台包含了超过2 3亿学术论文 专利和1 36亿学者的科技图谱 提供学者评价 专家发现 智能指派 学术地图等科技情报专业化服务 系统
  • compare4密钥过期解决方案

    删除C Users 用户名 AppData Roaming Scooter Software Beyond Compare 4下的所有文件 重启Beyond Compare 4即可 注意 用户名下的AppData文件夹有可能会被隐藏起来 其
  • 新手看过来----讨厌的运算符

    在计算机的世界里 虽然有很多数学的影子 但在计算公式转换为计算机语言时 很多表达方式并 不一致 这导致新手们初期不习惯 很容易用错 需要一个记忆的过程 就像学习英文 主谓宾定状补的先后顺序于中文是不一致的 在翻译句子时很容易产生中式英语 本
  • 【leetcode】1052. 爱生气的书店老板

    题目 解法 class Solution def maxSatisfied self customers grumpy X gt int 固定窗口最大和 param customers param grumpy param X return
  • hibernate查询方式

    1 OID 主键 查询 使用get方法 Customer customer session get Customer class 1l 使用load方法 Customer customer session load Customer cla
  • level2买股技巧_同花顺Level-2教你看清个股真实交易数据

    您可能感兴趣的话题 同花顺 核心提示 近几天 笔者在对比普通行情软件和同花顺Level 2行情软件在成交明细上的区别 发现这里面的学问非常大 近几天 笔者在对比普通行情软件和同花顺Level 2行情软件在成交明细上的区别 发现这里面的学问非
  • 贪心算法-背包问题C++

    1 问题 给定n种物品和一个背包 物品i的重量是Wi 其价值为Vi 背包的容量为C 应如何选择装入背包的物品 使得装入背包中物品的总价值最大 2 算法解析 此算法的贪心策略在于Sort排序函数 背包问题与0 1背包问题不同在于背包问题可以将
  • 【EI核心检索】第六届算法、计算与系统国际会议(ICACS 2022)

    会议官网 http icacs org 会议时间 2022年9月16 18日 主办单位 希腊色萨利大学数字系统学院 学术支持单位 英国斯特拉斯克莱德大学 会议地点 线上线下 希腊色萨利大学 会议出版 ACM会议论文集 会议收录 Ei Com
  • 单件模式:确保一个类只有一个实例,并提供一个全局访问点。

    问题 一个类只有一个实例的用处 线程池 缓存 对话框 处理偏好设置以及注册表等 全局变量的缺点 1 程序一开始就要创建好对象 一直未使用的话 就会浪费资源 2 全局变量只能约定只有一个实例 但是如果new新的实例 也是可以办到的 1 单件模
  • 最全面的Python重点知识汇总,建议收藏!

    这是一份来自于 SegmentFault 上的开发者 二十一 总结的 Python 重点 由于总结了太多的东西 所以篇幅有点长 这也是作者 缝缝补补 总结了好久的东西 Py2 VS Py3 print成为了函数 python2是关键字 不再
  • [DNN]CNN的结构分析和参数量计算

    文章目录 1 概述 1 1参数量计算方法 1 2神经元数量计算 1 3 连接数量计算 FLPOS 2 LeNet5结构和参数量计算 2 1 结构 2 2 对应的参数量计算 2 3 连接数量 FLOPS 资料来源 LeNet5分析 CNN参数
  • Mybatis-plus使用wrapper实现分页查询

    pom xml
  • 数据分级分类实施指南_逆袭!对数据分类分级治理快速提高企业数据管理水平...

    点击蓝色字免费订阅 每天收到这样的好信息 一 数据治理与数据分类分级 DAMA 数据管理知识体系指南 给出的定义 数据治理是对数据资产管理行使权力和控制的活动集合 规划 监控和执行 数据治理的职能是指导其他数据管理职能如何执行 数据治理就是
  • TeX Live for windows 安装及更新

    下载 install tl windows exe 或者install tl zip压缩包 解压之后右键以管理员身份运行install tl advanced bat 可以从官网下载 国内有镜像安装源 例如 https mirrors tu
  • Python智能合约开发指南(以太坊+web3py)

    在以太坊上获得一个基本的智能合约是一个很简单的事 只需google查询 ERC20代币教程 你会发现有关如何做到这一点的大量信息 以编程方式与合约交互完全是另一回事 如果你是一个Python程序员 那么教程就很少 所以写这个Python中的
  • java的队列实现方法_Java实现队列的三种方法集合

    数组实现队列 数组实现队列 class queue int a new int 5 int i 0 入队操作 public void in int m a i m 出队列操作 取出最前面的值 通过循环遍历把所有的数据向前一位 public
  • fairygui简单使用(unity)

    本文主要是引导怎么从fairygui页面ui编辑到unity的过程 如果想详细的那种 最好下载一个官方案例 里面都有详细的教程 不过这个对于新手来说还是挺好的 因为我刚开始以为是自己创建代码 自己写 先去官网下载一个gui编辑器 这是API
  • utf-8和gb2312的相互转换

    最近老是涉及到编码与解码的问题 GB2312转UTF 8 又或者UTF 8转GB2312 无意中在CSDN闲逛发现了一个CString 转UTF 8的思路 现摘寻下来 免得到时又找不着了 CString UTF8Convert CStrin
  • GDB 调试过程

    一 gdb 1 gdb 启动gdb 2 gdb tui 启动gdb 并且分屏显示源代码 3 gdb app 启动gdb调试指定程序app 4 gdb
  • WebSocket 前端使用

    h5提供了WebSocket网络协议 可以实现浏览器与服务器的双向数据传输 构造函数 WebSocket url protocol url WebSocket API URL URL之前需要添加ws 或者wss 类似http https p