WebSocket通过一次HTTP握手将协议升级为全双工通信，允许客户端与服务器实时交换数据。前端使用原生API创建连接、监听事件并发送消息，后端如Node.js配合ws库处理连接与广播。需注意重连机制、连接状态检查、使用wss加密、消息节流及服务端资源释放，以保障稳定性和安全性。
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它允许客户端和服务器之间进行实时、低延迟的数据交换。相比传统的 HTTP 请求-响应模式，WebSocket 更适合需要频繁交互的应用场景，比如聊天室、在线协作、实时数据监控等。
WebSocket 的基本原理
WebSocket 通过一次 HTTP 握手建立连接后，将协议从 HTTP 升级为 WebSocket（使用 Upgrade: websocket 头），之后通信双方可以随时发送数据，不再受限于请求-响应模式。
在 JavaScript 中，浏览器提供了原生的 WebSocket API，使用简单直观：
- 创建 WebSocket 实例时指定服务器地址（以 ws:// 或 wss:// 开头）
- 监听打开、消息、关闭和错误事件
- 通过 send() 方法向服务端发送数据
前端实现 WebSocket 通信
以下是一个简单的前端代码示例：
立即学习“Java免费学习笔记（深入）”；
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = function(event) {
console.log('连接已建立');
socket.send('你好，服务器！');
};
socket.onmessage = function(event) {
console.log('收到消息：', event.data);
};
socket.onclose = function(event) {
console.log('连接已关闭');
};
socket.onerror = function(error) {
console.error('发生错误：', error);
};
服务端配合（Node.js 示例）
前端的 WebSocket 需要后端支持。使用 Node.js 可借助 ws 库快速搭建服务端：
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', function(socket) {
console.log('客户端已连接');
socket.on('message', function(data) {
console.log('收到：', data.toString());
// 广播给所有客户端
server.clients.forEach(function(client) {
if (client.readyState === WebSocket.OPEN) {
client.send('广播：' + data);
}
});
});
socket.on('close', function() {
console.log('客户端断开');
});
});
注意事项与优化建议
实际项目中使用 WebSocket 时需注意以下几点：
- 连接可能因网络问题中断，建议实现重连机制
- 发送数据前检查 readyState 是否为 OPEN（值为 1）
- 敏感数据应使用 wss://（加密 WebSocket）防止窃听
- 大量消息需考虑节流、队列或压缩处理
- 服务端需管理连接状态，及时释放资源
基本上就这些。WebSocket 让实时交互变得简单直接，掌握它对现代 Web 开发非常有帮助。不复杂但容易忽略的是连接状态管理和异常处理，这部分往往决定用户体验的好坏。
