从套接字反应连续接收数据

Question

我目前正在使用此代码从套接字接收数据代码：

 socket.on('send_image', (message) => {
        setImage(message.image)
        console.log(message)
      })

服务器不断发送数据（来自摄像头的图像）。如何在不刷新的情况下接收？我尝试了一种每毫秒请求一次数据的方法。不知道这个方法好不好

请求每毫秒代码：

 useEffect(() => {
    const id = setInterval(() => {

      socket.on('send_image', (message) => {
        setImage(message.image)
        console.log(message)
      })
      
    }, 10);
    return () => clearInterval(id);
  }, []);

有没有其他方法可以持续从套接字接收数据？

Answer 1

要在收到 send_image 消息后立即更新本地状态，只需在 useEffect 中注册处理程序即可。

useEffect(() => {
  const handler = (message) => {
    setImage(message.image);
    console.log(message);
  };
  socket.on("send_image", handler);
  return () => socket.off("send_image", handler); // assuming `.off` deregisters a callback
}, []);

从套接字反应连续接收数据

Receive data continuously from socket react

javascript

sockets

reactjs