React/Socket.io聊天应用部署Heroku后无法实时通信求助

1. 修正Socket.io的CORS与传输配置 #

Heroku的反向代理环境下，宽松的CORS设置（origin: "*"）可能导致WebSocket握手失败，同时需要明确指定传输协议优先级：
修改服务器端代码：

const io = require("socket.io")(server, {
    cors: {
        origin: "https://<your-react-app>.herokuapp.com", // 替换为实际前端域名，禁止使用通配符
        methods: ["GET", "POST"],
        credentials: true
    },
    transports: ["websocket", "polling"] // 优先使用WebSocket，降级为轮询
});

2. 调整前端Socket连接路径 #

如果你的Node.js服务器和React前端部署在同一个Heroku应用，使用相对路径代替硬编码的绝对URL，避免跨域和路径匹配问题：

const SOCKET_SERVER_URL = "/"; // 替换原有的绝对URL

socketRef.current = socketIOClient(SOCKET_SERVER_URL, {
    query: {roomId},
    transports: ["websocket", "polling"], // 与服务器配置保持一致
    withCredentials: true
});

3. 修复消息接收的发送者ID逻辑 #

当前前端将所有收到的消息标记为当前用户发送，这是错误的，应该从Socket推送的数据中获取发送者ID：

socketRef.current.on(NEW_CHAT_MESSAGE_EVENT, (message) => {
    const incomingMessage = {
        message: message.body,
        created_by: message.senderId, // 从消息数据中取发送者ID，而非本地存储
    };
    setMessages((prev) => [...prev, incomingMessage]);
});

4. 检查Heroku进程与日志 #

• 确保package.json的启动命令正确，同时启动Socket服务器和静态资源服务：

  "scripts": {
    "start": "node server.js",
    "build": "react-scripts build",
    "heroku-postbuild": "npm run build"
  }
  

  （本地开发可使用concurrently同时运行前端和Socket服务器，但Heroku仅需运行生产构建后的静态服务+Socket服务器）
• 查看Heroku日志排查错误：

  heroku logs --tail
  

  重点关注WebSocket连接失败、端口占用、CORS错误等日志信息。

5. 添加Socket重连逻辑 #

Heroku dyno可能会休眠或重启，添加重连监听确保连接恢复后自动加入房间：

useEffect(() => {
    // ... 现有连接代码

    socketRef.current.on("reconnect", () => {
        socketRef.current.join(roomId);
        console.log("Socket reconnected and rejoined room:", roomId);
    });

    socketRef.current.on("connect_error", (err) => {
        console.error("Socket connection error:", err);
    });

    // ... 清理函数
}, [roomId]);

内容的提问来源于stack exchange，提问作者user17817249