Socket.io_socket.io的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/u013105927/article/details/147032386

以下是一个使用 socket.io 实现完整 WebSocket 功能的前端示例，包含创建、连接、心跳、断开、报错、断开重连事件。同时，还会给出对应的 Node.js 后端示例代码。

后端代码（Node.js）

首先，确保你已经安装了 express 和 socket.io，可以使用以下命令进行安装：

npm init -y
npm install express socket.io

以下是后端代码示例 server.js：

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

const port = 3000;

// 监听连接事件
io.on('connection', (socket) => {
    console.log('A user connected');

    // 监听心跳事件
    socket.on('heartbeat', () => {
        socket.emit('heartbeat-ack');
    });

    // 监听断开连接事件
    socket.on('disconnect', () => {
        console.log('A user disconnected');
    });
});

http.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

前端代码

创建一个 HTML 文件 index.html，并在其中引入 socket.io 客户端库，同时编写前端 JavaScript 代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket.io Example</title>
</head>

<body>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        // 创建 Socket 实例
        const socket = io('http://localhost:3000');

        let heartbeatInterval;

        // 连接成功事件
        socket.on('connect', () => {
            console.log('Connected to the server');

            // 启动心跳机制
            heartbeatInterval = setInterval(() => {
                socket.emit('heartbeat');
            }, 5000); // 每 5 秒发送一次心跳
        });

        // 心跳响应事件
        socket.on('heartbeat-ack', () => {
            console.log('Heartbeat acknowledged');
        });

        // 断开连接事件
        socket.on('disconnect', () => {
            console.log('Disconnected from the server');
            clearInterval(heartbeatInterval); // 停止心跳

            // 断开重连机制
            const reconnectInterval = setInterval(() => {
                console.log('Trying to reconnect...');
                socket.connect();
            }, 5000); // 每 5 秒尝试重连一次

            // 重连成功后清除重连定时器
            socket.on('connect', () => {
                clearInterval(reconnectInterval);
                console.log('Reconnected to the server');
                heartbeatInterval = setInterval(() => {
                    socket.emit('heartbeat');
                }, 5000);
            });
        });

        // 错误事件
        socket.on('error', (error) => {
            console.error('Socket error:', error);
        });
    </script>
</body>

</html>

运行步骤

启动后端服务器：在终端中运行 node server.js，启动后端服务器。
打开前端页面：将 index.html 文件放在一个 Web 服务器中（例如使用 http-server），然后在浏览器中打开该页面。

代码解释

后端代码：使用 express 和 socket.io 创建一个 WebSocket 服务器，监听客户端的连接、心跳和断开事件。
前端代码：
- 创建连接：使用 io('http://localhost:3000') 创建一个 Socket 实例并连接到后端服务器。
- 心跳机制：在连接成功后，每 5 秒发送一次心跳消息 heartbeat，并监听服务器的心跳响应 heartbeat-ack。
- 断开连接：当与服务器断开连接时，停止心跳机制，并启动重连机制，每 5 秒尝试重新连接。
- 错误处理：监听 error 事件，当出现错误时打印错误信息。