引言

在Vue3项目中，通过引入WebSocket实现实时通信功能是构建实时应用的关键。然而，在实际开发过程中，我们不仅要关注如何正确地发送和接收消息，还需要考虑网络不稳定或服务器故障等可能导致的连接断开问题。本文将深入探讨如何在Vue3中为WebSocket实现健壮的异常处理机制，并结合合理的重连策略，确保即使在网络波动下也能保持良好的用户体验。

目标

1. 学习如何在Vue3中对WebSocket进行异常捕获和处理
2. 实现具有自适应延迟重试的WebSocket重连策略
3. 将上述策略整合到Vue3组件中，确保WebSocket连接的稳定性

异常处理

在Vue3中使用WebSocket时，我们可以监听error事件来捕获可能发生的错误：

// 在onMounted钩子中添加error事件监听器
socket.addEventListener('error', (error) => {
  console.error('WebSocket error:', error);
  
  // 根据错误类型进行不同的处理逻辑
  if (/* 判断是否需要重连 */) {
    // 触发重连逻辑
  }
});

对于特定类型的错误（如网络中断），我们应当触发重连逻辑，而不是直接抛出错误并结束连接。

WebSocket重连策略

为了保证在WebSocket连接断开后能自动恢复连接，我们需要设计一种有效的重连策略。这里采用一个常见的指数退避重连算法，即每次重连间隔随失败次数增加而逐渐增长。

let reconnectAttempts = 0;
const maxReconnectAttempts = 5; // 最大重连次数
const initialReconnectInterval = 3000; // 初始重连间隔（单位：毫秒）

function reconnect() {
  if (reconnectAttempts < maxReconnectAttempts) {
    const interval = initialReconnectInterval * Math.pow(2, reconnectAttempts);
    setTimeout(() => {
      socket = new WebSocket('ws://yourserver.com/ws-endpoint');
      // ... 添加WebSocket事件监听器 ...
      
      reconnectAttempts++;
    }, interval);
  } else {
    console.log('Max reconnect attempts reached, giving up.');
  }
}

// 当接收到WebSocket的close事件时触发重连函数
socket.addEventListener('close', (event) => {
  if (event.wasClean === false || event.code !== 1000) { // 非正常关闭或非预期关闭码
    reconnect();
  }
});

// 当发生错误时同样触发重连逻辑
socket.addEventListener('error', () => {
  reconnect();
});

整合到Vue3组件中

现在我们将异常处理和重连策略整合到Vue3组件的生命周期方法中：

<template>
  <!-- 省略模板部分 -->
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 定义状态变量、初始化WebSocket
// ...

let socket;
let reconnectAttempts = 0;

onMounted(() => {
  socket = new WebSocket('ws://yourserver.com/ws-endpoint');

  // ... 添加其他WebSocket事件监听器 ...

  // 添加错误和关闭事件监听器以触发重连
  socket.addEventListener('close', (event) => {
    if (!event.wasClean) {
      reconnect();
    }
  });

  socket.addEventListener('error', () => {
    reconnect();
  });
});

function reconnect() {
  // ... 实现重连逻辑 ...
}

onUnmounted(() => {
  // 关闭WebSocket连接
  if (socket.readyState !== WebSocket.CLOSED) {
    socket.close();
  }
});

// ... sendMessage 方法 ...
</script>

通过以上示例，您可以在Vue3项目中实现WebSocket的异常处理及重连策略，从而提升应用在各种网络环境下的稳定性和用户体验。在实际应用中，您还可以根据业务需求进一步优化这些策略，例如加入随机抖动避免集群环境下所有客户端同时重连，或者在成功重连后重新订阅数据等。