使用 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**/ });`