一个WebSocket的自定义hook

一个WebSocket的自定义hook

自己封装了一个WebSocket的hook,代码如下:

typescript 复制代码
import { useEffect, useContext } from "react";
import { AppContext } from "../../App";
import useSocketHandle from "./useSocketHandle";

const WS_URL = 'wss://xxx' // 服务地址

const useSocket = () => {

    const socketRef = useRef<WebSocket>()

    let heartTimer = 0; // 心跳定时器 ID

    const heartCheck = (socket: WebSocket) => { // 心跳检查
        clearInterval(heartTimer); // 先清除之前的定时器

        heartTimer = setInterval(() => {
            socket.send('xxx'); // 约定好的心跳
        }, 30000);
    }

    const createSocket = () => { // socket创建

        if (socketRef.current) return;

        const socket = new WebSocket(`${WS_URL}`) // 信令服务器连接
        socket.onopen = () => { // 连接建立
            console.log("[ws open] 连接已建立");
            heartCheck(socket);// 心跳处理
        };

        socket.onmessage = async (event) => { // 接收到服务器的信息
          console.log(event)
        };

        socket.onclose = () => { // 连接关闭
            console.log('[ws close] 连接中断');
            socketRef.current = undefined
            clearInterval(heartTimer); // 清除定时器
        };

        socket.onerror = (error) => { // 连接错误
            console.log(`[error] 连接错误 `, error);
        };

        return socket;
    }

    useEffect(() => { // 监听房间
        socketRef.current = createSocket();
        // 关闭socket的方法
      	// socketRef.current.close();
    }, [])

    return socketRef; // 如果不需要的话不返回也是可以的
}

export default useSocket

使用方法如下:

typescript 复制代码
const socketRef = useSocket()
相关推荐
whyfail2 小时前
React v19.2版本
前端·javascript·react.js
慧慧吖@2 小时前
react基础
前端·javascript·react.js
浪裡遊3 小时前
MUI组件库与主题系统全面指南
开发语言·前端·javascript·vue.js·react.js·前端框架·node.js
m0_611779966 小时前
MQTT和WebSocket的差别
网络·websocket·网络协议
浪裡遊6 小时前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript
paopaokaka_luck6 小时前
基于SpringBoot+Vue的数码交流管理系统(AI问答、协同过滤算法、websocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·websocket·echarts
爱吃芒果的蘑菇21 小时前
C++之WebSocket初体验
网络·c++·websocket·网络协议
刺客_Andy1 天前
React 第四十六节 Router中useInRouterContext的使用详细介绍及注意事项
前端·javascript·react.js
刺客_Andy1 天前
React 第四十四节Router中 usefetcher的使用详解及注意事项
前端·javascript·react.js
刺客_Andy1 天前
React 第四十五节 Router 中 useHref() Hook的使用详解及注意事项
前端·javascript·react.js