0Pricing
React Academy · 课时

构建实时聊天组件

使用 WebSocket 事件和 React 状态，在可滚动的聊天列表中显示实时消息。

构建实时聊天组件 是 CoddyKit 上的免费 React Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

聊天组件架构

实时聊天包含三个部分：消息列表（显示消息）、消息输入框（发送消息）以及 WebSocket/Socket.IO 连接层。请将套接字逻辑保存在自定义钩子中。

消息数据结构

为聊天消息定义 TypeScript 接口，以确保组件始终具有类型安全性。

interface Message {
  id: string;
  text: string;
  sender: string;
  timestamp: number;
}

const [messages, setMessages] = useState<Message[]>([]);

useChat 钩子

将连接、消息状态和发送函数封装到一个钩子中。

function useChat(roomId: string) {
  const [messages, setMessages] = useState<Message[]>([]);

  useEffect(() => {
    socket.connect();
    socket.emit('join-room', roomId);
    socket.on('message', (msg: Message) => setMessages(m => [...m, msg]));
    return () => {
      socket.off('message');
      socket.emit('leave-room', roomId);
      socket.disconnect();
    };
  }, [roomId]);

  const sendMessage = useCallback((text: string) => {
    const msg: Message = { id: crypto.randomUUID(), text, sender: 'me', timestamp: Date.now() };
    socket.emit('message', msg);
  }, []);

  return { messages, sendMessage };
}

消息列表组件

在可滚动列表中渲染消息。在底部哨兵元素上使用 useRef，并在新消息到达时滚动到该元素。

function MessageList({ messages }: { messages: Message[] }) {
  const bottomRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  return (
    <div className="message-list">
      {messages.map(msg => (
        <div key={msg.id} className={`msg ${msg.sender === 'me' ? 'mine' : 'theirs'}`}>
          <span>{msg.sender}</span>
          <p>{msg.text}</p>
        </div>
      ))}
      <div ref={bottomRef} />
    </div>
  );
}

消息输入组件

这是一个受控输入框，在按下 Enter 或点击按钮时发送消息。发送后清空输入框。

function MessageInput({ onSend }: { onSend: (text: string) => void }) {
  const [text, setText] = useState('');

  const handleSend = () => {
    if (!text.trim()) return;
    onSend(text.trim());
    setText('');
  };

  return (
    <div className="input-row">
      <input
        value={text}
        onChange={e => setText(e.target.value)}
        onKeyDown={e => e.key === 'Enter' && handleSend()}
        placeholder="Type a message..."
      />
      <button onClick={handleSend}>Send</button>
    </div>
  );
}

组装聊天界面

将钩子和子组件组合成一个 ChatRoom 组件。

function ChatRoom({ roomId }: { roomId: string }) {
  const { messages, sendMessage } = useChat(roomId);

  return (
    <div className="chat-room">
      <h2>Room: {roomId}</h2>
      <MessageList messages={messages} />
      <MessageInput onSend={sendMessage} />
    </div>
  );
}

乐观更新

在服务器确认前立即将消息添加到本地状态，从而提供即时反馈。如果服务器返回错误，则进行校正或移除该消息。

const sendMessage = useCallback((text: string) => {
  const optimistic: Message = { id: crypto.randomUUID(), text, sender: 'me', timestamp: Date.now() };
  setMessages(m => [...m, optimistic]); // instant feedback
  socket.emit('message', optimistic, (err) => {
    if (err) setMessages(m => m.filter(msg => msg.id !== optimistic.id));
  });
}, []);

正在输入指示器

在输入内容变化时（经过防抖）触发 typing 事件，并监听其他人的输入事件以显示指示器。

const emitTyping = useMemo(() => debounce(() => socket.emit('typing'), 300), []);

useEffect(() => {
  socket.on('user-typing', (user) => setTypingUser(user));
  return () => socket.off('user-typing');
}, []);

消息时间戳

使用 Intl.DateTimeFormat 格式化时间戳，以根据地区设置进行显示。

function formatTime(ts: number) {
  return new Intl.DateTimeFormat('en', { hour: '2-digit', minute: '2-digit' }).format(ts);
}

<span className="timestamp">{formatTime(msg.timestamp)}</span>

已读回执

用户查看消息时触发 read 事件，并监听服务器发来的已读确认，以显示对勾。

虚拟化消息列表

对于较长的聊天记录，请使用 react-window 或 react-virtual 将消息列表虚拟化，只渲染可见行。

限制消息历史记录

限制状态中的消息数组大小，以防止长时间会话中的内存无限增长。

socket.on('message', (msg: Message) => {
  setMessages(prev => [...prev.slice(-499), msg]); // keep last 500
});

快速检查

聊天列表收到新消息时，滚动到底部哨兵 div 的目的是什么？

要点回顾

使用封装套接字逻辑的 useChat 钩子、具有自动滚动功能的 MessageList，以及发送后会清空内容的 MessageInput，构建实时聊天。使用乐观更新提供即时反馈，并限制消息历史记录以避免内存泄漏。

常见问题解答

「构建实时聊天组件」课时是免费的吗？

是的 — 「构建实时聊天组件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「构建实时聊天组件」这节课中我会学到什么？

使用 WebSocket 事件和 React 状态，在可滚动的聊天列表中显示实时消息。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「构建实时聊天组件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 浏览器中的 WebSocket 基础
  2. 在 React 中使用 Socket.IO
  3. 构建实时聊天组件
  4. 重连、错误处理与清理
← 返回 React Academy