WebSocket 是一种基于单个 TCP 连接的全双工通信协议，支持浏览器与服务器实时双向交互；其特点包括一次握手、低延迟、帧传输、原生心跳与重连机制，前端通过 new WebSocket() 创建并监听 onopen/onmessage/onclose/onerror 事件实现通信。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它让浏览器和服务器之间可以持续保持连接，实现真正的实时双向数据交换。相比传统 HTTP 的“请求-响应”模式，WebSocket 只需一次握手建立连接，之后双方可随时主动发送消息，延迟低、开销小，特别适合聊天、实时通知、协同编辑、行情推送等场景。

WebSocket 的核心特点

• 连接建立后，客户端和服务端都能主动发消息（全双工）
• 复用一个长连接，避免频繁 HTTP 请求的握手开销
• 数据以帧（frame）为单位传输，支持文本（UTF-8）和二进制格式
• 原生支持心跳、错误重连、关闭流程等机制
• 浏览器中通过 new WebSocket(url) 即可创建，无需额外库

JavaScript 中创建和使用 WebSocket

基本用法非常简洁，关键在于监听几个核心事件：

• onopen：连接成功建立时触发，可在此发送首次消息
• onmessage：收到服务器消息时触发，event.data 是内容（字符串或 Blob）
• onerror：发生网络或协议错误时触发（不表示断连）
• onclose：连接关闭时触发，可通过 event.code 和 event.reason 查看原因

发送消息只需调用 ws.send(data)，data 可以是字符串、ArrayBuffer 或 Blob。

一个最小可用示例

注意：需确保后端已运行 WebSocket 服务（如 ws://localhost:8080）

前端设计引擎

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

const ws = new WebSocket('ws://localhost:8080');<br><br>ws.onopen = () => {<br>  console.log('已连接');<br>  ws.send('Hello Server');<br>};<br><br>ws.onmessage = (event) => {<br>  console.log('收到：', event.data); // 可能是字符串或 ArrayBuffer<br>};<br><br>ws.onclose = (event) => {<br>  console.log('连接关闭，代码：', event.code, '原因：', event.reason);<br>};<br><br>ws.onerror = (error) => {<br>  console.error('WebSocket 错误：', error);<br>};

实用建议与常见注意事项

• 连接地址必须是 ws://（开发）或 wss://（生产，类比 https），不能用 http://
• 页面卸载前建议手动调用 ws.close()，避免资源泄漏
• 网络不稳定时连接可能意外断开，应实现自动重连逻辑（如指数退避）
• 接收二进制数据时，设置 ws.binaryType = 'arraybuffer' 更易处理
• 不要直接在 onmessage 中执行耗时操作，必要时用 requestIdleCallback 或 Web Worker 分流

基本上就这些。WebSocket API 本身很轻量，难点通常在服务端实现、连接状态管理、消息协议设计和异常容错上。前端只要理解好生命周期和事件流，就能稳稳撑起实时交互。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南