node.js - 如何确保每个用户只打开一个 socket.io 连接？

Question

我分别在 Express 和 React 端使用 socket.io 和 socket.io-client。

在服务器端，我使用socket.id在连接事件中console.log，当我只打开一页时它总是显示两个连接，如下所示:

一个用户连接了woF_Gu_8ElqMB7a5AAAC
一个用户连接 lBAycJ6j0X5Q469SAAAD

但是，当从前端发出消息时，只使用一个连接。

这是我设置 socket.io 服务器端的方法:

// ** bin/www file **
var server = http.createServer(app);
const io = require('socket.io')(server);

// Get socket module and pass it the io socket from here
require('../sockets')(io);

// ** sockets.js **
module.exports = io => {
  io.on('connection', (socket) => {
    console.log("A user connected", socket.id); // Fires twice with different IDs

    socket.on("Setup", data => {
      console.log("Data received:", data); // Only fires once per emit from frontend
    }

    socket.on("disconnect", () => {
      console.log("User disconnected");
    }

}

这是我设置客户端的方式，尽管我不确定这是否重要，因为即使我没有此代码，它也会持续发生:

import io from 'socket.io-client';
const socket = io(window.location.origin);

知道为什么我总是得到两个连接吗？谢谢!

编辑:添加网络截图。

Answer 1

我解决了我的问题并想在这里分享解决方案，尽管我不知道为什么我以前所做的工作不起作用。

我在 App.js 中使用 React Router，并在路由到的组件中导入 socket.io-client。由于某种原因(或更多，取决于我放置 const socket = io(); 行的位置)，这是双重连接。

我的解决方案是在 App.js 中导入 socket.io-client 并在需要时将 io 作为 prop 传递给组件，如下所示:

import * as io from 'socket.io-client';

const socket = io();

class App extends Component {
 render() {
  return (
   <Router>
    <Header/>
    <Switch>
     <Route exact path="/" render={props => (<Home/>)}/>
     <Route exact path="/story" render={props => (<Start socket={socket} />)}/>
    </Switch>
   </Router>
  );
 }
}

export default App;

这在较高级别定义了套接字并在需要的地方向下传递，因此没有两次调用任何内容而我保持在一个连接上。