websocket连接封装

websocket连接封装

动机

原来在做数据大屏的时候接触过相关概念，但由于当时定的方案是轮询接口，所以没有深入去探索实现方式。最近花了时间去研究了一下，顺便掌握一个新技能。既然研究了，那就得有产出，然后自己尝试用ts封装了一个集成心跳、重连、通讯的websocket工具类。

简介

WebSocket是一种在单个TCP连接上进行全双工通信的协议。
使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

代码

封装类

class createWebsocket {
    // websocket 实例
    ws: WebSocket | null
    // websocket 地址
    url: string
    // 连接成功发送内容
    sendContent: any
    // 成功回调
    success: (e: any) => {}
    // 失败回调
    fail: (e: any) => {}
    // 重连时间间隔
    again: number
    // 重连定时器
    againTimer: any
    // 心跳连接计时器
    heartbeatTimer: any
    // 心跳间隔
    heartbeat: number
    // 心跳发送内容
    heartbeatContent: any
    
    constructor(params:IWSParams){
        // 实例
        this.ws = null
        // 地址
        this.url = params.url
        // 成功回调
        this.success = params.success
        // 失败回调
        this.fail = params.fail
        // 心跳相关计时器、间隔、内容
        this.heartbeatTimer = null
        this.heartbeat = params.heartbeat || 0
        this.heartbeatContent = params.heartbeatContent
        // 重连相关间隔、定时器
        this.again = params.again || 2000
        this.againTimer = null
        // 连接成功发送内容
        this.sendContent = params.sendContent

        // websocket初始化
        this.init()
    }
    init(){
        // 创建实例
        this.ws = new WebSocket(this.url)
        // 监听通道打开事件
        this.ws.onopen = this.open.bind(this)
        // 监听连接失败
        this.ws.onerror = this.error.bind(this)
        // 监听服务器消息
        this.ws.onmessage = this.message.bind(this)
        // 监听连接断开
        this.ws.onclose = this.close.bind(this)
    }
    // 连接打开
    open(){
        this.againTimer && clearInterval(this.againTimer)
        this.send(this.sendContent)
        this.heartbeatSend()
    }
    // 发送消息
    send(text:any) {
        this.ws?.send(text)
    }
    // 连接错误
    error(e:any){
        this.fail(e)
    }
    // 接收到服务端消息
    message(e:any){
        this.success(e)
    }
    // 心跳内容
    heartbeatSend(){
        if(!this.heartbeat) return
        this.heartbeatTimer&&clearInterval(this.heartbeatTimer)
        this.heartbeatTimer = setInterval(()=>{
            this.send(this.heartbeatContent)
        },this.heartbeat)
    }
    // 关闭心跳
    closeHeartbeat(){
        clearInterval(this.heartbeatTimer)
    }
    // 重启心跳
    enableHeartbeat(s:number){
        this.heartbeat = s
        this.heartbeatSend()
    }
    // 连接断开事件
    close(){
        this.againInit()
    }
    // 重连方法
    againInit(){
        if(this.againTimer){
            clearInterval(this.againTimer)
        }
       this.againTimer =  setInterval(()=>{
            this.init()
        },this.again)
    }
}

interface IWSParams {
    url:string,
    sendContent:any,
    again:number,
    heartbeat:number,
    heartbeatContent:any,
    success:(e:any)=>{},
    fail:(e:any)=>{}
}

export default createWebsocket

使用方式

<template>
  
  <button @click="init">开启连接</button>
  <button @click="onClickOpen">重启心跳</button>
  <button @click="onClickClose">关闭心跳</button>
</template>

<script setup>
	import createWebsocket from './websocket'
  const ws = null
  const init = ()=> {
    ws = new createWebsocket({
      url:'ws://localhost:88888',
      again:1500,
      heartbeat:2000,
      sendContent:'连接成功',
      heartbeatContent:{id:'dafafa',count:23}
      success:(e)=>{
        console.log(e)
      },
      fail:(e)=>{
        console.log(e)
      }
    })
  }
  

  const onClickOpen=()=>{
    ws.enableHeartbeat()
  }
  const onClickClose=()=>{
    ws.closeHeartbeat()
  }
  
</script>