vue3+ts建立websocket连接

最新推荐文章于 2024-12-16 15:51:24 发布

原创

最新推荐文章于 2024-12-16 15:51:24 发布 · 354 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #网络协议 #网络

在utils下创建websocket.ts文件

/**
 * 参数说明：
 *  webSocketURL：String    webSocket服务地址    eg: ws://127.0.0.1:8088/websocket (后端接口若为restful风格可以带参数)
 *  callback：为带一个参数的回调函数
 *  message：String 要传递的参数值（不是一个必要的参数）
 */
export default {
  webSocket: null as WebSocket | null,
  // 初始化webSocket
  webSocketInit(webSocketURL: string): void {
    this.webSocket = new WebSocket(webSocketURL);
    this.webSocket.onopen = this.onOpenCallback.bind(this);
    this.webSocket.onmessage = this.onMessageCallback.bind(this);
    this.webSocket.onerror = this.onErrorCallback.bind(this);
    this.webSocket.onclose = this.onCloseCallback.bind(this);
  },
  // 自定义回调函数
  setOpenCallback(callback: (event: Event) => void): void {
    if (this.webSocket) {
      this.webSocket.onopen = callback;
    }
  },
  setMessageCallback(callback: (event: MessageEvent) => void): void {
    if (this.webSocket) {
      this.webSocket.onmessage = callback;
    }
  },
  setErrorCallback(callback: (