如何在前端显示 websocket 数据？

Question

我正在使用一个 React 应用程序，它以以下方式连接到 websocket。它使用 React Hooks 来存储数据流。它看起来像这样：

反应钩子：

const [socketStream, setSocketStream] = useState("");

WebSocket 连接：

const token = getToken();

setSocketStream(Registering socket');

const socket = io(`API`, {
    query: { token },
    transports: ['websocket'],
})

  socket.on('connect', () => {
    setSocketStream("connected")
  })

  let time = 1

 socket.on('data', (body) => {
      socket.emit('confirm', body.time)
      const data = body.data
      const error = data.error
      setSocketStream(`\nResponse #${time} from socket. Message: ${data || error}`);
      time++
      if (error) {
          console.log(`\nError from socket: ${error}`)
          socket.close()
      }
      if(data === 'Finished build')
          socket.close()
  })
}, 3000)

我想做的是在我的组件中显示数据流。比如：

<p>{socketStream}<p>

但是钩子没有更新值。有没有办法做到这一点？

提前致谢！

Answer 1

假设您确实从流中获取数据，您需要指定组件生命周期中的哪个时间点更新其状态，即

setSocketStream(Registering socket');

您需要使用 useEffect()（实现生命周期方法的函数式方法）挂钩来执行此操作，否则您的组件将继续呈现初始的空字符串值。