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

Question

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

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

下面是显示它的日志：

我已经上传了this视频，请同时查看。尝试观看最开始的部分，然后在 01:41 和 03:06，在开始第一个网站抓取之前建立连接，但是当第二个网站抓取开始时，Internet Connection 消息是给出两次，同样代表当第三次网站抓取开始时，消息数量每次都增加一倍。不知道为什么。

我已经尝试按照问题的答案进行操作，但仍然没有成功。代码在 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 的经验法则

如果你监听任何事件一次，你将在回调中收到一次消息
如果您两次收听任何事件，您将在回调中收到两次消息
如果您收听任何事件 nth 次，您将在回调中收到消息 nth
如果您在页面加载时监听任何事件，请不要忘记在离开页面之前listen off该事件（如果事件不是全局的）
- 如果您忘记 listen off 并且如果您再次重新访问页面。您将开始多次收听事件。因为在页面加载时您正在收听该事件。 listen off
不要收听 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();
});

Use Firecamp to test/debug SocketIO events visually.

Answer 2

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

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

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

Socket IO makes multiple connections when the page is refreshed - Node JS

websocket

node.js

socket.io

socket.io-1.0

这里有一些 socketio 的经验法则

连接套接字

收听和收听一个事件

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