Websocket API 大全

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 无关。

： » Websocket API 大全