websocket通信

看同事大佬封装的websocket,在这里记录一下，温故而知新，增加websocket.ts（websocket连接、失败、关闭操作文件），control.ts（发布订阅模式操作文件），index.ts

1. websocket.ts

   import EventListenControl from './control'//引入发布订阅模式
   import {basePath,port,baseIp,webport} from '@/config/ip.config'
   const defaultURL = "ws://127.0.0.1:3006/ws";//websocket连接地址
   interface PrepareRequest {
       key: string;
       val:any;
   }
   //定义websocket类
   class Ws extends EventListenControl {
       url = "";//websocket地址
       ws: WebSocket | null = null;//websocket
       connected = false;//判断是否连接成功
       pending = false;//判断是否在连接中
       prepareList: PrepareRequest[] = [];//请求队列中的消息
       heartbeat: any = null;//判断是否已经存在请求通道
       loginApi: string;//登录api验证登录
       constructor(loginApi?: string, url = defaultURL) {
           super();
           this.url = url;
           this.loginApi = "";//默认没有使用接口验证
       }
       connect(params?: string) {//params传入的当前用户id
           setTimeout(() => {
               if (this.pending) return;
               this.pending = true;
               this.destroy();
               const url = this.url + (params ? '?id='+params : "");//判断params传入的当前用户id，存在就拼在地址后传入
               try {
                   let ws = new WebSocket(url);
                   this.ws = ws;
                   ws.onmessage = (event) => {//接收消息，收到消息后将消息广播出去（发布）
                       if (this.connected) {
                           let data = JSON.parse(event.data);
                           this.emit(data.key, data.val);//通过key来制定发布消息
                       }
                   }
                   ws.onopen = (e) => {
                       this.onconnect(e);
                       this.connected = true;
                       this.pending = false;
                   }
                   ws.onclose = e => {
                       if (ws === this.ws) {
                           this.pending = false;
                           this.connected = false;
                       }
                   }
                   ws.onerror = (e) => {
                       console.log('onerror执行error事件，开始重连');
                     }
               } catch (error) {
                   console.log(error);
               }
           }, 200)
       }
       postmessage(key : string, val: Object) {
           if (this.ws && this.connected) {//判断当前请求队列是否在使用或者websocket是否连接失败，如果失败就将消息先存到队列中，
               const dataString = JSON.stringify({
                   key,
                   val,
               })
               this.ws.send(dataString);
           } else {
               this.prepareList.push({ key,val });
           }
       }
       destroy() {
           if (this.ws) {
               this.ws.close();
           }
           if (this.heartbeat) {
               clearInterval(this.heartbeat);
               this.heartbeat = null;
           }
       }
       onconnect(e: Event) {
           if (!this.heartbeat) {
               this.heartbeat = setInterval(() => {
                   this.postmessage("heartbeat", "ping");
               }, 1000 * 60 * 2);
           }
           this.afterConnect(e);
       }
       afterConnect(e: Event) { }
   }
   
   const createWebsocket = (loginApi?: string,) => {
       let ws = new Ws();//可传入接口，也可不传入，传入接口为需要验证的接口
       return ws;
   }
   
   export {
       createWebsocket,
   };
   
   export default Ws;

2. control.ts

   class EventListenControl {
       container: any = {};
       on(evt: string, callback: Function) {//订阅时，将对应方法和key值存储在container中
           if (!this.container[evt]) this.container[evt] = [];
           this.container[evt].push(callback);
       }
       emit(evt: string, ...arg: any[]) {//发布时，会去container中通过传入evt即key值来查找，找到后将数据传入订阅写的回调中
           if (this.container.hasOwnProperty(evt))
               this.container[evt].forEach((fn: Function) => {
                   fn(...arg);
               })
       }
       remove(evt: string, callback: Function) {//删除container中的订阅方法
           if (this.container[evt] && this.container[evt] instanceof Array) {
               let idx = this.container[evt].findIndex((el: Function) => el == callback);
               if (idx >= 0) {
                   this.container[evt].splice(idx, 1);
               }
           }
       }
   }
   
   export default EventListenControl;

3. index.ts
   

   import { createWebsocket } from './websocket'
   const ws = createWebsocket();
   ws.onconnect = (e) => {};
   export default ws;

4. vue3组件中调动，
   在test.vue组件中引入index.ts
   (1.)连接websocket
   

   <template>
   
   </template>
   
   <script lang="ts" setup>
   import { ref,onMounted } from "vue";
   import ws from './websocket/index'
   onMounted(()=>{
     ws.connect("123456465");//连接websocket,123456465为当前用户id
   })
   </script>
   
   <style lang="less" scoped>
   
   </style>

   (2.)订阅

   <template>
   
   </template>
   
   <script lang="ts" setup>
   import { ref,onMounted } from "vue";
   import ws from './websocket/index'
   //消息接收
   const handleReceiveMessage = (res: any) => {
       console.log(res,"接收到的消息")
   };
   ws.on("lalala", handleReceiveMessage);
   </script>
   
   <style lang="less" scoped>
   
   </style>

   （3.）发布

   <script lang="ts" setup>
   import { ref,onMounted } from "vue";
   import ws from './websocket/index'
   ws.emit("lalala","你好，请问你叫什么名字");
   </script>

   （4.）删除

   <script lang="ts" setup>
   import { ref,onMounted } from "vue";
   import ws from './websocket/index'
   ws.remove("lalala");
   </script>

   这是我在使用中用到的一些方法，对于其中的接口校验认证我还没有操作过，所以没有在这里记录。