刷新页面时，套接字IO建立多个连接-Node JS

Question

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

问题是，当我启动应用程序时，它完美地获得了套接字和数据库连接。但是，当我尝试刷新页面时，使用相同的消息和不同的ID再次进行相同的连接两次。我尽可能多地刷新页面以建立连接，并更改id，但是对于所有已建立的连接，它们都使用一个ID，

下面是显示它的日志：

我已经上传了this个视频，请也检查一下。尝试先观察一下，然后观察01:41和03:06，然后再开始第一个站点的剪贴建立连接，但是当开始第二个站点的剪贴时，Internet Connection消息是给定两次，并且相同的含义是开始第三个网站抓取时，每次的消息数量都会增加一倍。我不知道为什么。

我尝试遵循this问题的答案，但仍然没有成功。 server文件上的代码为600多行，第二个文件上的代码为150多行，而在客户端则相同，这就是为什么我不能全部上传并且对其保密的原因。

但是客户端和服务器上的套接字连接是这样的：

服务器端

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

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

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

Answer 2

获取多条消息

这是关于socketio的一些经验法则

1. 如果您一次监听任何事件，则会在回调中收到一次消息
2. 如果您两次收听任何事件，您将在回调中两次收到消息

3. 如果您在第 n 次听到任何事件，则会在回调中收到消息 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();
});