使用 React 构建部署在 Node/Express 上时，Socket.IO 无法正常工作

Question

我在我的Node/Express后端设置了一个Socket.io实例。 前端是 React。 当我构建React应用程序并将其部署在后端时，一切都在我的设备上运行良好。 但是，当我将代码移动到生产服务器时，没有任何通信。 我相信这是因为我没有正确初始化客户端，但是我尝试了多次迭代并且无法让它工作。

我试过使用服务器名称、IP 地址和 localhost，但没有任何效果。 我希望下面的工作：

//SOCKET.IO CLIENT SETUP
import { io } from "socket.io-client";
const socket = io(); //there is NO separation between client and server in the production instance
export default socket;

在服务器端，设置socket.io实例的代码直接取自文档中的Express示例。

import express from "express";
const app = express();

//SOCKET.IO SERVER SETUP
import { createServer } from "http";
import { Server } from "socket.io";
const httpServer = createServer();
const io = new Server(httpServer, {});
httpServer.listen(8080);

//SOCKET MANAGEMENT
var connections = 0;
io.on("connection", (socket) => {
  connections++;
  console.log(connections);
});

Answer 1

这是有效的：

客户端：使用了 CORS 选项

//REPLACE 'DOMAINNAME' WITH YOUR DOMAIN/IP ADDRESS
const socket = io("http://domainname:8080", {
    withCredentials: true,
    extraHeaders: {
      "my-custom-header": "abcd"
    }
});

服务器端：添加源数组

如此处的Socket.IO文档中所述（文档中不太清楚，因为示例已被注释掉）

这意味着服务器代码对来自多个来源的请求更具弹性。

我仍然不明白为什么我必须考虑 CORS，因为服务器/客户端都是从同一个地方提供服务的，所以如果有人想用答案来启发这一点，我会很乐意将其标记为正确的。

Answer 2

在创建套接字服务器的 nodejs 文件中尝试此操作
io.attach(服务器);

Answer 3

一旦您尝试全局io导出

`io = module.exports = require("socket.io")(server, { allowEIO3: true /* false by default**/ });`