Chromium系浏览器与Firefox打开tel:链接时WebSocket断开问题求助

这个问题确实有不少开发者遇到过，核心原因是Chromium和Firefox在处理tel:这类外部协议链接时，会将当前页面进程转入后台冻结状态，导致WebSocket的心跳（ping/pong）机制无法按时执行，最终触发ping超时断开连接。而Safari的后台页面资源调度策略不同，不会严格限制这类进程，因此没有出现该问题。

以下是几个可行的解决办法：

1. 拦截tel:链接默认行为，用新窗口打开 #

阻止当前页面跳转至tel协议，改用新窗口打开，避免当前页面被浏览器挂起：

<template>
  <a href="tel:123456789" @click="handleTelLinkClick">123456789</a>
</template>

<script>
export default {
  methods: {
    handleTelLinkClick(e) {
      e.preventDefault();
      const telUrl = e.currentTarget.href;
      // 新窗口打开tel链接，当前页面保持活跃状态
      window.open(telUrl);
    }
  }
}
</script>

2. 利用页面可见性API动态调整心跳参数 #

通过Page Visibility API监听页面状态，在页面隐藏时延长心跳间隔和超时时间，恢复可见时重置参数：

export default {
  mounted() {
    // 保存原始心跳配置
    const originalPingInterval = this.$socket.io.opts.pingInterval;
    const originalPingTimeout = this.$socket.io.opts.pingTimeout;

    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        // 页面隐藏时大幅延长心跳周期，避免触发超时
        this.$socket.io.opts.pingInterval = 300000; // 5分钟
        this.$socket.io.opts.pingTimeout = 600000; // 10分钟
      } else {
        // 页面恢复可见时重置回原始配置
        this.$socket.io.opts.pingInterval = originalPingInterval;
        this.$socket.io.opts.pingTimeout = originalPingTimeout;
        // 主动发送ping确认连接状态
        this.$socket.io.sendPing();
      }
    });
  }
}

注意：部分Socket.io版本需要直接操作底层engine.io实例，例如this.$socket.io.engine.pingInterval，请根据实际使用的版本调整。

3. 优化Socket.io自动重连策略 #

虽然Socket.io自带自动重连，但可以配置更合理的重连参数，确保断开后快速恢复：

import io from 'socket.io-client';

const socket = io(process.env.VUE_APP_SOCKET_URL, {
  reconnection: true,
  reconnectionAttempts: 10, // 最大重连次数
  reconnectionDelay: 1000, // 初始重连间隔
  reconnectionDelayMax: 5000 // 最大重连间隔
});

// 监听重连成功事件，恢复业务数据同步
socket.on('reconnect', () => {
  console.log('Socket连接已恢复');
  // 此处可重新发送需要同步的业务数据
});

内容的提问来源于stack exchange，提问作者Timpan4