如何使用WebSocket开发聊天室简易Web聊天室前端实现【Demo】-js教程-PHP中文网

WebSocket连接失败或消息不同步主因是前端未规范处理生命周期与事件竞态；须用wss://或ws://前缀、校验readyState、JSON解析加try/catch、localStorage分时机存消息、重连用指数退避、统一用服务端时间戳。

如何使用websocket开发聊天室简易web聊天室前端实现【demo】

WebSocket 连接失败或消息收发不同步，大概率是前端没处理好连接生命周期和事件竞态——不是协议难，是没按规范写事件监听和重连逻辑。

WebSocket 实例化时必须用 `wss://` 或 `ws://` 协议前缀

浏览器会直接拒绝没有协议的 URL，比如 new WebSocket("localhost:8080") 必报 SecurityError。开发环境常用 ws://localhost:8080，上线必须切到 wss://your-domain.com（否则 Chrome 会拦截）。

本地测试可临时关闭 Chrome 安全策略（不推荐），更稳妥的是用 http-server + ws 搭配自签名证书跑 wss
URL 中不能带查询参数给后端传 token？可以，但要用 new WebSocket("ws://…?token=abc123")，服务端从 upgradeReq.url 解析
不要在 onopen 外提前调用 send()，WebSocket 对象创建后状态是 CONNECTING，此时发消息会静默丢弃

`onmessage` 回调里必须做 JSON 解析和类型校验

后端发来的可能是字符串、二进制（Blob 或 ArrayBuffer），也可能是未格式化的错误消息。直接 JSON.parse(event.data) 容易崩在 SyntaxError。

先判断 event.data instanceof Blob 或 typeof event.data === "string"
字符串场景下加 try/catch，失败时打日志并跳过：console.warn("invalid message", event.data)
约定消息结构，比如统一用 {type: "chat", from: "user1", content: "hi"}，收到非 type 字段就忽略，防攻击

用户刷新页面后聊天记录丢失？得自己存 `localStorage` 并控制同步时机

WebSocket 断开后不会自动缓存消息，localStorage 是唯一轻量级方案，但不能每条都实时写入（影响滚动性能），也不能只在卸载时存（容易丢）。

HISUI 前端框架开发指南（IRIS版）

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。

下载

定义一个 appendMessage(msg) 函数，内部调用 localStorage.setItem("chat-log", JSON.stringify(log))
只在新消息追加到 DOM 后再更新 storage，避免 DOM 渲染卡顿
页面加载时用 JSON.parse(localStorage.getItem("chat-log") || "[]") 初始化历史列表，但注意过滤掉过期消息（比如 7 天前的）
别把整个聊天窗口内容塞进 storage —— 超过 5MB 会触发 QuotaExceededError

发送消息前必须检查 `readyState`，断线时要手动重连

send() 报错 InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state 很常见，本质是发太快或网络抖动导致状态不同步。

发消息前必加判断：if (ws.readyState === WebSocket.OPEN) { ws.send(...) }
断开时（onclose）不要立刻重连，加个指数退避：setTimeout(() => connect(), Math.min(1000 * 2 ** retryCount, 30000))
重连次数上限设为 5，超过就提示用户“连接异常，请刷新”，避免无限请求压垮服务端
用户点击发送按钮后禁用按钮，onmessage 收到服务端回执（如 {ack: msgId}）再启用，防止重复提交

最常被跳过的细节：服务端发来的消息时间戳是服务器时间，前端显示时如果直接用 new Date().toLocaleTimeString()，会导致双方看到的时间不一致；得统一解析服务端传的 timestamp 字段，而不是依赖客户端本地时间。