React+Socket.io消息无法广播至所有连接设备，请求排查错误

使用React和Socket.IO开发消息广播功能时，当前仅发起请求的客户端能接收消息，其他已连接设备无法收到。相关代码如下：

App.js

import { useRef } from "react";
import { io } from "socket.io-client";
const socket = io("http://localhost:4000");

const App = () => {
  const messege = useRef(null);
  //socket functions
  socket.on("connect", () => {
    console.log("connected: " + socket.id);
  });
  socket.on("recieve", (msg) => {
    console.log(msg);
  });

  const send = () => {
    const message = messege.current.value;
    socket.emit("message", message);
  };

  return (
    <div>
      <input type="text" placeholder="Message" ref={messege} />
      <button onClick={send}>Send</button>
    </div>
  );
};

export default App;

Server.js

const { Server } = require("socket.io");

const io = new Server(4000, {
  cors: {
    origin: ["http://localhost:5173"],
  },
});

io.on("connection", (socket) => {
  console.log(`connected with id: ${socket.id}`);
  socket.on("message", (msg) => {
    console.log(msg);
    socket.emit("recieve", msg);
  });
});

错误原因 #

服务器端处理message事件时，使用了socket.emit("recieve", msg)——这个方法只会将消息发送回当前触发事件的客户端（也就是发消息的那个客户端），并不会广播给其他已连接的客户端。

解决方案 #

根据需求选择以下两种广播方式之一：

• 如果需要给除发件人之外的所有客户端发消息：使用socket.broadcast.emit()
• 如果需要给包括发件人在内的所有客户端发消息：使用io.emit()

修正后的Server.js代码 #

const { Server } = require("socket.io");

const io = new Server(4000, {
  cors: {
    origin: ["http://localhost:5173"],
  },
});

io.on("connection", (socket) => {
  console.log(`connected with id: ${socket.id}`);
  socket.on("message", (msg) => {
    console.log(msg);
    // 方式1：广播给除发件人外的所有客户端
    // socket.broadcast.emit("recieve", msg);
    
    // 方式2：广播给所有客户端（包括发件人）
    io.emit("recieve", msg);
  });
});

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