基于React通用的 WebSocket 钩子 useWebSocket

useWebSocket 钩子封装:

javascript 复制代码
import { useEffect, useRef, useState, useCallback } from 'react';

const useWebSocket = (url: string) => {
  const wsRef = useRef<WebSocket | null>(null); // 用来存储 WebSocket 实例
  const [isConnected, setIsConnected] = useState(false);
  const [lastMessage, setLastMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  // 初始化 WebSocket 连接
  useEffect(() => {
    if (!url) return;

    wsRef.current = new WebSocket(url);

    wsRef.current.onopen = () => {
      console.log(`WebSocket connected to ${url}`);
      setIsConnected(true);
    };

    wsRef.current.onmessage = (event) => {
      setLastMessage(event.data);
    };

    wsRef.current.onerror = (err) => {
      console.error(`WebSocket error on ${url}`, err);
      setError(`Error: ${err}`);
    };

    wsRef.current.onclose = () => {
      console.log(`WebSocket disconnected from ${url}`);
      setIsConnected(false);
    };

    // 组件卸载时,关闭 WebSocket 连接
    return () => {
      wsRef.current?.close();
      wsRef.current = null;
    };
  }, [url]);

  // 发送消息的函数
  const sendMessage = useCallback((message: string) => {
    if (wsRef.current?.readyState === WebSocket.OPEN) {
      wsRef.current.send(message);
    } else {
      console.warn(`WebSocket is not open. Unable to send message: ${message}`);
    }
  }, []);

  return {
    isConnected,
    lastMessage,
    sendMessage,
    error,
  };
};

export default useWebSocket;

使用示例:

你可以通过 useWebSocket 钩子在组件中使用 WebSocket 功能,轻松地连接、接收消息和发送消息。

javascript 复制代码
import React, { useEffect } from 'react';
import useWebSocket from './useWebSocket';

const WebSocketComponent = () => {
  const { isConnected, lastMessage, sendMessage, error } = useWebSocket('ws://example.com/first');

  useEffect(() => {
    // WebSocket 连接后发送一条消息
    if (isConnected) {
      sendMessage('Hello, WebSocket!');
    }
  }, [isConnected, sendMessage]);

  // 每次 lastMessage 更新时,打印接收到的数据
  useEffect(() => {
    if (lastMessage) {
      console.log('Received message:', lastMessage);
    }
  }, [lastMessage]);

  return (
    <div>
      <h1>WebSocket 实时数据</h1>
      <p>连接状态: {isConnected ? '已连接' : '未连接'}</p>
      <p>最近消息: {lastMessage || '暂未收到消息'}</p>
      {error && <p>错误: {error}</p>}
      <button onClick={() => sendMessage('Another message')}>发送消息</button>
    </div>
  );
};

export default WebSocketComponent;
相关推荐
南玖i32 分钟前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
YAY_tyy37 分钟前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_4 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
bitbitDown5 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy5 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip6 小时前
实现AI对话光标跟随效果
前端·javascript
闭着眼睛学算法7 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴8 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.8 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰8 小时前
vue核心原理实现
前端·javascript·vue.js