Vue 使用websocket

Vue 使用websocket

  data() {
    return {
      data: 0,
      timeout: 30 * 1000, //30秒一次心跳
      timeoutObj: null, //心跳心跳倒计时
      serverTimeoutObj: null, //心跳倒计时
      timeoutnum: null, //断开 重连倒计时
      websocket: null,
    }
  },
  methods: {
    initWebSocket() {
      let url =''wss://localhost:8080''
      this.websocket = new WebSocket(url)
      // 连接错误
      this.websocket.onerror = this.setErrorMessage
      // 连接成功
      this.websocket.onopen = this.setOnopenMessage

      // 收到消息的回调
      this.websocket.onmessage = this.setOnmessageMessage

      // 连接关闭的回调
      this.websocket.onclose = this.setOncloseMessage

      // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      window.onbeforeunload = this.onbeforeunload
    },
    reset() {
      // 重置心跳
      // 清除时间
      clearTimeout(this.timeoutObj)
      clearTimeout(this.serverTimeoutObj)
      // 重启心跳
      this.start()
    },
    start() {
      // 开启心跳
      this.timeoutObj && clearTimeout(this.timeoutObj)
      this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj)
      this.timeoutObj = setTimeout(() => {
        console.log('heartCheck', this.websocket.readyState)
        // 这里发送一个心跳，后端收到后，返回一个心跳消息，
        if (this.websocket && this.websocket.readyState == 1) {
          // 如果连接正常
          this.websocketsend('heartCheck')
        }
        this.serverTimeoutObj = setTimeout(() => {
          //超时关闭
          this.websocket.close()
        }, this.timeout)
      }, this.timeout)
    },
    setOnmessageMessage(event) {
      let obj = JSON.parse(event.data)
      console.log('obj', obj)
      switch (obj.type) {
        case 'heartCheck':
          //收到服务器信息，心跳重置
          console.log('接收到的服务器消息：', obj.data)
          this.reset()
          break
        case 'sendMessage':
          this.data = obj.data
          console.log('接收到的服务器消息：', obj.data)
      }
    },
    setErrorMessage() {
      console.log(
        'WebSocket连接发生错误'
      )
    },
    setOnopenMessage() {
      //开启心跳
      this.start()
      console.log(
        'WebSocket连接成功' 
      )
    },
    setOncloseMessage() {
      console.log(
        'WebSocket连接关闭'
      )
    },
    onbeforeunload() {
      this.closeWebSocket()
    },
    //websocket发送消息
    websocketsend(messsage) {
      this.websocket.send(messsage)
    },
    closeWebSocket() {
      // 关闭websocket
      this.websocket.close()
    },
  },
  //初始化
  created(){
   this.initWebSocket()
  },
  //销毁
  destroyed() {
    this.websocket.close()
  },

最后

以上就是拼搏铃铛为你收集整理的Vue 使用websocket的全部内容，希望文章能够帮你解决Vue 使用websocket所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。