WebSocket通过单个TCP连接实现全双工通信，适用于实时场景如聊天室和行情推送；相比HTTP轮询，其延迟低、负载小；浏览器使用原生API创建连接并监听open、message、error、close事件以收发消息和处理状态；服务端可用Node.js的ws库搭建，支持广播消息给所有客户端；需关注连接状态readyState及错误重连机制，确保通信稳定。
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，特别适合需要实时交互的应用场景，比如聊天室、在线协作、股票行情推送等。相比传统的 HTTP 轮询，WebSocket 能显著降低延迟和服务器负载。
建立 WebSocket 连接
在浏览器端，JavaScript 提供了原生的 WebSocket API，使用非常简单：
const socket = new WebSocket('ws://localhost:8080');
<p>socket.addEventListener('open', (event) => {
console.log('连接已建立');
socket.send('客户端上线');
});</p>注意 URL 协议是 ws（非加密）或 wss（加密），类似于 HTTPS。
处理消息收发
通过监听 message 事件接收服务器推送的数据：
立即学习“Java免费学习笔记（深入）”；
socket.addEventListener('message', (event) => {
console.log('收到消息:', event.data);
});
发送消息只需调用 send() 方法：
function sendMessage() {
const input = document.getElementById('messageInput');
socket.send(input.value);
input.value = '';
}
服务端实现（Node.js + ws 库）
使用 Node.js 搭建 WebSocket 服务端，推荐 ws 库：
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
<p>server.on('connection', (socket) => {
console.log('客户端已连接');</p><p>socket.on('message', (data) => {
console.log('收到:', data);
// 广播给所有客户端
server.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(data);
}
});
});</p><p>socket.on('close', () => {
console.log('客户端断开');
});
});</p>错误处理与连接状态管理
实际开发中必须监听错误和连接状态变化：
socket.addEventListener('error', (event) => {
console.error('连接出错:', event);
});
<p>socket.addEventListener('close', (event) => {
console.log('连接关闭', event.code, event.reason);
// 可在此实现重连逻辑
setTimeout(() => connect(), 3000);
});</p>检查 socket.readyState 可判断当前状态：
0 - CONNECTING
1 - OPEN
2 - CLOSING
3 - CLOSED
基本上就这些。掌握连接建立、消息通信、异常处理和服务端广播，就能快速开发出稳定的实时应用。关键是保持连接稳定，合理处理断线重连。不复杂但容易忽略细节。基本上就这些。
