WebSocket进阶-KeepStudy

WebSocket进阶

### WebSocket心跳机制、重连机制

##### **心跳机制几个关键概念**

- > 1. 心跳包：数据包 => 通常是一个标识或消息
  > 2. 心跳间隔：心跳包发送的时间间隔
  > 3. 心跳响应：客户端或者服务器接收心跳包时，做出的响应
  > 4. 维护状态：心跳检测机制通常在服务器端维护状态
  > 5. 超时处理：心跳检测机制认定为不活跃、超时并做处理(**自动重连机制**)

##### 心跳机制作用

- > 1. 检测连接状态
  > 2. 维护连接性
  > 3. 管理在线状态
  > 4. 检测系统、设备健康状况
  > 5. 减少资源浪费

##### 心跳机制方式

- > 1. 使用setInterval定时发送心跳包。
  > 2. 在前端监听到WebSocket的onclose()事件时，重新创建WebSocket连接。
  >
  > 第一种方式会对服务器造成很大的压力，因为即使WebSocket连接正常，也要定时发送心跳包，从而消耗服务器资源。第二种方式虽然减轻了服务器的负担，但是在重连时可能会丢失一些数据。

##### WebSocket心跳机制原理

- > WebSocket心跳机制的原理是利用心跳包及时发送和接收数据，保证WebSocket长连接不被断开。WebSocket心跳机制的原理可以用下面的流程来说明：
  >
  > 1. 客户端建立WebSocket连接。
  > 2. 客户端向服务器发送心跳数据包，服务器接收并返回一个表示接收到心跳数据包的响应。
  > 3. 当服务器没有及时接收到客户端发送的心跳数据包时，服务器会发送一个关闭连接的请求。
  > 4. 服务器定时向客户端发送心跳数据包，客户端接收并返回一个表示接收到心跳数据包的响应。
  > 5. 当客户端没有及时接收到服务器发送的心跳数据包时，客户端会重新连接WebSocket

##### WebSocket心跳包机制

- > 心跳包是指在一定时间间隔内，WebSocket发送的空数据包。WebSocket心跳包是WebSocket协议的保活机制，用于维持长连接。有效的心跳包可以防止长时间不通讯时，WebSocket自动断开连接。常见的WebSocket心跳包机制如下：
  >
  > 1. 客户端定时向服务器发送心跳数据包，以保持长连接。
  > 2. 服务器定时向客户端发送心跳数据包，以检测客户端连接是否正常。
  > 3. 双向发送心跳数据包。

##### WebSocket重连机制

- > WebSocket在发送和接收数据时，可能会因为网络原因、服务器宕机等因素而断开连接，此时需要使用WebSocket重连机制进行重新连接。WebSocket重连机制可以通过以下几种方式实现：前端监听WebSocket的onclose()事件，重新创建WebSocket连接。
  >
  > 1. 使用WebSocket插件或库，例如Sockjs、Stompjs等。
  > 2. 使用心跳机制检测WebSocket连接状态，自动重连。
  > 3. 使用断线重连插件或库，例如ReconnectingWebSocket等。

```javascript
let timer = null;
let retry = 0;

// 监听WebSocket连接成功事件
websocket.onopen = () => {
    connected.value = true;
    retry = 0
    clearInterval(timer);
    timer = setInterval(() => {
        sendMessage("ping");
    }, 1000 * 6);
    sendMessage(true);
};

/**
 * 客户端向服务器发送消息
 * type: 'ping' 就是发送的心跳包
 */
const sendMessage = (type = "") => {
    if (!websocket) return;
    const state = {  }; 
    const messageObj = { // 消息对象
        ...state,
        type
    };
    websocket.send(JSON.stringify(messageObj));
};

// 监听WebSocket连接成功事件
websocket.onmessage = () => {
    const msg = JSON.parse(event.data);
    if (msg.type === 'ping') {
        if( msg.status !== 'pong') { // 断线重连
            // Message.loading('断线重连中...')
            reConnectWebSocket()
        }
        console.log('心跳检测中状态：', msg.status)
    }
};

/**
 *  重连控制函数
 * @param {*} automatic 是否手动重连
 * @param {*} retryCunt 
 */
const reConnectWebSocket = (isAutomatic=false, retryCunt=10) => {
    flag = false;
    if (!automatic) {
        console.log(retry, "自动重连次数")
        retry++
        if (retry >= retryCunt) {
            clearInterval(timer);
            connected.value = false;
            socket = null;
            return
        }
    } else {
        console.log('手动重连')
    }
    connectWebSocket();
};
```

顶部

WebSocket

目录

相关推荐