WebSocket

简要介绍

websocket是一种建立浏览器持久连接的一种方式，无跨源限制，建立webscoket连接开始需要通过http来升级通信协议到websocket。

websocket前端代码

const socket = new WebSocket("wss://xxx");
//连接已建立
socket.onopen = function(e) {
  // 通过socket.send来发送数据，WebSocket 通信由 “frames”（即数据片段）组成，可以传输文本数据和二进制数据。
  socket.send("My name is YangNan");
};
//接收到数据
socket.onmessage = function(event) {
  // 接收服务端消息
};
//连接已关闭
socket.onclose = function(event) {
   // 如果连接正常关闭wasClean则为 true，否则为 false。
  if (event.wasClean) {
  } else {
    // 例如服务器进程被杀死或网络中断
    // 在这种情况下，event.code 通常为 1006
  }
};
// Websocket错误
socket.onerror = function(error) {

};
// 通过该方法来进行关闭，常见错误码1000 —— 默认，正常关闭（如果没有指明 code 时使用它），小于1000的码被保留，设置时会出错
socket.close([code], [reason]); 

其他属性

1. socket.bufferedAmount 属性储存了目前已缓冲的字节数，检查它以查看 socket 是否真的可立即用于传输。
2. socket.readyState获取连接当前的状态

• 0 —— “CONNECTING”：连接还未建立，
• 1 —— “OPEN”：通信中，
• 2 —— “CLOSING”：连接关闭中，
• 3 —— “CLOSED”：连接已关闭。

websocket超时重连的心跳检测

class WebSocketWithHeartbeat {
   constructor(url) {
       this.url = url;
       this.pingInterval = 5000; // 5秒发送一次ping
       this.pongTimeout = 3000; // 3秒未收到pong判定超时
       this.connect();
   }
   connect() {
       this.ws = new WebSocket(this.url);
       this.ws.onopen = () => this.startHeartbeat();
       this.ws.onmessage = e => {
           if (e.data === 'pong') clearTimeout(this.pongTimer);
       };
       this.ws.onclose = () => this.reconnect();
   }
   startHeartbeat() {
       this.pingTimer = setInterval(() => {
           this.ws.send('ping');
           this.pongTimer = setTimeout(() => this.handleTimeout(), this.pongTimeout);
       }, this.pingInterval);
   }
   handleTimeout() {
       console.log('心跳超时，重连中...');
       this.ws.close();
   }
   reconnect() {
       clearInterval(this.pingTimer);
       setTimeout(() => this.connect(), 5000);
   }
}

引用链接：现代javascript