基于 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={name} onChange={(e) => setName(e.target.value)} placeholder="请输入用户名" />
      <br />
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="请输入消息" />
      <br />
      <button onClick={sendMessage}>发送</button>
      <hr />
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>
            {msg.name}: {msg.message}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ChatRoom;

在上述代码中，我们使用 useState 钩子来定义了 name、message 和 messages 这三个状态，分别表示用户名、发送的消息和聊天记录。我们也使用了 useEffect 钩子来监听从服务器发来的消息，当收到消息时将其添加到聊天记录中。

我们还定义了 sendMessage 函数来发送消息给服务器，当用户点击发送按钮时，调用该函数将消息和用户名发送给服务器，清空消息输入框中的内容。

最后，我们在组件中使用了 socket.io-client 库来连接 Socket.IO 服务器，将其实例保存在 socket 变量中，并在组件渲染时渲染出输入框、发送按钮和聊天记录等 UI 元素。

需要注意的是，在上述代码中，我们在 useEffect 钩子中依赖了一个空数组，这表示我们只希望在组件挂载时执行一次监听操作，而不是每次状态更新时都执行。这是一个常用的优化技巧，可以减少不必要的操作，提高组件渲染性能。

好的，以下是基于 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={name} onChange={(e) => setName(e.target.value)} placeholder="请输入用户名" />
      <br />
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="请输入消息" />
      <br />
      <button onClick={sendMessage}>发送</button>
      <hr />
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>
            {msg.name}: {msg.message}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ChatRoom;

在上述代码中，我们使用 useState 钩子来定义了 name、message 和 messages 这三个状态，分别表示用户名、发送的消息和聊天记录。我们也使用了 useEffect 钩子来监听从服务器发来的消息，当收到消息时将其添加到聊天记录中。

我们还定义了 sendMessage 函数来发送消息给服务器，当用户点击发送按钮时，调用该函数将消息和用户名发送给服务器，清空消息输入框中的内容。

最后，我们在组件中使用了 socket.io-client 库来连接 Socket.IO 服务器，将其实例保存在 socket 变量中，并在组件渲染时渲染出输入框、发送按钮和聊天记录等 UI 元素。

需要注意的是，在上述代码中，我们在 useEffect 钩子中依赖了一个空数组，这表示我们只希望在组件挂载时执行一次监听操作，而不是每次状态更新时都执行。这是一个常用的优化技巧，可以减少不必要的操作，提高组件渲染性能。