websocket每隔5秒给服务端send一次信息_websocket后台给前端发消息频率

三、功能点三WebSocket连接发生错误的时候，连接错误 需要重连

websocketonerror(e) {
      console.log("WebSocket连接发生错误")
      // 连接断开后修改标识
      this.isConnect = false
      // 连接错误 需要重连
      this.reConnect()
      }
    },

全部代码如下：

<template>
</template>

<script>
export default {
  data() {
    return {
      timer: 5000,
      webstock: '', // webSocket使用
      isConnect: false, // webSocket连接标识 避免重复连接
      reConnectNum: 1, // 断开后重新连接的次数 免得后台挂了,前端一直重连
      _beforeUnload_time: null,
      _gap_time: null
    }
  },
  methods: {
    /*webSocket start*/
    initWebSocket() {
      let userId = this.$store.state.user.userId
      if (userId !== null && userId !== '') {
        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
        // 本地环境
       // let wsServer =
          // `${
          //   location.protocol === "https" ? "wss" : "ws"
          // }://localhost:9106/接口前缀/websocket/` + userId;
 
        // 线上环境
        let wsServer = 'ws://172.16.0.54:8102/api/webSocket/' + userId
        console.log("wsServer:", wsServer)
        this.webstock = new WebSocket(wsServer)
        this.webstock.onopen = this.websocketonopen
        this.webstock.onerror = this.websocketonerror
        this.webstock.onmessage = this.websocketonmessage
        this.webstock.onclose = this.websocketclose
      }
    },
    websocketonopen() {
      console.log("WebSocket连接成功") 
      // 连接建立后修改标识
      this.isConnect = true
      const timeoutInfoId = '420507657544310784'
      clearInterval(this.timer) // 清除定时器
      const that = this
      setInterval(() => {
        if (window.location.pathname === '/standardTemplate') {
          that.webstock.send(timeoutInfoId)
        }
      }, this.timer)
    },
    websocketonerror(e) {
      console.log("WebSocket连接发生错误")
      // 连接断开后修改标识
      this.isConnect = false
      // 连接错误 需要重连
      // this.reConnect()
      if (window.location.pathname === '/standardTemplate') {
        this.reConnect()
      }
    },
    // 接收后端推送过来的消息
    websocketonmessage(e) {
      console.log("message消息:", e.data)
      // if (e != null) {
      //   let str = JSON.parse(e.data)
      // }
    },
    websocketclose(e) {
      console.log("webSocket连接关闭")
      // 连接断开后修改标识
      this.isConnect = false
      this.webstock = ''
      if (window.location.pathname === '/standardTemplate') {
        this.reConnect()
      }
    },
    // 重新连接
    reConnect() {
      console.log("尝试重新连接,本次重连次数:" + this.reConnectNum)
      if (this.reConnectNum > 6) {
        return false
      }
      // 如果已经连上就不再重试了
      if (this.isConnect) return
      this.initWebSocket()
      this.reConnectNum = this.reConnectNum + 1
    },
    /*webSocket end*/
    beforeunloadHandler() {
          this._beforeUnload_time = new Date().getTime();
      },
      unloadHandler(e) {
          this._gap_time = new Date().getTime() - this._beforeUnload_time;
          // debugger
          // 关闭或刷新窗口都保存数据到后台
          // 判断窗口是关闭还是刷新
          if (this._gap_time <= 5) {
              // 关闭连接
        this.webstock.close()
          } 
      }
  },
  created() {
    this.reConnectNum = 1
    this.initWebSocket()
  },
  mounted() {
    window.addEventListener("beforeunload", e => this.beforeunloadHandler(e))
    window.addEventListener("unload", e => this.unloadHandler(e))
  },
  destroyed() {
    this.$destroy()
    clearInterval(this.timer) // 清除定时器
    // 页面销毁时关闭长连接
    // if (this.webstock !== null) {
    //   this.webstock.close()
    // } 
    window.removeEventListener("beforeunload", e => this.beforeunloadHandler(e))
    window.removeEventListener("unload", e => this.unloadHandler(e))
  }
}
</script>

问题一、

报错信息如下：socketReport.vue?8285:51 Uncaught DOMException: Failed to execute ‘send’ on ‘WebSocket’: Still in CONNECTING state.

要明白这个问题产生的原因，就需要了解websocket的几个状态。通常在实例化一个websocket对象之后，客户端就会与服务器进行连接。但是连接的状态是不确定的，于是用readyState属性来进行标识。它有四个值，分别对应不同的状态：

CONNECTING：值为0，表示正在连接；
OPEN：值为1，表示连接成功，可以通信了；
CLOSING：值为2，表示连接正在关闭；
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

这样问题的原因就很明显了，之所以数据不能发送出去，是因为websocket还处在“CONNECTING”状态下，连接还没有成功。

解决办法

只要在函数中添加对状态的判断，在状态为OPEN时，执行send方法即可。方法一代码如下

this.init()
if (this.webstock.readyState===1) {
    this.webstock.send()
}

问题二、vue项目中监听电脑网络的状态，突然断开网络或者关机

写法一、

 data() {
        return {
            network: true, //默认有网
        }
}

mounted() {
        window.addEventListener("online", () => {
            console.log("网络已连接:")
            this.network = true
        })
        // 检测断网
        window.addEventListener("offline", () => {
            console.log("已断网:")
            this.network = false
            if (this.webstock !== null) {
                this.webstock.close()
            }    
        })
}

控制台打印的结果：

断开网络的情况

再次连接网络：

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】