用react写一个web socket的demo

好的，以下是使用React编写WebSocket的简单示例代码：

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const SOCKET_URL = 'http://localhost:3000';

function WebSocketDemo() {
  const [socket, setSocket] = useState(null);
  const [message, setMessage] = useState('');

  useEffect(() => {
    const socket = io(SOCKET_URL);
    setSocket(socket);

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

  const handleSendMessage = () => {
    if (socket) {
      socket.emit('message', message);
      setMessage('');
    }
  };

  return (
    <div>
      <h1>WebSocket Demo</h1>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={handleSendMessage}>Send</button>
    </div>
  );
}

export default WebSocketDemo;

在这个示例中，我们使用了 `socket.io-client` 库来连接到 WebSocket 服务器，并在组件中保存了一个 `socket` 状态。我们在组件挂载时创建了一个新的 WebSocket 连接，并将其设置为 `socket` 状态的值。当组件卸载时，我们会断开连接。

我们还定义了一个 `message` 状态，用于保存用户在输入框中输入的消息。当用户点击“发送”按钮时，我们会使用 `socket.emit` 方法将消息发送到服务器，并将 `message` 状态重置为空字符串。

请注意，此示例只是一个简单的示例，它只能向服务器发送消息，无法接收来自服务器的消息。如果您需要接收服务器发送的消息，请使用 `socket.on` 方法监听 `message` 事件，并在事件处理程序中更新组件状态。