react ts如何使用websocket实现实时通讯

要在 React TypeScript 中实现实时通信，可以使用 WebSocket 技术。下面是一个简单的示例，展示了如何使用 WebSocket 实现实时通信：

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

function ChatRoom() {
  const [messages, setMessages] = useState<string[]>([]);
  const [newMessage, setNewMessage] = useState<string>('');

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

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

    socket.onmessage = (event) => {
      const message = event.data;
      setMessages((prevMessages) => [...prevMessages, message]);
    };

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

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

  const handleNewMessage = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setMessages((prevMessages) => [...prevMessages, newMessage]);
    const socket = new WebSocket('ws://localhost:8080');
    socket.send(newMessage);
    setNewMessage('');
  };

  return (
    <div>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
      <form onSubmit={handleNewMessage}>
        <input
          type="text"
          value={newMessage}
          onChange={(event) => setNewMessage(event.target.value)}
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

在上面的示例中，我们使用 `useState` 钩子来存储消息列表和输入框中的新消息。在 `useEffect` 钩子中，我们创建了一个 WebSocket 对象并通过 `onopen`、`onmessage` 和 `onclose` 方法来处理连接、接收消息和断开连接的事件。在 `handleNewMessage` 函数中，我们发送新消息到服务器并将其添加到消息列表中。最后，我们渲染了一个消息列表和一个输入框，使用户可以输入新消息并发送到服务器。