JavaScript 中 WebSocket 怎么在 React 里面封装自定义 Hook-js教程-PHP中文网

react 中用自定义 hook 封装 websocket 的核心是抽离连接管理、消息收发、重连逻辑和生命周期同步，通过 useref 保存实例、usestate 管理状态、useeffect 处理连接与自动清理，并建议加入退避重连、心跳保活和错误处理。

javascript 中 websocket 怎么在 react 里面封装自定义 hook

在 React 中用自定义 Hook 封装 WebSocket，核心是把连接管理、消息收发、重连逻辑和生命周期同步（如组件卸载时自动关闭）抽离出来，让组件只关注业务数据。下面是一个实用、健壮、可复用的 useWebSocket 自定义 Hook 实现思路和关键细节。

封装要点：状态管理 + 自动清理 + 重连控制

一个生产可用的 Hook 需要解决几个实际问题：连接状态（connecting / open / closed / error）、消息接收与广播、发送消息能力、组件卸载时安全关闭、断线后可控重连。不建议直接在组件里 new WebSocket，容易引发内存泄漏或重复连接。

用 useRef 保存 WebSocket 实例，避免因重渲染导致重复创建或闭包中引用过期
用 useState 管理连接状态和最新消息，触发 UI 更新
在 useEffect 中建立连接，并返回清理函数（ws.close()），确保组件卸载时释放资源
重连逻辑建议加退避策略（如指数退避），并限制最大重试次数，避免疯狂请求

基础版 Hook：支持连接、收发、自动关闭

以下是一个轻量但完整的实现（无重连，适合简单场景）：

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

function useWebSocket(url) {
  const ws = useRef(null);
  const [readyState, setReadyState] = useState(WebSocket.CONNECTING);
  const [message, setMessage] = useState(null);

  const connect = useCallback(() => {
    if (ws.current && ws.current.readyState === WebSocket.OPEN) return;

    ws.current = new WebSocket(url);

    ws.current.onopen = () => setReadyState(WebSocket.OPEN);
    ws.current.onmessage = (event) => setMessage(JSON.parse(event.data));
    ws.current.onclose = () => setReadyState(WebSocket.CLOSED);
    ws.current.onerror = () => setReadyState(WebSocket.CLOSED);
  }, [url]);

  const sendMessage = useCallback((data) => {
    if (ws.current?.readyState === WebSocket.OPEN) {
      ws.current.send(typeof data === 'string' ? data : JSON.stringify(data));
    }
  }, []);

  useEffect(() => {
    connect();

    return () => {
      if (ws.current) {
        ws.current.close();
      }
    };
  }, [connect]);

  return { readyState, message, sendMessage, connect };
}

使用示例：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function ChatRoom() {
  const { readyState, message, sendMessage } = useWebSocket('wss://echo.websocket.org');

  useEffect(() => {
    if (message?.text) {
      console.log('收到消息:', message.text);
    }
  }, [message]);

  const handleSubmit = (e) => {
    e.preventDefault();
    sendMessage({ text: 'Hello from React!' });
  };

  return (
    <div>
      <p>状态: {['CONNECTING', 'OPEN', 'CLOSING', 'CLOSED'][readyState]}</p>
      <button onclick="{handleSubmit}">发送</button>
    </div>
  );
}

进阶版：支持手动重连、错误回调、心跳保活

真实项目中建议增强三点：

暴露 reconnect() 方法，允许用户主动重试（比如点击“重连”按钮）
提供 onError 回调，方便统一上报错误日志
加入心跳机制（定时 send ping 或接收 pong），防止中间代理（如 Nginx）超时断连

心跳示例片段（加在 onopen 后）：

let pingTimer;
ws.current.onopen = () => {
  setReadyState(WebSocket.OPEN);
  // 每 30 秒发一次 ping
  pingTimer = setInterval(() => {
    if (ws.current?.readyState === WebSocket.OPEN) {
      ws.current.send(JSON.stringify({ type: 'ping' }));
    }
  }, 30000);
};

ws.current.onclose = ws.current.onerror = () => {
  clearInterval(pingTimer);
  setReadyState(WebSocket.CLOSED);
};