WebSocket通过一次HTTP握手建立持久化TCP连接，实现客户端与服务器间的全双工实时通信，适用于聊天室、通知等高频交互场景；前端使用原生API监听open、message等事件，后端可用Node.js的ws库创建服务并处理连接与消息收发，实际应用需考虑心跳检测、JSON消息格式、WSS加密及多实例同步等细节。
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，允许客户端与服务器之间实时交换数据。相比传统的 HTTP 请求-响应模式，WebSocket 能实现真正的双向通信，非常适合需要高频交互的应用场景，比如聊天室、实时通知、在线协作等。
WebSocket 基本概念
WebSocket 协议通过一次 HTTP 握手升级连接，之后客户端和服务器可以随时主动发送数据。连接建立后，数据以“帧”（frame）的形式传输，支持文本和二进制格式。
关键特点包括：
- 持久化连接，避免重复握手开销
- 低延迟，适合实时通信
- 支持双向通信，服务端可主动推送消息
- 基于事件驱动模型（open、message、error、close）
前端 JavaScript 实现
在浏览器中使用原生 WebSocket API 可轻松建立连接并监听事件。
立即学习“Java免费学习笔记（深入）”；
const socket = new WebSocket('ws://localhost:8080');
socket.addEventListener('open', () => {
console.log('连接已建立');
socket.send('你好，服务器！');
});
socket.addEventListener('message', (event) => {
console.log('收到消息：', event.data);
});
socket.addEventListener('error', (err) => {
console.error('连接出错：', err);
});
socket.addEventListener('close', () => {
console.log('连接已关闭');
});
说明：
- ws:// 表示普通 WebSocket，wss:// 为加密版本（类似 HTTPS）
- 使用 addEventListener 或直接赋值 onmessage 等属性均可
- send() 方法可用于发送字符串或 Blob/ArrayBuffer 数据
Node.js 后端实现
使用 Node.js 搭建 WebSocket 服务，推荐使用 ws 库（轻量高效）。
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('客户端已连接');
ws.on('message', (data) => {
console.log('收到:', data.toString());
// 回传消息给客户端
ws.send(`服务器回复: ${data}`);
});
ws.send('欢迎连接到 WebSocket 服务！');
});
说明：
- WebSocket.Server 创建监听服务
- 每个连接触发 connection 事件，返回一个 ws 实例
- 可通过广播方式向所有客户端发消息：
wss.clients.forEach(client => client.send(data))
实际应用建议
在真实项目中需考虑以下问题：
- 连接状态管理：重连机制、心跳检测防止断连
- 消息格式统一：建议使用 JSON 格式传递 type 和 data 字段
- 安全性：校验 Origin、使用 WSS 加密、认证 Token 传递
- 服务扩展：高并发下可结合 Redis 实现多实例消息同步
基本上就这些。WebSocket 让前后端实时通信变得简单直接，掌握基础用法后可根据业务需求扩展功能。不复杂但容易忽略细节，比如异常处理和连接恢复策略。
