react ts websocket如何接收实时接收websocket消息

要在 React TypeScript 中实时接收 WebSocket 消息，可以通过 WebSocket 对象的 `onmessage` 事件来实现。该事件会在 WebSocket 接收到消息时触发。下面是一个示例代码：

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const socket = new WebSocket('ws://localhost:8080');

    socket.onopen = () => {
      console.log('WebSocket connected');
    };

    socket.onmessage = (event) => {
      const message = event.data;
      setMessage(message);
    };

    socket.onclose = () => {
      console.log('WebSocket disconnected');
    };

    return () => {
      socket.close();
    };
  }, []);

  return <div>Received message: {message}</div>;
}

在上面的示例中，我们创建了一个 WebSocket 对象并通过 `onopen`、`onmessage` 和 `onclose` 方法来处理连接、接收消息和断开连接的事件。在 `onmessage` 方法中，我们将接收到的消息存储到 `message` 状态中。最后，我们在组件中渲染了 `message` 变量的值。每当 WebSocket 接收到新消息时，React 组件会自动更新并重新渲染。