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);
    }
  }
}

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

巴特西

WebSocket 学习笔记

WebSocket 学习笔记

简介

接口说明文档

常见问题

1.基于 WebSocket 心跳功能

TODO 通信中断重连问题

最新文章

热门文章

巴特西

WebSocket 学习笔记

WebSocket 学习笔记

简介

接口说明 文档

常见问题

1.基于 WebSocket 心跳功能

TODO 通信中断重连问题

最新文章

热门文章

接口说明文档