reactjs - React Development Server（启动脚本）导致与 socket.io 服务器的重复连接

Question

我在后端使用 express 和 socket.io，并为前端做出反应。如果我直接连接到后端服务器（端口 3001）并且它从 react 构建文件夹（通过创建react-scripts build）为我服务，一切都按预期工作，只创建一个 socket.io 连接。刷新页面会断开它，然后再次连接。

但是，如果我通过 连接到托管的开发服务器（端口 3000）react-scripts start，则会创建一个神秘的第二个套接字连接。此套接字有一个新 ID，并且似乎没有绑定到我的任何客户端事件，因为我的客户端代码在使用我的应用程序期间从未看到重复调用。只是初始加载以及刷新浏览器会导致两个connect/disconnect事件。每个事件的第二个事件通常在第一个事件之后大约 500 毫秒。

我也在使用"proxy"react 应用程序的 package.json 中定义的属性，但能够删除它并验证这不是原因（在使用扩展禁用 CORS 后，因为这会干扰 socket.io 连接到另一台服务器） .

我的应用程序要求每个客户端只有一个连接。我只能在测试期间使用内置的反应应用程序来解决这个问题，但这很烦人。很容易复制。下面是一些示例打字稿代码。

这是反应开发服务器的错误还是我的问题？

// server
import * as exp from "express";
import * as http from "http";
import * as io from "socket.io";

const expWrap = express();
const httpServer = http.createServer(expWrap);
const ioWrap = new io.Server(httpServer);
ioWrap.on("connect", (socket: io.Socket) =>
{
    console.log(`Socket ${socket.id} connected.`);
    socket.on("disconnect", () =>
    {
        console.log(`Socket ${socket.id} disconnected.`);
    }
}

// client react component
import io from "socket.io-client";

// constructor for react component
constructor(props: Props)
{
    this.socket = io();
}

标签： reactjsexpresssocket.io