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

Question

我有一个简单的 React JS 应用程序连接到套接字 io 服务器。每当我在浏览器中打开应用程序时，客户端每 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 中调用 connect 并返回在组件卸载时调用的 disconnect 方法。

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

  return socket.disconnect()
}, [])