如何在react + socket io应用程序中显示聊天

npm install react-socket-io socket.io-client

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

function ChatApp() {
  const [messages, setMessages] = useState([]);
  
  // 用于接收新消息的回调函数
  const handleMessage = (message) => {
    setMessages((prevMessages) => [...prevMessages, message]);
  };
  
  useEffect(() => {
    // 连接到Socket.io服务器
    const socket = io('http://your-socket-io-server.com');
    
    // 监听服务器发送的"chat message"事件
    socket.on('chat message', handleMessage);
    
    // 在组件卸载时断开与服务器的连接
    return () => {
      socket.disconnect();
    };
  }, []);
  
  return (
    <div>
      {/* 显示聊天消息 */}
      {messages.map((message, index) => (
        <div key={index}>{message}</div>
      ))}
      
      {/* 在这里添加发送消息的表单 */}
    </div>
  );
}

function ChatApp() {
  // ...

  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    
    // 发送输入的消息到服务器
    socket.emit('chat message', inputValue);
    
    // 清空输入框
    setInputValue('');
  };

  return (
    <div>
      {/* 显示聊天消息 */}
      {/* ... */}
      
      {/* 发送消息的表单 */}
      <form onSubmit={handleSubmit}>
        <input 
          type="text"
          value={inputValue}
          onChange={(event) => setInputValue(event.target.value)}
        />
        <button type="submit">发送</button>
      </form>
    </div>
  );
}