Websocket API 大全

HTML5 herman 661浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

Websocket 自推出以来,深受广大开发者喜爱。各种应用和后端框架也有很多开源的库,但是前端这方面,涉及的开源库并不多。很多技术人员需要手动的来实现这方面的代码。我这里分享了整理了所有的Websocket API。

实例化 Websocket

WebSocket WebSocket(String url,optional String | [] protocols);

接收两个参数:

  • url 表示需要连接的地址,比如:ws://localhost:8080;
  • protocols 可选参数,可以是一个字符串或者一个数组,用来表示子协议,这样做可以让一个服务器实现多种 WebSocket 子协议;

实例化对象提供两个方法:

  • send 接收一个 String|ArrayBuffer|Blob 数据,作为数据发送到服务端;
  • close 接收一个(可选)的 code(关闭状态号,默认为 1000) 与一个(可选)的字符串(表示断开原因),客户端主动断开连接;

连接状态:

  • WebSocket 类提供了一些常量表示连接状态:

    • WebSocket.CONNECTING 0 连接还没开启;
    • WebSocket.OPEN 1 连接已开启并准备好进行通信;
    • WebSocket.CLOSING 3 连接正在关闭的过程中;
    • WebSocket.CLOSED 4 连接已经关闭,或者连接无法建立;
  • WebSocket 的实例对象中提供了 readyState 属性来判断当前状态;

实例化对象中可以监听到以下事件:

  • open 连接打开的回调事件,这时 readyState 变为 OPEN;
  • message 收到消息的回调事件,同时回调函数接收到一个 MessageEvent 数据;
  • close 连接关闭的回调事件,这时 readyState 变为 CLOSED;
  • error 建立与连接过程发生错误的回调事件;

以下是一个 Websocket 实例。

const ws = new WebSocket('ws://localhost:8080');
// 业余草
let sendTimmer = null;
let sendCount = 0;
ws.onopen = function () {
  console.log('@open');
  sendCount++;
  ws.send('Hello Server!' + sendCount);
  sendTimmer = setInterval(function () {
    sendCount++;
    ws.send('Hi Server!' + sendCount);

    if (sendCount === 10) {
      ws.close();
    }
  }, 2000);
};
ws.onmessage = function (e) {
  console.log('@message');
  console.log(e.data);
};
ws.onclose = function () {
  console.log('@close');
  sendTimmer && clearInterval(sendTimmer);
};
ws.onerror = function () {
  console.log('@error');
};

对 WebSocket 实例监听事件有两种方式,这里以 message 事件为例:

  • 对 onmessage 属性直接赋值,正如以上:ws.onmessage = function () {};
  • 使用 addEventListener 监听事件,如:ws.addEventListener('message', function () {})

在 message 回调函数中得到 MessageEvent 类型参数 e ,我们需要的数据可以通过 e.data 获取;
需要注意的一点是:不论服务端与客户端,其接受到的数据都是序列化后的字符串(当然也有 ArrayBuffer|Blob 类型数据),很多时候我们需要解析处理数据,比如 JSON.parse(e.data)

连接稳定性

由于网络环境复杂,某些情况会出现断开连接或者连接出错,需要我们在 close 或者 error 事件中监听非正常断开并重连;

由于一些原因在 error 时浏览器并不会响应回调事件,因此稳妥的做法还需要在 open 之后开启一个定时任务去判断当前的连接状态 readyState ,在出现异常情况下尝试重连;

心跳

websocket规范定义了心跳机制,一方可以通过发送ping(opcode 0x9)消息给另一方,另一方收到ping后应该尽可能快的返回pong(0xA)。

心跳机制是用于检测连接的对方在线状态,因此如果没有心跳,那么无法判断一方还在连接状态中,一些网络层比如 nginx 或者浏览器层会主动断开连接,

在 JavaScript 中,WebSocket 并没有开放 ping/pong 的 API ,虽然浏览器自带了心跳处理,然而不同厂商的实现也不尽相同,因此需要在我们开发时候与服务端约定好一个自实现的心跳机制;
比如浏览器中,检测到 open 事件后,启动一个定时任务,每次发送数据 0x9 给服务端,而服务端返回 0xA 作为响应;
实践下来,心跳的定时任务一般是相隔 15-20 秒发送一次。

Websocket 是建立与 TCP 之上。Websocket 连接分为建连阶段与连接阶段,在建立连接阶段借助于 HTTP ,而在连接阶段则与 HTTP 无关。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » Websocket API 大全