WebSocket 学习笔记

WebSocket 学习笔记

来自我的博客

因为项目原因需要用到双工通信，所以比较详细的学习了一下浏览器端支持的 WebSocket.
并记录一些遇到的问题。

简介

WebSocket 一般是指浏览器提供的 API 接口，允许 Web 页面通过 WebSocket 协议与远程主机进行双向通信。

注：本接口不允许到底层网络的原始访问。举例说明，本接口不能被用于实现一个不通过自定义服务器代理发送消息的 IRC（网间实时聊天，Internet Relay Chat）客户端。

接口说明 文档

WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。

常见问题

1.基于 WebSocket 心跳功能

因为 WebSocket 本身不提供心跳功能，所以在有些时候无法及时正确的判断与后端的连接状态，很多时候就需要自己来进行实现。可以通过与后端约定定时握手的形式来实现心跳功能。比如说每 30 秒通信一次。

/** WebSocket 心跳 **/

const msg = "heatbeat"; // 约定的心跳消息
let timer = null; // 定时器
let lastMsgTimestamp = null; // 时间戳
let ws = new WebSocket(""); // ws 实例

ws.onopen = e => {
  // 更新时间戳
  lastMsgTimestamp = new Date().getTime();

  if (e.type === "open") {
    // 创建心跳连接
    if (timer) {
      clearInterval(timer);
    }
    timer = setInterval(heatbeat, 10000);
  }
};

function heatbeat() {
  if (ws) {
    if (new Date().getTime() - lastMsgTimestamp > 300000) {
      clearInterval(timer);
      console.log("心跳已断开");
      // ... 心跳断开后的处理
    } else {
      // 发送约定的心跳
      ws.send(msg);
    }
  }
}

/** 记得关闭连接时清楚定时器 **/

TODO 通信中断重连问题