WebSocket基于TCP实现全双工通信，通过HTTP握手升级协议后进行持久化双向数据传输，适用于聊天、通知等高频交互场景；前端使用JavaScript的WebSocket API建立连接并监听事件，后端可用Node.js的ws库创建服务器；需注意代理配置、自动重连、JSON格式消息及安全认证等问题。
HTML5 WebSocket 实现了客户端与服务器之间的全双工通信，允许数据在浏览器和服务器之间双向、实时地传输。相比传统的 HTTP 请求-响应模式，WebSocket 更适合需要高频交互的场景，比如聊天应用、实时通知、在线游戏等。
WebSocket 通信的基本原理
WebSocket 协议建立在 TCP 基础之上，通过一次 HTTP 握手升级连接，之后便脱离 HTTP，进入持久化的双向通信状态。
握手阶段：客户端发送一个带有特殊头信息的 HTTP 请求，请求升级为 WebSocket 协议。服务器确认后返回 101 状态码（切换协议），完成握手。
数据传输阶段：握手成功后，客户端和服务器可以随时互相发送数据，无需等待请求。数据以“帧”（frame）的形式传输，支持文本和二进制格式。
立即学习“前端免费学习笔记（深入）”；
连接保持：连接一旦建立，会一直保持打开状态，直到某一方主动关闭或网络中断。这减少了频繁建立连接的开销。
前端 WebSocket 使用方法
在浏览器中使用 JavaScript 创建 WebSocket 连接非常简单，只需实例化 WebSocket 对象并监听事件。
示例代码：
// 创建 WebSocket 连接，假设服务端运行在 ws://localhost:8080
const socket = new WebSocket('ws://localhost:8080');
// 连接成功时触发
socket.onopen = function(event) {
console.log('连接已建立');
socket.send('你好，服务器！');
};
// 接收服务器消息
socket.onmessage = function(event) {
console.log('收到消息：' + event.data);
};
// 处理错误
socket.onerror = function(event) {
console.error('通信出错：', event);
};
// 连接关闭时触发
socket.onclose = function(event) {
console.log('连接已关闭');
};
后端实现 WebSocket 服务（Node.js 示例）
使用 Node.js 和 ws 库可以快速搭建一个 WebSocket 服务。
安装依赖：
npm install ws服务端代码：
const WebSocket = require('ws');
// 创建 WebSocket 服务器，监听 8080 端口
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log('客户端已连接');
// 接收客户端消息
ws.on('message', function(data) {
console.log('收到：' + data);
// 回 echo 消息
ws.send('服务器收到：' + data);
});
// 连接关闭
ws.on('close', function() {
console.log('客户端断开连接');
});
});
console.log('WebSocket 服务器运行在 ws://localhost:8080');
注意事项与优化建议
- 确保服务端支持 WebSocket 协议，Nginx 或负载均衡器需配置代理 WebSocket 连接（设置 Upgrade 和 Connection 头）
- 处理网络异常时，前端可实现自动重连机制
- 消息格式推荐使用 JSON，便于前后端解析
- 注意安全问题，验证连接来源（Origin）、用户身份认证等
- 大量并发连接时，考虑使用集群和消息中间件（如 Redis Pub/Sub）
基本上就这些。WebSocket 让实时通信变得简单高效，掌握其基本用法后，可以轻松构建各类实时交互功能。
