如何使用 React 客户端从 Socket.io 服务器接收消息？答案

【问题标题】：How to use React client to receive a message from a Socket.io server?如何使用 React 客户端从 Socket.io 服务器接收消息？
【发布时间】：2021-12-31 01:22:42
【问题描述】：

我正在使用服务器（Node.js 和 Socket.io）在客户端（React）之间发送消息。我可以从客户端 1 向客户端 2 发送消息，但是第二个客户端要能够在屏幕上可视化消息，它必须单击一个按钮。我想要实现的是让客户端 2 能够直接在客户端 1 将消息发送到服务器并且服务器发出它时，自动可视化客户端 1 发送的消息，而无需单击任何按钮。就像拥有一个永久工作的侦听器一样，每次服务器发送“socket.emit（“send_message”，message）”时都在寻找。问题是在 React 客户端上，我的函数 "socket.on("send_message",...)" 在 useEffect 中，只有在我单击按钮时才有效。

任何帮助或参考都会很棒，谢谢。

【问题讨论】：

标签： javascript node.js reactjs socket.io

【解决方案1】：

我不确定这是否正确，但它对我有用。

假设套接字已设置为连接到某个 url，

let [socket, setSocket] = useState(null)
useEffect(() => setSocket(io(socket_connect_url), [])

然后你可以像这样设置一个钩子来检测事件“someEvent”，

  useEffect(() => {
    if(!socket) return;
    socket.on('someEvent', (recv) =>{
        try{
            // Process recv message here
            console.log(recv);
        }catch(err){
            console.log(err)
        }
    }, [socket])
  })

【讨论】：