刷新頁面時套接字 IO 進行多個連接 - Node JS

Question

我開發了一個抓取工具，可以從所有網站上抓取工作並將它們保存到數據庫中。 我已經制作了自己的默認日志，用於獲取消息（錯誤、信息）等。我正在使用 socket.io 實時更新我的​​視圖和數據庫。

問題是當我啟動應用程序時，它完美地獲得了套接字和數據庫連接。 但是當我嘗試刷新頁面時，使用相同的消息和不同的 ID 再次建立了相同的連接兩次。 我刷新頁面，連接已建立，id 已更改，但對於所有已建立的連接，它們使用一個 ID，

以下是顯示它的日志：

我已經上傳了這個視頻，請也檢查一下。 嘗試看一開始，然后在01:41和03:06 ，在開始第一個站點的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的一些經驗法則

1. 如果您收聽任何事件一次，您將在回調中收到一次消息

2. 如果您兩次收聽任何事件，您將在回調中收到兩次消息

3. 如果您第 n次收聽任何事件，您將在回調中收到第 n 個消息

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 並嘗試查看您的問題是否已解決。