基于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;
相关推荐
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
bdawn6 小时前
深度集成DeepSeek大模型:WebSocket流式聊天实现
python·websocket·openai·api·实时聊天·deepseek大模型·流式输出
lonelyhiker7 小时前
javascript的原型链
开发语言·javascript·原型模式
MarkHD8 小时前
第十六天 HarmonyOS WebView开发实战:从加载网页到与JavaScript交互
javascript·交互·harmonyos
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
bin91539 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek