最近项目需要封装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, // 是否销毁