webSocket前端+webSocket封装

原创已于 2024-02-27 14:30:52 修改 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2023-07-11 14:48:31 首次发布

本文介绍了WebSocket的基础知识，包括创建WebSocket对象、连接成功后的回调函数、接收信息的处理以及窗口关闭时的处理。接着展示了如何封装WebSocket类，提供了更方便的事件处理方法。最后提到了一个用于测试WebSocket接通的工具，帮助前端开发者在没有后端接口的情况下进行调试。

一、websocket基础
 二、websocket 封装
 三、websocket 测试接通

一、websocket 基础

// WebSocket构造函数，创建WebSocket对象
let ws = new WebSocket('ws://localhost:8888')
// 连接成功后的回调函数
ws.onopen = function (params) {
  console.log('客户端连接成功')
  // 向服务器发送消息
  ws.send('hello')
};
// 从服务器接受到信息时的回调函数
ws.onmessage = function (e) {
  console.log('收到服务器响应', e.data)
};
// 连接关闭后的回调函数
ws.onclose = function(evt) {
  console.log("关闭客户端连接");
};

// 连接失败后的回调函数
ws.onerror = function (evt) {
  console.log("连接失败了");
};


// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，这样服务端会抛异常。
window.onbeforeunload = function() {
    ws.close();
}

二、websocket 封装

class MyWebScoket {
  constructor(socketUrl) {
    // super(socketUrl);
    this.onopenFn = null
    this.oncloseFn = null
    this.onmessageFn = null
    this.onerrorFn = null
    this.socketUrl = socketUrl
    this.socket = null
    this.init()
  }

  init() {
    let self = this
    let timeStep = new Date().getTime();
    self.socket = new WebSocket(self.socketUrl + timeStep);
    self.socket.onopen = function (event) {
      if (self.onopenFn) {
        self.onopenFn(event)
      }
    }
    self.socket.onmessageFn = function (event) {
      console.log(event, '连接关闭')
      if (self.onmessageFn) {
        self.onmessageFn(event)
      }
    }
    self.socket.onerrorFn = function (event) {
      console.log(event, 'websocket通信发生错误')
      if (self.onerrorFn) {
        self.onerrorFn(event)
      }
    }
    self.socket.oncloseFn = function (event) {
      console.log(event, '处理业务')
      if (self.oncloseFn) {
        self.oncloseFn(event)
      }
    }
  }
  close() {
    this.socket.close()
  }
}

export default MyWebScoket

2.使用(vue)

  import websocket from "./websocket.js"

  setWebsocket(){
      this.socket = new MyWebScoket(socketUrl)//socketUrl请求的地址
      this.socket.onopenFn = this.onopen.bind(this)
      this.socket.oncloseFn = this.onclose .bind(this)
      this.socket.onmessageFn = this.onmessage .bind(this)
      this.socket.onerrorFn = this.onerror.bind(this)
    },
    onopen(event){
      //业务处理
    },
    onclose(event){
      //业务处理
    },
    onmessage(event){
      //业务处理
    },
    onerror(event){
      //业务处理
    },