一个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()
相关推荐
止观止6 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
谢尔登6 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
G等你下课8 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登9 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
FogLetter10 小时前
深入浅出React-Router-Dom:从前端路由到SPA架构的华丽转身
前端·react.js
Dream耀10 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
码间舞11 小时前
你还在用useState保存表单数据?来看React 19是如何做的!【useActionState实战详解】
react.js
前端设计诗11 小时前
对React官网《Virtual DOM 及内核》注解:其实Virtual DOM 就藏在在代码行间
前端·react.js·前端框架
遂心_13 小时前
React初学者必备:用“状态管家”Reducer轻松管理复杂状态!
前端·javascript·react.js
FanetheDivine13 小时前
解决@ant-design/icons导致的样式异常
react.js·ant design