vue websocket setup 断线重连

在Vue.js项目中设置WebSocket连接并实现断线重连通常涉及以下几个步骤：

1. 引入WebSocket库：首先需要安装`vue-websocket`或类似库，例如通过npm安装 `npm install vue-property-decorator vuex-persistedstate @vue/websocket`

2. 创建WebSocket实例：在Vue组件中，创建一个Vue.prototype.$ws的挂载点，初始化WebSocket连接。

import { WebSocket } from '@vue/websocket'

Vue.prototype.$ws = new WebSocket('ws://your-websocket-url')

3. 连接状态管理：在Vuex中，可以创建一个store来跟踪连接状态，并处理连接、关闭事件。

const store = createStore({
  state: {
    isConnected: false,
  },
  mutations: {
    setConnected(state, connected) {
      state.isConnected = connected;
    },
  },
  actions: {
    connect({ commit }) {
      $ws.onopen = function () {
        commit('setConnected', true);
      };
      // ...其他断开时的重试逻辑
    },
    disconnect() {
      $ws.close();
      commit('setConnected', false);
    },
  },
});

4. 断线重连逻辑：当失去连接（onclose事件触发）时，可以在actions中添加重连尝试。可以设置一个定时器或使用WebSocket的retry选项。

actions: {
  reconnect({ commit }) {
    if (!$ws.connected && !isTryingToReconnect) {
      isTryingToReconnect = true; // 设置标记防止多次尝试

      setTimeout(() => {
        tryConnect();
        isTryingToReconnect = false; // 重试成功后清除标记
      }, 5000); // 5秒后尝试重连
    }
  },
  tryConnect() {
    $ws.connect(); // 尝试重新连接
  },
},

5. 监听状态变化：在组件内监听Vuex的状态变化，以便在连接恢复时更新UI。

<template>
  <div v-if="!$ws.isConnected">
    <!-- 连接丢失时的提示 -->
  </div>
</template>

<script>
export default {
  computed: {
    wsStatus() {
      return this.$ws.isConnected;
    },
  },
  methods: {
    onConnectionChange() {
      // 更新UI或执行其他操作
    },
  },
  mounted() {
    store.subscribe((mutation, state) => {
      if (mutation.type === 'setConnected') {
        this.onConnectionChange();
      }
    });
  },
};
</script>