websocket断网重连

最新推荐文章于 2025-06-13 23:55:52 发布

原创

最新推荐文章于 2025-06-13 23:55:52 发布 · 4.2k 阅读

3 ·

CC 4.0 BY-SA版权

该博客探讨了如何处理WebSocket因网络问题断开连接的情况。目标是实现当WebSocket断开时立即尝试重连，如果多次失败，则间隔1分钟再次尝试，直到成功。文章提到了排除正常销毁WebSocket的场景，并指出当前代码中WebSocket地址硬编码的问题，建议通过nginx代理进行配置管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决问题：

因为计算机休眠、网络不稳定等原因，导致实时监视页面的websocket数据推送断了，数据不再更新没有实时性。

目的效果：

当websocket断开连接时马上重连，依然断开则1分钟后再重连，直到连接成功为止。
注意：当切换页面等正常销毁websocket排除在此机制外。可通过设置timerFlagWS以及关闭时的状态码e.code判断是否重连。

代码：

let websock = null
let socketTimer = null
let socketParam = {
  type: 'test'
}

export default {
  name: 'test',
  data () {
    return {
      socketUrl: 'ws://IP:PORT', 
      timerWS: null, // 用于ws重连
      timerCountWS: 0, // 用于重连计数，0-立刻开始重连，非0-1min重连一次。
      timerFlagWS: true // 跳转页面了不再重连
    }
  },
  mounted () {
    this.initWebsocket()
  },
  destroyed () {
    // 关闭websocket
    this.timerFlagWS = false
    this.timerCountWS = 0
    clearTimeout(this.timerWS)
    if (websock !== null) {
      websock.close()
      websock = null
    }
    clearTimeout(socketTimer)
  },
  methods: {
    initWebsocket () {
      if (typeof WebSocket !== 'undefined') {
        this.timerCountWS++
        // 浏览器支持