刷新页面时Socket IO进行多个连接-Node JS

Question

我开发了一个报废工具，可以从所有网站报废工作并将它们保存到数据库中。我已经创建了自己的默认日志，我在其中获取消息（错误、信息）等。我正在使用 socket.io 来实时更新我的​​视图以及数据库。

问题是当我启动应用程序时，它完美地建立了套接字和数据库连接。但是当我尝试刷新页面时，相同的连接会再次使用相同的消息和不同的 ID 进行两次。在我刷新页面的同时，建立了连接，并且 ID 发生了变化，但是对于所有建立的连接，它们都使用一个 ID，

下面是显示它的日志：

我已经上传了this 视频，请也检查一下。尝试看最开始，然后在01:41和03:06，在第一个站点开始报废之前建立了连接，但是当第二个网站报废时，Internet Connection消息被给出了两次，并且相同代表当第三个网站报废开始时，消息的数量每次都会翻倍。我不知道为什么。

我已经尝试按照this问题的答案，但仍然没有成功。 server 文件上的代码有 600 多行，第二个文件有 150 多行，客户端也一样，所以我不能全部上传，有点保密。

但是客户端和服务端的socket连接是这样的：

服务器端

const express              =    require("express");
const app                  =    express();
const scrap                =    require("./algorithm");
const event = scrap.defEvent;//imported from another file 
const ms_connect = scrap.ms_connect;
const server = app.listen(8000, function(){ console.log('Listening on 8000'); });
const io                   =    require("socket.io").listen(server);
const internetAvailable    =    require("internet-available");
app.use(express.static(__dirname + "/"));


app.get("/scrap",function(req,res){
    res.sendFile(__dirname+"/index.html");//Set the Default Route
    io.on("connection",function(socket){ //On Socket Connection
        socketSameMess("Socket",'Sockets Connection Made on ID : <span style="color:#03a9f4;">'+socket.id+'<span>');
        ms_connect.connect(function(err){//On Connection with Database
            if(err) socketSameMess("database_error",err+" "); // If any error in database connection
            socketSameMess("Database ",'Connected to MYSQL Database Successfully...');
        })
    })
})

function eventSameMess(auth,mess){
    //hits the custom console
    defEvent.emit("hitConsole",{a:auth,m:mess});
}

客户端

var socket = io.connect('http://localhost:8000');
socket.on('connect',function(){
    if(socket.connected){
        initDocument();
    }
})  

Answer 1

获取多条消息

这里有一些socketio的经验法则

1. 如果你监听任何事件一次，你会在回调中得到一次消息

2. 如果你两次监听任何事件，你会在回调中收到两次消息

3. 如果您第 nth 次收听任何事件，您将在回调中收到消息 nth

4. 如果您正在收听页面加载时的任何事件，请不要忘记在离开页面之前listen off 该事件（如果事件不是全局的）

   • 如果您忘记listen off 并且如果您再次重新访问页面。您将开始多次收听事件。因为在页面加载时您正在收听该事件。并且之前的事件还没有被listen off 停止

5. 不要收听loop 中的任何事件，它可能会多次收听，一次更改就会收到多条消息。

连接套接字

const socket = io('http://localhost', {
  transports: ['websocket'], 
  upgrade: false
});

监听和监听事件

let onMessage = (data) => {
  console.log(data);
}
//listen message
socket.on('message', onMessage);

//stop listening message
socket.off('message', onMessage);    

在断开连接时删除所有侦听器

socket.on('disconnect', () => {
   socket.removeAllListeners();
});

---

使用Firecamp 直观地测试/调试 SocketIO 事件。

Answer 2

我遇到了每个客户端都获得两个套接字连接的问题。我认为套接字有问题。 但问题是

• 前端 -> 反应
• 使用 create-react-app 创建了模板
• 在 index.js 文件中，它使用名为 React.StrictMode 的东西
• 此模式将某些 App.js 组件渲染两次。
• 只需删除该 React.StrictMode 并尝试查看您的问题是否已解决。