基于 Vite、React 和 TypeScript 的聊天室示例

好的，以下是基于 Vite、React 和 TypeScript 的聊天室示例代码：

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

const ChatRoom = () => {
  const [name, setName] = useState(''); // 用户名
  const [message, setMessage] = useState(''); // 发送的消息
  const [messages, setMessages] = useState<Array<{ name: string; message: string }>>([]); // 聊天记录
  const socket = io('http://localhost:4000'); // 连接 Socket.IO 服务器

  useEffect(() => {
    // 监听服务器发来的消息
    socket.on('message', (data: { name: string; message: string }) => {
      setMessages((prevMessages) => [...prevMessages, data]);
    });
  }, []);

  const sendMessage = () => {
    // 发送消息给服务器
    socket.emit('message', { name, message });
    setMessage('');
  };

  return (
    <div>
      <input type="text" value={