WHAT - useWebSocket 推荐

在 WHAT - 学习 WebSocket 实时 Web 开发 中我们知道：

推荐前端封装 WebSocket hook：如 useWebSocket Hook 在 React 项目中使用。

useWebSocket 是一个在 React 项目中封装 WebSocket 连接的 Hook，让 WebSocket 的使用更符合 React 的思维方式（组件化、响应式）。

---

什么是 useWebSocket？

它是一种自定义 Hook，可以：

• 管理连接状态（连接中、已连接、已断开）
• 发送和接收消息
• 支持自动重连、心跳机制
• 在 React 生命周期内自动清理连接

---

常用库推荐

名称	特点
react-use-websocket	功能全面、使用简单、支持重连、心跳、发送 JSON
自定义 useWebSocket	可根据自己项目封装，灵活控制逻辑

---

示例：使用 react-use-websocket

1. 安装依赖

npm install react-use-websocket

2. 基本使用示例

import useWebSocket, { ReadyState } from 'react-use-websocket';

const Chat = () => {
  const { sendMessage, lastMessage, readyState } = useWebSocket('ws://localhost:3000', {
    onOpen: () => console.log('WebSocket connected!'),
    onClose: () => console.log('WebSocket disconnected!'),
    shouldReconnect: () => true, // 自动重连
  });

  const connectionStatus = {
    [ReadyState.CONNECTING]: '连接中',
    [ReadyState.OPEN]: '已连接',
    [ReadyState.CLOSING]: '正在关闭',
    [ReadyState.CLOSED]: '已关闭',
    [ReadyState.UNINSTANTIATED]: '未初始化',
  }[readyState];

  return (
    <div>
      <p>连接状态：{connectionStatus}</p>
      <button onClick={() => sendMessage('你好 WebSocket!')}>发送消息</button>
      <p>收到消息：{lastMessage?.data}</p>
    </div>
  );
};

---

如果你想自定义 useWebSocket Hook

你也可以手动封装一个简化版的：

import { useEffect, useRef, useState } from 'react';

export function useWebSocket(url: string) {
  const ws = useRef<WebSocket | null>(null);
  const [messages, setMessages] = useState<string[]>([]);

  useEffect(() => {
    ws.current = new WebSocket(url);

    ws.current.onmessage = (e) => {
      setMessages((prev) => [...prev, e.data]);
    };

    return () => {
      ws.current?.close();
    };
  }, [url]);

  const sendMessage = (msg: string) => {
    ws.current?.send(msg);
  };

  return { messages, sendMessage };
}

---

适合的使用场景

• 聊天室
• 实时通知（如订单、评论等）
• 实时数据流（如行情、图表、监控）
• 游戏状态同步