轻松实现 Websocket 心跳检测与短线重连：从小白到高手

前端

2023-03-15 03:28:34

WebSocket：实时交互的网络利器

在瞬息万变的互联网世界中，实时性和交互性已成为衡量网络应用品质的关键。WebSocket 应运而生，作为一种双向通信协议，它在浏览器与服务器之间建立持久连接，在即时通讯、在线游戏、协同编辑等领域发挥着至关重要的作用。

心跳检测与短线重连：稳定连接的保障

为了确保 WebSocket 连接的可靠性和稳定性，心跳检测和短线重连机制不可或缺。

心跳检测 ：客户端定期向服务器发送心跳包，以便服务器知道客户端仍然在线。服务器在收到心跳包后，向客户端发送一个回复消息，以确认心跳包已收到。如果服务器在一定时间内没有收到心跳包，则认为客户端已断线，并关闭连接。
短线重连 ：客户端监听 WebSocket 连接的关闭事件。在连接关闭时，客户端尝试重新连接服务器。重新连接成功后，客户端重新发送数据。

WebSocket 心跳检测与短线重连的实现

实现 WebSocket 心跳检测和短线重连可以采用多种方式。这里提供了 Python 和 JavaScript 的示例代码：

Python 代码示例：

import websockets
import asyncio

async def heartbeat(websocket):
    while True:
        await websocket.send("heartbeat")
        await asyncio.sleep(5)

async def main():
    uri = "ws://localhost:8765"
    async with websockets.connect(uri) as websocket:
        await asyncio.gather(heartbeat(websocket), echo(websocket))

asyncio.run(main())

JavaScript 代码示例：

const socket = new WebSocket('ws://localhost:8765');

socket.onopen = function() {
    console.log('WebSocket connection established');

    // Send a heartbeat packet every 5 seconds
    setInterval(function() {
        socket.send('heartbeat');
    }, 5000);
};

socket.onclose = function() {
    console.log('WebSocket connection closed');

    // Attempt to reconnect after 5 seconds
    setTimeout(function() {
        socket.connect();
    }, 5000);
};

socket.onmessage = function(event) {
    console.log('Received message: ' + event.data);
};