首页 前端知识 TS 封装 webSocket

TS 封装 webSocket

2024-08-22 23:08:55 前端知识 前端哥 992 910 我要收藏

最近项目需要封装webSocket,第一次了解webSocket结合网上案列,改编一下封装成自己想要的

功能

1.心跳;
2.接口回调消息 =》onSendDataJson;
3. 订阅回调消息=》发送windows事件;

代码

import {
    Buffer} from 'buffer';


let baseURL  = 'ws://192.168.1.3600:9693'
let fileURL  = ' ';
/**
 * 设置心跳
 */
export class Heart {
   
    heartTimeOut!: number // 心跳计时器
    ServerHeartTimeOut!: number // 心跳计时器
    timeout = 5000
    // 重置
    reset(): void {
   
      clearTimeout(this.heartTimeOut)
      clearTimeout(this.ServerHeartTimeOut)
    }

    /**
     * 启动心跳
     * @param {Function} cb 回调函数
     */
    start(cb: Callback): void {
   
      this.heartTimeOut = setTimeout((e: Event) => {
   
        cb(e)
        this.ServerHeartTimeOut = setTimeout((e: Event) => {
   
          cb(e)
          // 重新开始检测
          this.reset()
          this.start(cb)
        }, this.timeout)
      }, this.timeout)
    }
}
export type Callback = (e: Event) => void
export type MessageCallback<RT> = (e: RT) => void

interface Ioptions {
   
    url: string | null // 链接的通道的地址
    heartTime?: number // 心跳时间间隔
    heartMsg?: string // 心跳信息,默认为'ping'
    isReconnect?: boolean // 是否自动重连
    isRestory?: boolean // 是否销毁
    reconnectTime?: number // 重连时间间隔
    reconnectCount?: number // 重连次数 -1 则不限制
}

export default class Socket extends Heart  {
   
    ws!: WebSocket;
    isCreate:boolean =false //  判断是否创建连接
    reconnectTimer = 0 // 重连计时器
    reconnectCount = 10 // 变量保存,防止丢失
    options: Ioptions = {
   
        url: baseURL , // 链接的通道的地址
        heartTime: 5000, // 心跳时间间隔
        heartMsg: 'ping', // 心跳信息,默认为'ping'
        isReconnect: true, // 是否自动重连
        isRestory: false, // 是否销毁
        
转载请注明出处或者链接地址:https://www.qianduange.cn//article/16544.html
评论
发布的文章

【Jquery】jquery的简单使用

2024-09-01 00:09:11

NodeJs使用jQuery中$Ajax

2024-09-01 00:09:45

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!