利用setInterval定时发送心跳包。 在前端监听到WebSocket的onclose()事宜时,重新创建WebSocket连接。
第一种办法会对做事器造成很大的压力,由于纵然WebSocket连接正常,也要定时发送心跳包,从而花费做事器资源。第二种办法虽然减轻了做事器的包袱,但是在重连时可能会丢失一些数据。
WebSocket心跳包是WebSocket协议的保活机制,用于坚持长连接。有效的心跳包可以防止永劫光不通讯时,WebSocket自动断开连接。

心跳包是指在一定韶光间隔内,WebSocket发送的空数据包。常见的WebSocket心跳包机制如下:
客户端定时向做事器发送心跳数据包,以保持长连接。 做事器定时向客户端发送心跳数据包,以检测客户端连接是否正常。 双向发送心跳数据包。
三、WebSocket心跳机制事理WebSocket心跳机制的事理是利用心跳包及时发送和吸收数据,担保WebSocket长连接不被断开。WebSocket心跳机制的事理可以用下面的流程来解释:
客户端建立WebSocket连接。 客户端向做事器发送心跳数据包,做事器吸收并返回一个表示吸收到心跳数据包的相应。 当做事器没有及时吸收到客户端发送的心跳数据包时,做事器会发送一个关闭连接的要求。 做事器定时向客户端发送心跳数据包,客户端吸收并返回一个表示吸收到心跳数据包的相应。 当客户端没有及时吸收到做事器发送的心跳数据包时,客户端会重新连接WebSocket
四、WebSocket心跳机制必要吗WebSocket心跳机制是必要的,它可以使 WebSocket 连接保持长连接,避免断开连接的情形发生。同时,心跳机制也可以检讨WebSocket连接的状态,及时处理非常情形。
五、WebSocket心跳机制作用WebSocket心跳机制的浸染紧张有以下几点:
保持WebSocket连接不被断开。检测WebSocket连接状态,及时处理非常情形。减少WebSocket连接及做事器资源的花费。六、WebSocket重连机制WebSocket在发送和吸收数据时,可能会由于网络缘故原由、做事器宕机等成分而断开连接,此时须要利用WebSocket重连机制进行重新连接。
WebSocket重连机制可以通过以下几种办法实现:
前端监听WebSocket的onclose()事宜,重新创建WebSocket连接。 利用WebSocket插件或库,例如Sockjs、Stompjs等。 利用心跳机制检测WebSocket连接状态,自动重连。 利用断线重连插件或库,例如ReconnectingWebSocket等。
七、WebSocket的缺陷和不敷WebSocket的缺陷和不敷紧张有以下几点:
WebSocket须要浏览器和做事器端都支持该协议。 WebSocket会增加做事器的包袱,不适宜大规模连接的运用处景。
八、关键代码// 开启心跳const start = () => {clearTimeout(timeoutObj);// serverTimeoutObj && clearTimeout(serverTimeoutObj);timeoutObj = setTimeout(function () {if (websocketRef.current?.readyState === 1) {//连接正常sendMessage('hello');}}, timeout);};const reset = () => {// 重置心跳 打消韶光clearTimeout(timeoutObj);// 重启心跳start();};ws.onopen = (event) => {onOpenRef.current?.(event, ws);reconnectTimesRef.current = 0;start(); // 开启心跳setReadyState(ws.readyState || ReadyState.Open);};ws.onmessage = (message: WebSocketEventMap['message']) => {const { data } = message;if (data === '收到,hello') {reset();return;}if (JSON.parse(data).status === 408) {reconnect();return;}onMessageRef.current?.(message, ws);setLatestMessage(message);};const connect = () => {reconnectTimesRef.current = 0;connectWs();};
紧张思路:在建立长连接的时候开启心跳,通过和做事端发送信息,得到做事端给返回的信息,然后重置心跳,清楚韶光,再重新开启心跳。如果网络断开的话,会实行方法,重新连接。
作者:一只小锦李_链接:https://juejin.cn/post/7290005438153867283