Nodejs中刷新页面socketio会请求多次，为什么？发送成功后，有木有办法就让它停下来。

Node.js 中刷新页面 Socket.io 会请求多次，为什么？

当你在浏览器中刷新页面时，浏览器会重新加载整个页面，包括所有与服务器建立的连接。对于 Socket.io 连接来说，这意味着每次页面刷新时，都会重新创建一个新的连接。因此，如果你在一个页面上刷新了多次，Socket.io 将会创建多个连接，从而导致多次请求。

发送成功后，有没有办法让它停下来？

为了防止这种情况，你需要在页面卸载或关闭之前断开 Socket.io 连接。这可以通过监听 beforeunload 或 unload 事件来实现。此外，你还可以在客户端代码中管理连接状态，确保在页面刷新前关闭连接。

示例代码

客户端代码（JavaScript）

// 创建一个 socket 实例
const socket = io();

// 监听 beforeunload 事件，确保在页面关闭前关闭 socket 连接
window.addEventListener('beforeunload', function (e) {
    socket.disconnect();
});

// 发送消息的示例
function sendMessage() {
    const message = document.getElementById('message').value;
    socket.emit('chat message', message);
}

// 接收消息的示例
socket.on('chat message', function(msg) {
    console.log('Message received: ' + msg);
});

服务端代码（Node.js/Express + Socket.io）

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

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', function(socket) {
    console.log('A user connected');

    // 监听消息事件
    socket.on('chat message', function(msg) {
        console.log('Message received: ' + msg);
        io.emit('chat message', msg); // 广播给所有客户端
    });

    // 监听 disconnect 事件，用户断开连接时触发
    socket.on('disconnect', function() {
        console.log('User disconnected');
    });
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

1. 客户端代码：

   • 使用 io() 创建一个 Socket.io 客户端实例。
   • 监听 beforeunload 事件，在页面即将关闭时调用 socket.disconnect() 关闭连接。
   • 实现 sendMessage 函数用于发送消息，并监听 chat message 事件以接收消息。

2. 服务端代码：

   • 使用 Express 和 Socket.io 创建一个 HTTP 服务器。
   • 在连接时打印一条日志。
   • 监听 chat message 事件，将消息广播给所有客户端。
   • 在用户断开连接时打印一条日志。

通过这种方式，你可以确保在页面刷新前关闭 Socket.io 连接，避免多次请求的问题。

用once方法代替on方法就行了，once方法只会发出一次消息