记录简易使用websoket

ts中使用大概记录

import { ElMessage } from 'element-plus'
import emitter from 'tiny-emitter/instance'

interface Emitter {
  $on: typeof emitter.on,
  $once: typeof emitter.once,
  $off: typeof emitter.off,
  $emit: typeof emitter.emit,
}

interface EventMap {
  connected: () => void
  error: (error?: string) => void
}

export default class WsClient {
  private ws: WebSocket | null = null
  emitter: Emitter

  constructor() {
    this.emitter = emitter as Emitter
  }

  addListener<E extends keyof EventMap>(event: E, cb: EventMap[E]) {
    this.emitter.$off(event, cb)
    this.emitter.$on(event, cb)
  }

  removeListener<E extends keyof EventMap>(event: E, cb: EventMap[E]) {
    this.emitter.$off(event, cb)
  }

  connect(url: string) {
    this.ws = new WebSocket(url)
    this.ws.onopen = () => {
      this.sendCmd('xxxx', {})
    }
    this.ws.onmessage = (ev) => {
      // 处理接收到的消息
    }
    this.ws.onclose = () => {
      this.emitter.$emit('close')
    }
    this.ws.onerror = () => {
      ElMessage.error('ws连接失败')
    }
  }

  disconnect() {
    if (this.ws) {
      this.ws.close()
    }
  }

  sendCmd(cmd: string, param: any) {
    const command = {
      type: 'command',
      cmd,
      ...param,
    }
    const payload = { msg: 'json', strData: JSON.stringify(command)}
    
    this.ws?.send(JSON.stringify(payload))
  }
}


export const setWsClient = (url: string) => {
  wsClient.connect(url)
}

vue2中使用思路

methods: {
	// 初始化一个 websocket 对象，同时给基本属性赋值
	initWebSocket: function () {
        let host = window.location.host; // 这个 host 根据具体接口的实际情况自行定义 
        this.websock = new WebSocket(`ws://${host}/api/websoket`);
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
    },
    // 定义 websocket open属性的函数
	websocketonopen () {
        console.log('WebSocket连接成功');
    },
    // 定义 websocket onerror属性的函数
    websocketonerror (e) {
        console.log('WebSocket连接发生错误');
    },
    // 定义 websocket onmessage属性的函数
    websocketonmessage (e) {
        console.log('e:', e.data);
        <!--此处是调用了自己的数据处理方法-->
        this.messageList.push(e.data);
    },
    // 定义 websocket onclose属性的函数
    websocketclose (e) {
        console.log('connection closed');
    }
},
created () {
	// 调用初始化函数（这个可以根据具体业务在具体操作下初始化）
     this.initWebSocket();
},
// 页面销毁时关闭 websocket 的连接
destroyed () {
 	 this.websocketclose(); //或者可以用this.WebSocket.close();
}