React JS socket.io-client开启多个连接

Question

我有一个连接到套接字 io 服务器的简单 React JS 应用程序。每当我在浏览器中打开应用程序时，客户端每 5 秒向服务器发送一次新的连接请求。

服务器：

const express = require('express');
const app = express();
const http = require('http');

const server = http.createServer(app);
const io = require('socket.io')(server);

io.on('connection', (socket) => {
    console.log('socket id:', socket.id);

})

server.listen(3001, () => {
    console.log('Listening on port 3001');
})

客户：

import React from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:3001');

const App = () => {

  return (
    <div>Hi there!</div>
  );
}

export default App;

服务器上的日志：

socket id: ByXQEMgeVaQ5AGw1AAAA
socket id: 8LzNQsyeYq7GSEvqAAAB
socket id: bbuYEs4kKzjxXuBsAAAC
socket id: vwprv4hnJbRlStG4AAAD

我怀疑我的笔记本电脑可能有问题，因为我在代码中没有发现任何错误，有什么想法吗？

提前致谢

Answer 1

您能否尝试将客户端套接字创建包装在只运行一次的 useEffect 中？我很好奇这种行为是否仍然出现。

import React from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:3001');

const App = () => {

  useEffect(() => {
    const socket = io('http://localhost:3001');
  }, [])

  return (
    <div>Hi there!</div>
  );
}

导出默认应用；

Answer 2

我建议在 useEffect 中调用 connect 和 return 在组件卸载时调用的 disconnect 方法。

const [socket, setSocket] = useState(null)
useEffect(() => {
  const newSocket = io('http://localhost:3001')
  setSocket(newSocket)

  return socket.disconnect()
}, [])

Answer 3

其实我刚刚找到了根本原因，我的客户端版本和服务器版本不匹配。我将客户端版本更新为 v4，现在可以正常使用了

React JS socket.io-client开启多个连接

React JS socket.io-client opens multiple connections

node.js

reactjs

socket.io