WebSocket—实现实时通讯

---

前言

电子邮件系统能够做到不刷新（不主动请求）就能收到新邮件提醒，主要依赖于WebSocket等实时通信技术。

---

一、websocket是什么

• 全双工通信
  一种双向同时通信的通信方式，其中通信的双方可以同时发送和接收信息。在这种通信方式下，通信系统的每一端都设置了发送器和接收器，因此能控制数据同时在两个方向上传送。这类似于我们平时打电话，可以在说话的同时听到对方的声音。
  特点：高效率、低延迟、宽带利用率高，适用于实时、双向交互场景。
• WebSocket
  WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，建立在 HTTP 协议基础之上。应用程序与服务器之间需要建立长连接，通过 WebSocket 协议进行实时通信。服务器端可以在有新邮件到达时主动向客户端推送通知，客户端接收到通知后即时展示给用户。
  特点：（1）全双工；（2）二进制帧；（3）协议名；（4）握手

二、WebSocket 连接过程

当用户成功登录，WebSocket 开始建立连接。
（1）客户端发起连接请求：客户端首先创建一个WebSocket对象，并向服务器发送一个 HTTP 请求以建立 WebSocket 连接。这个请求中包含了希望升级为 WebSocket 协议的信息，在请求头中设置Upgrade: Websocket、Connection: Upgrade。
（2）服务器响应并同意升级：服务器收到客户端的请求后，会验证请求并决定是否同意升级为 WebSocket 协议。如果同意，服务器会返回一个HTTP 101状态码，表示协议切换成功，并在响应头中添加 Upgrade 和 Connection 字段，告知客户端连接已经升级为 WebSocket 协议。
（3）TCP通道建立与通信：一旦连接升级为 WebSocket 协议，客户端和服务器之间会通过单一的TCP通道进行全双工通信。这意味着双方都可以在任何时候主动发送数据，而不需要像传统的HTTP协议那样建立多个连接。
（4）保持连接状态与实时通信：WebSocket 协议使用长连接，一旦建立连接后，会保持持久的连接状态，直到显式关闭。这种特性使得服务器可以随时主动向客户端下发数据，实现实时通信。
（5）控制开销与简单实现：WebSocket 协议在连接创建后，通过优化数据包头部大小来减少通信时的开销。同时，由于它建立在 TCP 协议之上，服务器端的实现相对容易，且没有同源限制，客户端可以与任意服务器通信。

三、WebSocket 使用步骤

1. 后端 websocket 服务器

以 Node.js 为例：

const WebSocket = require('ws')
const wss = new WebSocket.Server({
    port: 8080 })
...

2. 前端 JS 代码

代码如下（示例）：

// WebSocket服务器地址  
const webSocketServerUrl = 'wss://your-websocket-server-url';  
  
// WebSocket连接实例  
let socket;  
  
// 心跳检测相关变量  
let heartbeatIntervalId;  
let heartbeatTimeoutId; 
const heartbeatInterval = 5000; // 心跳间隔（毫秒）  
const heartbeatTimeout = 10000; // 心跳超时时间（毫秒）   
  
// 重连相关变量  
let reconnectIntervalId;  
const reconnectInterval = 2000; // 重连间隔（毫秒）  
const maxReconnectAttempts = 5; // 最大重连尝试次数  
let reconnectAttempts = 0