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 通信中断重连问题