客户端函数内调用Socket.io emit失效问题求助

问题描述 #

使用Socket.IO时，连接已成功建立，但客户端的emit方法仅在函数外部或connection回调内部时有效。点击按钮触发func函数执行时，其中的emit语句无法生效，只有将emit放在函数外才能正常工作。

客户端代码 #

const socket = io("http://localhost:3001")
const func = () => {
  socket.emit("send_message", "hello")
}

<button onClick={func}>SEND</button>

服务端代码 #

const { createServer } = require('http')
const { Server } = require('socket.io')
const httpServer = createServer();

const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:3000/chat",
  },
  methods: ["GET", "POST"]
});

io.on("connection", (socket) => {
  socket.on("send_message", (...args) => {
    console.log(args)
  });
})

httpServer.listen(3001, () => {
  console.log("server is running");
});

问题原因与解决 #

排查后确认是CORS配置错误：服务端CORS的origin设置为"http://localhost:3000/chat"，但Socket.IO的CORS校验会严格匹配请求的源域名（不包含路径），客户端实际源是http://localhost:3000，导致后续emit的请求被浏览器的CORS策略拦截。

将服务端的CORS origin改为"*"（开发环境临时使用，方便调试），或者精确设置为客户端实际的域名（生产环境推荐），即可解决emit失效的问题。

修改后的服务端CORS配置示例：

const io = new Server(httpServer, {
  cors: {
    origin: "*", // 开发环境用，生产建议替换为具体域名如"http://localhost:3000"
    methods: ["GET", "POST"]
  },
});

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