WebSocket聊天室需三步：连服务器（onopen后send）、收发消息（区分本地/远程并滚动到底部）、DOM渲染（避免innerHTML拼接）；须处理重连、空消息拦截、关闭清理及错误提示。
直接用 WebSocket 搭建简易聊天室窗口，核心就三件事：连上服务器、收发消息、把消息塞进 DOM。不依赖框架、不绕开原生 API，但必须处理好连接时机和错误降级。
WebSocket 连接必须等 onopen 触发后再发消息
很多人写完 new WebSocket('ws://localhost:8080') 就立刻调 socket.send()，结果控制台报错或静默失败——因为连接还没建立成功。
-
socket.send()只能在socket.readyState === WebSocket.OPEN时安全调用 - 别在
onopen外部直接发；也不要用setTimeout猜测延迟，那不可靠 - 如果服务端没起来，
onerror会触发，但不会自动重试；建议加个简单重连逻辑（比如最多重试 3 次，间隔 1s）
消息渲染要区分本地/远程，且必须滚动到底部
用户发完消息自己得立刻看到，否则会反复点击发送；而收到别人的消息也得及时出现在可视区底部，不然容易漏读。
- 本地消息调用
displayMessage(text, 'local')后，立即执行messages.scrollTop = messages.scrollHeight - 远程消息同理，但注意：如果
onmessage触发时 DOM 还没挂载（比如脚本在<head>里），document.getElementById('messageList')会是null - 避免用
innerHTML += ...拼接，每次清空再appendChild更可控，尤其要兼容表情或换行符
input 框回车发送 + 防空消息是基础体验底线
只靠按钮点击太反直觉，用户习惯回车提交；同时空消息、纯空白符消息必须拦截，否则会污染聊天记录甚至触发后端异常。
立即学习“前端免费学习笔记（深入）”；
- 监听
inputBox.addEventListener('keypress', e => { if (e.key === 'Enter') sendMessage() }) -
sendMessage()里用input.value.trim() === ''判断是否为空，不是只看input.value.length - 发送后记得
input.value = ''并input.focus()，保持输入焦点
WebSocket 关闭时要显式清理并提示用户
网络抖动、页面切后台、服务端重启都会导致连接断开。不处理 onclose 和 onerror，用户会以为“卡了”而不是“断了”。
-
onclose回调里加一句console.log('连接已关闭，状态码：', event.code)，方便定位是主动断开（1000）还是异常（如 1006） - 在 UI 上显示“连接已断开，正在重连…”比留白更友好；可配合禁用发送按钮防止误操作
- 别忘了移除旧的
onmessage监听器再新建 socket，否则可能绑定多次，造成重复渲染
真正难的不是写几行 socket.send()，而是让每一次连接、每一条消息、每一个回车键都落在用户预期的位置——这需要你盯着 Network 面板看请求，盯着 Console 看错误码，盯着 DOM 看元素是否真被 append 进去了。
