WebSocket是一种基于TCP的全双工通信协议，适用于实时Web应用，相比轮询显著降低延迟和负载。通过JavaScript的原生API可直接创建连接：const socket = new WebSocket('ws://localhost:8080');并监听onopen、onmessage、onclose和onerror事件处理通信过程。发送消息使用socket.send()方法，支持字符串、Blob或ArrayBuffer。服务端常用Node.js库实现，如轻量高效的ws库：const WebSocket = require('ws');const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', function connection(ws) { ws.on('message', function incoming(message) { wss.clients.forEach(function each(client) { if (client !== ws && client.readyState === WebSocket.OPEN) { client.send(message); } }); }); });或功能丰富的Socket.IO，支持自动重连、房间管理等。服务端示例：const io = require('socket.io')(8080);io.on('connection', (socket) => { socket.on('chat message', (msg) => { io.emit('chat message', msg); }); });客户端引入<script src="/socket.io/socket.io.js"></script>后使用const socket = io('http://localhost:8080');接收和发送消息。典型应用场景包括聊天应用、实时通知、协同编辑、在线游戏和数据监控面板，均依赖低延迟双向通信提升体验。
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，特别适合需要实时交互的 Web 应用。相比传统的轮询或长轮询方式，WebSocket 能显著降低延迟和服务器负载，是实现 JavaScript 实时通信的核心技术之一。
WebSocket 基本使用方法
在浏览器端，JavaScript 提供了原生的 WebSocket API，使用起来非常直接。
创建连接：通过 new WebSocket(url) 即可建立与服务端的 WebSocket 连接。URL 通常以 ws:// 或 wss:// 开头。
示例代码：
立即学习“Java免费学习笔记（深入）”；
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = function(event) {
console.log('连接已建立');
};
socket.onmessage = function(event) {
console.log('收到消息：', event.data);
};
socket.onclose = function(event) {
console.log('连接已关闭');
};
socket.onerror = function(error) {
console.error('发生错误：', error);
};
发送消息：
使用 socket.send() 方法向服务端发送数据，支持字符串、Blob 或 ArrayBuffer。
socket.send('Hello Server!');
服务端实现方案
要支持 WebSocket，服务端也需要相应实现。常见 Node.js 框架中，ws 和 Socket.IO 是两个主流选择。
使用 ws 库（轻量高效）：ws 是一个简洁高效的 WebSocket 库，适合自定义通信逻辑。
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('收到：', message);
// 广播给所有客户端
wss.clients.forEach(function each(client) {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
使用 Socket.IO（功能丰富）：
Socket.IO 提供自动重连、房间管理、广播等高级功能，并兼容不支持 WebSocket 的环境。
服务端：
const io = require('socket.io')(8080);
io.on('connection', (socket) => {
socket.on('chat message', (msg) => {
io.emit('chat message', msg); // 广播
});
});
客户端：
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io('http://localhost:8080');
socket.on('chat message', (msg) => {
console.log('收到：', msg);
});
socket.emit('chat message', 'Hi everyone!');
</script>
实际应用场景
WebSocket 特别适用于以下场景：
- 聊天应用：用户发送消息后，其他用户即时接收
- 实时通知：如订单状态更新、系统提醒
- 协同编辑：多个用户同时编辑文档，内容实时同步
- 在线游戏：玩家操作需低延迟同步
- 数据监控面板：服务器指标实时刷新
在这些场景中，WebSocket 避免了频繁 HTTP 请求，提升了响应速度和用户体验。
注意事项与优化建议
虽然 WebSocket 强大，但在实际使用中仍需注意以下几点：
- 连接状态管理：监听 onopen、onclose，确保连接可用
- 心跳机制：定期发送 ping/pong 消息防止连接被中间代理断开
- 重连策略：网络中断后应尝试重新连接，可采用指数退避
- 消息序列化：建议统一使用 JSON 格式传输结构化数据
- 安全性：使用 wss:// 加密传输，验证连接来源（Origin 检查）
- 服务端压力：大量并发连接需考虑集群部署与负载均衡
基本上就这些。WebSocket 让前端实时通信变得简单高效，合理使用能极大提升应用体验。
