决定我的offer：问了我3个websocket的问题

前言

常网IT源码上线啦！
本篇录入吊打面试官专栏，希望能祝君拿下Offer一臂之力，各位看官感兴趣可移步🚶。
有人说面试造火箭，进去拧螺丝；其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验，不要是旁门左道冷门的知识，实际上并不会用到的。
接下来想分享一些自己在项目中遇到的技术选型以及问题场景。

人生的神奇就在于，答案经常追寻无果，却在某个不经意的瞬间，像一颗流星倏然划过夜空。不知道你有没有过那种，一个困扰了很久的问题，答案突然一下蹦入大脑的感觉？大概就像阿基米德洗澡时突然想出怎么测量皇冠含金量，激动的赤身裸体跳出澡盆满街狂奔一样

一、前言

最近的金三银四，有没有人去看看市场过？

降薪？外包？离家远？

我想你们的故事可能比我精彩，由各位道友来~

在进入正文之前，快速说一下websocket。

网络通信协议，跨平台，支持多种数据类型，WebSocket 允许客户端和服务器之间进行实时、双向的数据传输。

协议本身不提供加密功能，需要通过 WSS（WebSocket over TLS）来实现安全通信。

工作原理

握手阶段：客户端发送，服务器验证请求是否合法，并返回一个 WebSocket 协议的升级响应

数据传输阶段：数据以帧（Frame）的形式传输，支持文本和二进制数据

直入正文。

关于websocket的三个问题决定My offer。

二、websocket页面休眠了怎么处理

一上来就问页面休眠了怎么处理。

可见性API监听 + 自动重连

通过Page Visibility API检测页面休眠/切换标签状态，在页面恢复活跃时触发重连机制：

java 复制代码

document.addEventListener('visibilitychange', () => {
  if (!document.hidden && ws.readyState !== WebSocket.OPEN) {
    reconnectWebSocket(); // 实现带退避算法的重连
  }
});

网络状态监听

结合 navigator.onLine 检测，仅在在线状态下触发重连，避免无效尝试。
监听 online/offline 事件，网络恢复时立即重连

抛开websocket，其他方案通过监听用户交互事件（如鼠标移动mousemove、点击、键盘输入keydown）保持页面活跃，避免系统休眠。例如在页面根组件中添加事件监听器：

java 复制代码

document.addEventListener('mousemove', resetIdleTimer); // 鼠标移动触发
document.addEventListener('keydown', resetIdleTimer); // 键盘输入触发

我不知道我回答得面试官是否满意，只见他放下手中的纸，喝两杯水。

三、链接因为某些原因出了故障，导致延迟几秒，要怎么处理

关于这个问题，我确实想了几秒钟。

双向心跳验证：服务端每20秒推送状态确认包，客户端需在5秒内响应

指数退避重试：对失败请求实现智能重试机制

例如这样：

java 复制代码

async function fetchWithRetry(url, retries = 3) {
  let delay = 1000;
  for (let i = 0; i < retries; i++) {
    try {
      return await fetch(url);
    } catch (error) {
      await new Promise(res => setTimeout(res, delay));
      delay *= 2; // 每次重试间隔翻倍
    }
  }
  throw new Error('超过最大重试次数');
}

请求优先级控制 ：使用AbortController管理关键请求

java 复制代码

const controller = new AbortController();
fetch(url, { signal: controller.signal });
// 取消非关键请求
controller.abort();

我是想，只要在原问题处理请求，把一些优先级低的取消请求，就不会导致出故障延迟。

四、心跳请求一般做几秒

这玩意得分情况。

业务类型分为三类：金融交易、即时通讯和IoT设备。

金融交易
- 心跳间隔：5-10秒
- 超时阈值：15-20秒
- 技术依据：低延迟要求
即时通讯
- 心跳间隔：15-30秒
- 超时阈值：45秒
- 技术依据：平衡性能与用户体验
IoT设备
- 心跳间隔：60-120秒
- 超时阈值：180秒
- 技术依据：省电需求

java 复制代码

// 根据网络质量动态调整间隔
let baseInterval = 5000;
navigator.connection.addEventListener('change', () => {
  if (navigator.connection.effectiveType === '4g') {
    baseInterval = 3000;
  } else {
    baseInterval = 10000;
  }
});

根据业务类型、网络类型，我猜应该想问这个，不要一棍子打死，直接告诉他个数，几秒。

至此撒花~