一个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()
相关推荐
伍哥的传说3 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
前端小盆友9 小时前
从零实现一个GPT 【React + Express】--- 【3】解析markdown,处理模型记忆
gpt·react.js
Cacciatore->11 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~11 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
贵沫末11 小时前
React——基础
前端·react.js·前端框架
爱学习的茄子11 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
10年前端老司机12 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
sophie旭12 小时前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读
轻语呢喃12 小时前
React智能前端:从零开始写的图片分析页面实战
前端·react.js·aigc