Socket.io跨React应用传递数据失败问题求助

我尝试通过WebSocket在customer（客户）和agent（代理）两个独立应用间共享数据，使用Socket.io实现数据传递。目前已实现从客户应用向Socket服务器发送数据，但无法将数据转发到代理应用。

最初代理端连接Socket服务器时出现CORS错误，添加代理URL后CORS问题解决，但仍无法接收数据。客户应用部署在example.com，代理应用部署在其子域名sd.example.com；前端使用React，Socket服务器基于NodeJS开发。

客户应用（运行在3000端口） #

import React, { useEffect, useState } from 'react';
import { io } from 'socket.io-client';

function App() {
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    setSocket(io("http://localhost:5000"))
  }, []);

  const handleClick = () => {
    socket.emit("user", {
      name: "Souvik Banerjee"
    })
  }

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  )
}

export default App

Socket服务器（运行在5000端口） #

import { createServer } from "http";
import { Server } from "socket.io";

const httpServer = createServer();
const io = new Server(httpServer, {
    cors: {
        origin: ['http://localhost:3000', 'http://localhost:3001']
    }
});

io.on("connection", (socket) => {
    socket.on("user", (user) => {
        // this console log is getting printed
        console.log('user', user);

        socket.emit('newUser', {
            user,
            socketId: socket.id
        })
    })
});

httpServer.listen(5000, () => {
    console.log('5000')
});

代理应用（运行在3001端口） #

import React, { useEffect, useState } from 'react';
import { io } from 'socket.io-client';

function App() {
  const [socket, setSocket] = useState(null);
  const [user, setUser] = useState('')

  useEffect(() => {
    setSocket(io("http://localhost:5000"))
  }, []);

  useEffect(() => {
    socket?.on("newUser", (data) => {
      console.log('data', data);
      setUser(data);
    })
  }, [socket]);

  return (
    <div>
      Hello, {user.name || 'anonymous'}!
    </div>
  )
}

export default App

问题核心在于Socket服务器的消息推送逻辑：当前代码中socket.emit('newUser', ...)仅会将消息发送给触发user事件的客户端（即客户应用本身），代理应用作为独立连接的客户端无法接收。以下是两种可行的修复方案：

方案一：广播给所有其他客户端 #

如果需要将消息推送给所有已连接的客户端（除了发送消息的客户应用），修改服务器端的user事件处理代码：

socket.on("user", (user) => {
    console.log('user', user);
    // 广播给所有除发送者外的客户端
    socket.broadcast.emit('newUser', {
        user,
        socketId: socket.id
    })
});

方案二：使用房间实现精准推送（推荐） #

如果后续需要更精细化的消息路由（比如指定客户对应特定代理），可以利用Socket.io的房间功能：

1. 服务器端：添加房间逻辑，让代理应用连接后加入指定房间，客户发送消息时向该房间推送：

io.on("connection", (socket) => {
    // 代理连接后加入专属房间
    socket.on("join_agent_room", () => {
        socket.join("agent_room");
        console.log("代理已加入房间");
    });

    socket.on("user", (user) => {
        console.log('user', user);
        // 向代理房间内的所有客户端发送消息
        io.to("agent_room").emit('newUser', {
            user,
            socketId: socket.id
        })
    })
});

2. 代理应用端：连接成功后发送加入房间的事件：

useEffect(() => {
    const newSocket = io("http://localhost:5000");
    setSocket(newSocket);
    // 连接后加入代理房间
    newSocket.emit("join_agent_room");
}, []);

生产环境部署注意事项 #

部署到example.com和sd.example.com时，需要更新CORS配置为实际域名：

cors: {
    origin: ['https://example.com', 'https://sd.example.com'],
    credentials: true // 若需携带凭证（如Cookie），开启此选项
}

同时客户端的Socket连接地址需替换为服务器的实际域名，例如io("https://your-socket-server-domain.com")。

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