webSocket前端+webSocket封装-Toy模板网

这篇具有很好参考价值的文章主要介绍了webSocket前端+webSocket封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、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)文章来源地址https://www.toymoban.com/news/detail-553897.html

  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){
      //业务处理
    },