WebSocket实现输入状态提示需客户端检测输入行为并防抖上报、服务端维护与广播状态、接收方动态渲染，同时处理多设备、快速发送、网络异常及隐私等边界情况。
WebSocket 可以实现实时双向通信，输入状态（如“对方正在输入…”）的展示关键在于：客户端主动上报输入行为 + 服务端广播状态 + 客户端及时渲染提示。核心不是轮询，而是状态变更即推。
一、客户端检测输入行为并发送状态
监听用户在聊天输入框中的输入动作，避免频繁发送。推荐使用 input 事件配合防抖（如 500ms 内无新输入再发“停止输入”），同时区分“开始输入”和“结束输入”两种状态：
- 当用户聚焦输入框且首次输入字符时，立即通过 WebSocket 发送：
{"type":"typing_start","to": "user2"} - 当输入暂停（防抖触发）或失去焦点时，发送：
{"type":"typing_end","to": "user2"} - 注意：不要在
keydown或keypress中发，容易误触发；也不要每敲一个字都发
二、服务端中转与状态管理
服务端需维护每个用户的“当前输入状态”（例如用 Map 存储 userId → {targetId, lastActiveTime}），收到 typing 消息后做两件事：
- 更新该用户对指定接收方的输入状态（记录时间戳）
- 向目标用户（
to字段指定的用户）推送状态消息，例如：{"type":"peer_typing","from":"user1","status":"start"}或"end" - 可选：为防状态残留，定时清理超时（如 3 秒无更新）的 typing 状态，并自动广播
typing_end
三、接收方渲染与清除提示
前端监听 WebSocket 收到的 peer_typing 消息，动态控制提示文案显示：
立即学习“前端免费学习笔记（深入）”；
- 收到
status: "start"时，在聊天窗口顶部/对方头像旁显示“对方正在输入…”（建议加 CSS 动画，如省略号闪烁） - 收到
status: "end"或超时（如 3 秒未收新 start）时，隐藏提示 - 若同一会话中多个联系人同时输入，需按用户维度分别管理状态，避免相互覆盖
四、边界情况处理建议
真实场景中需考虑这些细节，否则提示会失真或卡顿：
- 多标签页/多设备：用户 A 在手机上输入，网页端也应显示提示——服务端状态以用户 ID 为准，不绑定设备
-
消息快速发送：用户输入完立刻发消息，此时应主动发
typing_end，避免提示残留 - 网络异常：客户端发送 typing_start 后断连？服务端可通过心跳或连接关闭事件自动清理该用户所有 typing 状态
- 隐私控制：支持用户设置“不向他人显示我的输入状态”，服务端需校验该开关再决定是否广播
