如何用JavaScript实现一个实时聊天应用_WebSocket如何建立双向通信？

WebSocket通过HTTP升级握手建立TCP上的持久双向通信，客户端用new WebSocket()连接并监听onopen/onmessage，服务端用ws库广播消息，需处理重连、心跳、鉴权等优化。

用 JavaScript 实现实时聊天应用，核心在于建立客户端与服务端之间的持久、双向通信通道——WebSocket 正是为此而生。它不像 HTTP 那样每次请求都要重新握手，而是建立一次连接后，双方可以随时互相发消息，延迟低、开销小。

WebSocket 如何建立双向通信？

WebSocket 协议在 TCP 之上，通过一次 HTTP 升级（Upgrade）握手完成连接建立。成功后，连接保持打开状态，客户端和服务端都能主动发送数据（文本或二进制），无需轮询或长连接模拟。

关键点：

• 客户端用 new WebSocket(url) 发起连接，URL 以 ws://（开发）或 wss://（生产，加密）开头
• 连接建立后触发 onopen 事件；出错时触发 onerror；断开时触发 onclose
• 用 ws.send() 发送消息，用 ws.onmessage 接收服务端推送的消息
• 服务端需使用支持 WebSocket 的后端（如 Node.js 的 ws 库、Socket.IO、或 Express + ws 中间件）来监听并广播消息

前端：用原生 WebSocket 写一个聊天界面

HTML 中放一个输入框、一个发送按钮、一个消息列表容器：

立即学习“Java免费学习笔记（深入）”；

<input id="msgInput" placeholder="输入消息">
<button id="sendBtn">发送</button>
<p id="chatBox"></p>

登录后复制

JavaScript 初始化连接并处理交互：

标签： javascript java redis html js 前端 node.js json node npm 防火墙 a