服务端2月18日 18:00
TypeScript 项目中 i18next 怎么做类型安全？安装类型定义 `@types/i18next` 和 `@types/react-i18next`，然后定义翻译资源的类型结构。核心思路是把 JSON 翻译文件的结构映射为 TypeScript 接口，让 `t()` 函数的键名、插值参数、复数形式都获得类型检查。具体做法：定义 `TranslationResources` 接口描述所有命名空间的键值结构，通过泛型将资源类型注入 `useTranslation` 返回的 `t` 函数，使其只接受存在的键名；插值参数用 `GreetingOptions` 等接口约束，缺少必填变量时编译报错；复数和上下文分别用 `PluralOptions`、...
乐闻
服务端2月18日 18:01
i18next 常见坑有哪些？翻译不显示/切换失效/插值失败排查指南i18next 是前端最流行的国际化框架，使用中常遇到的问题按频率排列：**翻译不显示**多数是因为资源未加载完毕就渲染了组件、命名空间拼写错误、或语言代码格式不一致（`zh` vs `zh-CN`）；**语言切换不生效**通常是组件未正确监听语言变化或 React 未触发重渲染；**插值失败**多半是 `interpolation` 配置缺失或变量名拼写不对；**复数处理异常**则是未配置对应语言的复数规则。性能方面，一次性加载所有语言资源会导致首屏变慢，应改为按需加载加缓存。缺失翻译可通过 `fallbackLng` 和 `saveMissing` 兜底。SSR 场景（如 Next....服务端2月18日 18:01
i18next 翻译资源怎么管理？自动化工作流搭建指南i18next 翻译资源管理的核心是「提取 → 翻译 → 校验 → 部署」的自动化流水线。提取阶段，用 i18next-scanner 扫描代码中的 `t()` 调用自动提取键名，或通过 Babel 插件 i18next-extract 在编译时完成，避免手动维护键的遗漏。翻译阶段对接管理平台：i18next-locize-backend 可直接从 locize 云端拉取翻译，实现运行时按需加载；Crowdin 则提供翻译记忆和术语库，适合大规模多语言团队。校验阶段写验证函数检查占位符一致性（如 `{{name}}` 在各语言是否齐全）、HTML 标签闭合、译文长度溢出，配合 i18ne...服务端2月18日 18:12
WebSocket 是什么？和 HTTP 有什么区别？WebSocket 是 HTML5 引入的全双工通信协议，客户端和服务端可以同时收发数据，连接建立后持续保持，直到任一方主动关闭。它通过一次 HTTP 握手升级协议，之后不再走 HTTP 请求-响应模型，而是以帧为单位双向传输，帧头仅 2-14 字节，远小于 HTTP 每次请求携带的头部开销。适用于聊天、实时行情、多人游戏、协同编辑、监控推送等需要低延迟双向通信的场景。
## 追问
### WebSocket 握手过程是怎样的？
客户端发起一个普通 HTTP 请求，携带 `Upgrade: websocket` 和 `Connection: Upgrade` 头，并附上 `Sec-...服务端2月18日 18:13
WebSocket 握手过程是怎样工作的？HTTP 升级机制与安全防御WebSocket 握手是基于 HTTP 的协议升级过程。客户端发送一个特殊的 HTTP GET 请求，携带 `Upgrade: websocket` 和 `Connection: Upgrade` 头部，表明要切换协议。同时带上 `Sec-WebSocket-Key`（16字节随机值的 Base64 编码）和 `Sec-WebSocket-Version`（通常为13）。服务端验证请求合法后，返回 `101 Switching Protocols` 状态码，并附带 `Sec-WebSocket-Accept` 头部，其值由客户端 Key 拼接固定 GUID `258EAFA5-E914...服务端2月18日 18:17
WebSocket 握手过程是怎样的？HTTP 升级机制详解WebSocket 握手基于 HTTP 协议升级机制。客户端发送一个普通的 HTTP GET 请求，携带几个关键头部：`Upgrade: websocket` 表示要求协议升级，`Connection: Upgrade` 表示连接需切换协议，`Sec-WebSocket-Key` 是一个随机的 Base64 编码值（16 字节），`Sec-WebSocket-Version: 13` 指定协议版本，`Origin` 标识请求来源。服务器收到后，如果同意升级，返回 `101 Switching Protocols` 状态码，并携带 `Sec-WebSocket-Accept` 头部，其值由...服务端2月18日 18:17
WebSocket 心跳机制怎么实现？ping/pong 超时重连方案WebSocket心跳机制通过定时发送ping/pong帧来维持连接活跃。客户端每隔固定间隔向服务器发送ping，服务器收到后返回pong，若客户端在超时时间内未收到pong则判定连接断开并触发重连。心跳的核心作用有三个：一是检测连接是否存活，TCP连接半打开时应用层无法感知；二是防止NAT超时或防火墙因空闲连接而切断链路；三是实现快速故障恢复，避免等到下次数据发送时才发现连接已断。WebSocket协议本身定义了ping/pong控制帧，但实际开发中也常用自定义文本消息（如`{"type":"ping"}`）实现，灵活性更高且便于扩展业务数据。
## 追问
### 心跳间隔怎么定？...服务端2月18日 18:17
WebSocket 消息帧格式是怎样的？各字段含义详解WebSocket消息帧是通信的基本单位，由固定格式的二进制结构组成。一帧包含以下字段：FIN（1位）标识是否为最后一个分片；RSV1-3（各1位）保留给扩展使用；Opcode（4位）标识帧类型，0x0为继续帧、0x1文本帧、0x2二进制帧、0x8关闭帧、0x9 Ping、0xA Pong；MASK（1位）标识是否使用掩码；Payload Length（7位或扩展）表示载荷长度；Masking-key（0或4字节）为掩码密钥；Payload Data为实际数据。
客户端发送的帧MASK必须为1，服务器发送的帧MASK必须为0。Payload Length采用变长编码：0-125直接用7...服务端2月18日 18:18
WebSocket 和 HTTP 轮询、长轮询有什么区别？各自适用什么场景？HTTP轮询是客户端按固定间隔向服务器发请求，无论有无数据都返回响应。实现最简单，但大部分请求是无效的，浪费带宽和服务器资源，延迟取决于轮询间隔。HTTP长轮询是客户端发请求后服务器不立即返回，而是挂起连接直到有新数据或超时才响应，客户端收到后再发下一个请求。实时性明显好于普通轮询，但每次数据推送都需要重新建立连接，且服务器需要维护大量挂起请求。WebSocket通过一次HTTP握手升级为持久连接，建立后双方可以随时主动发数据，是真正的全双工通信。帧头仅2-10字节，开销远低于HTTP每次请求携带的完整头部。三种方式中，WebSocket实时性最好、开销最低，但需要服务器和客户端同时支持...服务端2月18日 18:18
WebSocket 断线重连怎么实现？指数退避+心跳完整方案WebSocket 有四个连接状态：`CONNECTING(0)`、`OPEN(1)`、`CLOSING(2)`、`CLOSED(3)`。断线重连的核心是在 `onclose` 回调中判断关闭原因，对异常关闭自动重建连接。基础实现需控制重连次数上限，避免无限重试消耗资源。重连间隔采用指数退避策略，初始延迟如 1 秒，每次翻倍，上限 30 秒，避免短时间内大量重连请求冲击服务端。同时要区分正常关闭（code 1000）和异常关闭，正常关闭不应触发重连。心跳检测是重连机制的重要补充，客户端定时发送 ping，若 pong 超时未返回则主动关闭连接触发重连。还需监听浏览器的 `online`/...