WebSocket
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(); }; ```
顶部
收展
底部
[TOC]
目录
WebSocket基础
WebSocket进阶
相关推荐
JavaScript高级程序设计(4)