请介绍前端通过 WebSocket 构建一个支持多用户在线实时聊天室的具体实现方案，其中需要展示消息通知。你会如何设计消息的接收、展示与通知机制？
考察说明
考查候选人使用 WebSocket 实现实时通信的能力，包括连接管理、消息协议、多用户支持以及通知交互设计。
回答思路
- 【回答框架 1】建立 WebSocket 连接：创建 WebSocket 实例指向服务器端 wss 地址，处理 onopen、onmessage、onerror、onclose 事件；连接断开时实现自动重连机制，例如指数退避策略。
- 【回答框架 2】定义消息协议：通过 JSON 格式约定消息类型，如 type 字段区分 chat、notification、presence 等；消息内容包含 senderId、roomId、content、timestamp 等字段，便于前端解析和分发。
- 【回答框架 3】多用户聊天支持：通过 room 的概念将用户分组，客户端加入聊天室时发送 join 消息，服务器维护房间成员列表并广播消息；前端维护用户列表和消息列表的状态，使用事件驱动更新视图。
- 【回答框架 4】消息通知：根据用户当前状态决定展示策略，若页面处于后台或用户不在当前会话窗口时，使用浏览器 Notification API 发送系统通知；同时可产生声音提醒和未读计数。
- 【回答框架 5】异常处理与性能：处理断线重连、消息发送失败的重试队列；优化消息渲染，使用虚拟滚动或分页加载避免长列表卡顿，减少不必要的全量 DOM 更新。
- 【关键点 1】WebSocket 基于 TCP 全双工通信，适用于实时交互场景，非同源的连接需注意跨域限制。
- 【关键点 2】应用心跳机制（ping/pong）维持连接，检测网络异常，配合自动重连降低断线影响。
- 【关键点 3】消息协议应包含消息类型、发送者、所属会话、时间戳等结构化字段，便于前端逻辑处理。
- 【关键点 4】通知功能需要结合浏览器权限，先请求 Notification 权限，并区分前台/后台状态，避免打扰过多。
- 【关键点 5】多用户在线状态需要通过 presence 事件同步，如用户加入/退出时通知其他客户端更新在线列表。
- 【易错点 1】不要把 WebSocket 和 HTTP 长轮询混为一谈，WebSocket 更适合双向、低延迟，但构建复杂度更高。
- 【易错点 2】仅依靠客户端重连可能造成消息乱序或丢失，可在消息协议中加入序号或时间戳进行处理。
- 【易错点 3】Notification 权限必须显式申请，未获权限时不能强制弹窗，需降级为站内提醒。