你想要透彻掌握 WebSocket 的完整用法，我会从核心原理、前后端完整代码、使用场景、核心 API、心跳保活、常见问题等维度，一步步细致讲解，内容通俗易懂，学完就能直接落地开发。
一、WebSocket 核心认知（必懂，理解了用法才通透）
1. WebSocket 是什么？
WebSocket 是 HTML5 新增的一种「全双工、持久化」的网络通信协议，协议标识是 ws://（明文）和 wss://（加密，推荐生产环境用），是 HTTP 协议的补充和升级。
2. 为什么需要 WebSocket？HTTP 协议的痛点
HTTP 协议是 「单工 / 半双工」、「短连接」、「无状态」 的通信模式，有 2 个致命痛点：
- ✘ 通信方向：只能由客户端主动发起请求 → 服务端被动响应，服务端永远不能主动给客户端发消息；
- ✘ 连接状态：每次请求响应完成后，TCP 连接就断开，下次通信需要重新建立连接，开销大；
这就导致 HTTP 无法实现「实时通信」场景（比如聊天、股票行情、扫码登录、消息推送），之前只能用「轮询 / 长轮询」曲线救国，但效率极低、资源浪费严重。
3. WebSocket 核心优势（对比 HTTP 碾压级）
✅ 全双工通信：连接建立后，客户端 ↔ 服务端 双向平等通信，双方都可以主动向对方发送消息，无需谁请求谁；✅ 持久连接：一次握手成功后，TCP 连接会一直保持，直到主动断开，没有频繁的连接建立 / 销毁开销；✅ 轻量级数据传输：通信头信息极小，数据传输效率高；✅ 无同源限制：客户端和服务端建立连接时，不受浏览器同源策略的限制；✅ 基于 TCP：底层复用 TCP 协议，稳定性高、传输可靠。
4. WebSocket 与 HTTP 的关系（重点，易混淆）
WebSocket 不是替代 HTTP，而是 基于 HTTP 完成握手，之后脱离 HTTP 独立通信，二者关系：
二、WebSocket 完整通信流程（极简版，先建立全局认知）
不管前端用原生 JS、Vue/React，后端用 Java/Node/PHP/Python，所有 WebSocket 的通信流程完全一致，只有3 个核心步骤，记住这个流程，所有用法都围绕它展开：
✅ 核心三步流程（通用，重中之重）
三、前端 WebSocket 用法（原生 JS，最全 API，无框架依赖，通用所有前端项目）
前端是 WebSocket 最核心的使用端，浏览器原生内置了 WebSocket 对象，无需引入任何依赖，直接使用，语法完全标准化，Vue/React/ 小程序里的用法和原生 JS 一致，只是把代码放到对应的生命周期即可。
✅ 1. 前端完整代码（可直接复制运行，含所有核心功能）
javascript
运行
// 1. 创建WebSocket实例，建立连接（核心）
// 语法：new WebSocket(协议地址)
// 本地测试：ws://localhost:8080 生产加密：wss://你的域名:端口
let ws = new WebSocket('ws://localhost:8080');
// ————————– 2. 核心事件：4个必用事件（监听连接状态+收发消息） ————————–
/**
* ✅ 事件1：onopen – 连接成功（握手成功）触发【必写】
* 连接建立后，只会触发1次，适合做：初始化、登录鉴权、发送首次请求等
*/
ws.onopen = function () {
console.log('✅ WebSocket 连接成功！');
// 连接成功后，客户端主动给服务端发消息（send方法）
ws.send('哈喽，服务端，我是客户端，连接成功啦！');
};
/**
* ✅ 事件2：onmessage – 收到服务端的消息时触发【核心必写】
* 只要服务端给客户端发消息，这个事件就会触发，实时接收消息
* event.data：固定属性，拿到服务端发送的「消息内容」（字符串格式）
*/
ws.onmessage = function (event) {
console.log('📥 收到服务端消息：', event.data);
// 业务处理：比如渲染聊天消息、更新实时数据、处理推送通知等
// 如果服务端发的是JSON对象，需要解析：const data = JSON.parse(event.data);
};
/**
* ✅ 事件3：onclose – 连接关闭时触发【必写】
* 触发场景：主动关闭连接、网络断开、服务端下线、超时等
* event.code：关闭状态码，event.reason：关闭原因
*/
ws.onclose = function (event) {
console.log('❌ WebSocket 连接关闭', event.code, event.reason);
// 业务处理：提示用户、清空实时数据、尝试重连等
};
/**
* ✅ 事件4：onerror – 连接发生错误时触发【必写】
* 触发场景：地址错误、服务端未启动、网络异常、跨域配置错误等
* 错误发生后，大概率会紧接着触发 onclose 事件
*/
ws.onerror = function (error) {
console.error('❌ WebSocket 连接异常：', error);
};
// ————————– 3. 核心方法：2个必用方法（主动发消息+主动关连接） ————————–
/**
* ✅ 方法1：ws.send(msg) – 客户端主动发送消息给服务端【核心必写】
* 入参 msg：必须是「字符串类型」！！！
* 注意：如果要发送对象/数组，必须先转JSON：JSON.stringify({name: '张三', age: 20})
*/
// 示例：发送JSON对象
const userInfo = { userId: 1001, userName: '前端小菜鸡' };
ws.send(JSON.stringify(userInfo));
/**
* ✅ 方法2：ws.close() – 客户端主动关闭连接【必写】
* 触发场景：页面关闭、用户退出、不需要实时通信时（比如离开聊天页）
* 调用后，会触发自身的 onclose 事件，服务端也会收到关闭通知
*/
// 比如：页面销毁时关闭连接（Vue的beforeDestroy、React的componentWillUnmount）
window.addEventListener('unload', () => {
ws.close();
console.log('📤 客户端主动关闭连接');
});
// ————————– 4. 核心属性：1个常用属性 ————————–
/**
* ✅ readyState – 查看当前WebSocket的「连接状态」【常用】
* 有4个固定值，只读，不能修改：
* 0: CONNECTING – 正在连接中（刚new出来，还没握手）
* 1: OPEN – 连接成功（可以正常收发消息，最常用）
* 2: CLOSING – 正在关闭中（调用了close，还没完全断开）
* 3: CLOSED – 连接已关闭（无法收发消息）
*/
console.log('当前连接状态：', ws.readyState);
// 业务中常用：发送消息前判断连接是否正常，避免报错
if (ws.readyState === 1) {
ws.send('确保连接正常时发送的消息');
}
✅ 2. 前端核心注意事项（避坑重点，90% 的前端问题都在这里）
四、后端 WebSocket 用法（多语言极简实战案例，够用 + 能用）
WebSocket 是客户端 – 服务端双向协议，必须有服务端配合才能运行，后端的核心职责是：启动 WebSocket 服务、监听客户端连接、接收客户端消息、主动给客户端发消息、关闭连接。
这里提供 3 种主流后端语言的极简完整案例，全部可直接复制运行，代码极简无冗余，适合入门和实战，也是企业开发中最常用的方案：
✅ 方案 1：Node.js 实现 WebSocket 服务（最简单，零配置，推荐入门测试）
Node.js 有一个超好用的第三方包 ws，专门处理 WebSocket，轻量、高效、文档友好，无需配置任何服务器，装包即运行。
步骤 1：初始化 + 安装依赖
bash
运行
# 新建文件夹，初始化
npm init -y
# 安装ws包
npm install ws
步骤 2：完整服务端代码（server.js）
javascript
运行
const WebSocket = require('ws');
// 创建WebSocket服务，监听8080端口
const wss = new WebSocket.Server({ port: 8080 });
console.log('✅ Node.js WebSocket服务启动成功，监听端口：8080');
// 监听「客户端连接」事件：有客户端连上来就触发
wss.on('connection', (ws) => {
console.log('📌 有一个客户端成功连接');
// 监听「客户端发送的消息」事件：接收客户端消息
ws.on('message', (msg) => {
console.log('📥 收到客户端消息：', msg.toString());
// 服务端主动给「当前连接的客户端」发消息
ws.send(`我收到你的消息啦：${msg.toString()}`);
// 【进阶】广播消息：给「所有连接的客户端」发消息（比如群聊）
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(`广播：有客户端说：${msg.toString()}`);
}
});
});
// 监听「客户端断开连接」事件
ws.on('close', () => {
console.log('📌 客户端断开连接');
});
// 监听「连接错误」事件
ws.on('error', (err) => {
console.error('❌ 连接异常：', err);
});
});
运行
bash
运行
node server.js
此时前端连接 ws://localhost:8080 即可正常通信！
✅ 方案 2：Java 实现 WebSocket 服务（SpringBoot 主流方案，企业级）
Java 开发中，SpringBoot 是绝对主流，SpringBoot 2.x 之后内置了 WebSocket 支持，无需引入额外依赖，配置极简，适合后端 Java 开发同学。
步骤 1：核心配置类（开启 WebSocket）
java
运行
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
@Configuration
@EnableWebSocket // 开启WebSocket支持
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
// 配置WebSocket地址：ws://localhost:8080/ws
registry.addHandler(new MyWebSocketHandler(), "/ws")
.setAllowedOrigins("*"); // 允许所有跨域（生产环境可指定域名）
}
}
步骤 2：核心处理器（处理连接 + 收发消息）
java
运行
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
public class MyWebSocketHandler extends TextWebSocketHandler {
// 存储所有连接的客户端
private static final CopyOnWriteArraySet<WebSocketSession> sessions = new CopyOnWriteArraySet<>();
// 连接成功触发
@Override
public void afterConnectionEstablished(WebSocketSession session) {
sessions.add(session);
System.out.println("✅ 客户端连接成功，当前在线数：" + sessions.size());
}
// 接收客户端消息触发
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {
String msg = message.getPayload();
System.out.println("📥 收到客户端消息：" + msg);
// 服务端给客户端发消息
session.sendMessage(new TextMessage("服务端已收到：" + msg));
}
// 连接关闭触发
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
sessions.remove(session);
System.out.println("❌ 客户端断开连接，当前在线数：" + sessions.size());
}
}
运行 SpringBoot 项目，前端连接 ws://localhost:8080/ws 即可通信。
✅ 方案 3：Python 实现 WebSocket 服务（FastAPI 极简方案）
Python 主流的 WebSocket 方案是 FastAPI（原生支持），代码极简，适合 Python 后端开发同学：
python
运行
from fastapi import FastAPI, WebSocket
from fastapi.responses import HTMLResponse
app = FastAPI()
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
await websocket.accept() # 接受客户端连接
print("✅ 客户端连接成功")
while True:
data = await websocket.receive_text() # 接收客户端消息
print(f"📥 收到消息：{data}")
await websocket.send_text(f"服务端已收到：{data}") # 发送消息给客户端
运行后，前端连接 ws://localhost:8000/ws 即可通信。
五、WebSocket 心跳机制 & 断线重连（实战必做，重中之重！）
这是 WebSocket 生产环境必须实现的功能，也是很多初学者学完基础用法后，遇到的最大痛点：为什么我的 WebSocket 连接会莫名断开？为什么网络恢复后连不上？
✅ 1. 为什么需要「心跳保活 + 断线重连」？
WebSocket 是持久连接，但在实际生产环境中，有很多「隐形断开」的场景：
这种断开是「静默断开」：客户端的 onclose 事件不会立刻触发，客户端以为连接还在，发消息时才发现失败，体验极差。
✅ 2. 心跳机制原理（简单易懂）
心跳 = 客户端和服务端之间的「定时问候」，证明对方还活着。
- 规则：客户端每隔固定时间（比如 10 秒）给服务端发送一个「心跳消息」（比如：ping）；
- 服务端收到心跳消息后，必须回复一个「心跳响应」（比如：pong）；
- 意义：只要能正常收发心跳，就证明连接是存活的；如果收不到响应，就判定为连接断开，触发重连。
✅ 3. 前端完整实现「心跳 + 断线重连」（可直接复制，生产可用）
在之前的原生前端代码基础上，新增心跳和重连逻辑，无侵入，不影响原有业务：
javascript
运行
let ws = null;
let heartBeatTimer = null; // 心跳定时器
let reconnectTimer = null; // 重连定时器
const wsUrl = 'ws://localhost:8080';
const heartBeatInterval = 10000; // 心跳间隔：10秒
const reconnectInterval = 3000; // 重连间隔：3秒
// 初始化WebSocket连接
function initWebSocket() {
ws = new WebSocket(wsUrl);
ws.onopen = function () {
console.log('✅ 连接成功');
startHeartBeat(); // 连接成功，启动心跳
ws.send('连接成功，请求登录');
};
ws.onmessage = function (event) {
const msg = event.data;
console.log('📥 收到消息：', msg);
// 收到服务端的pong，说明心跳正常，无需处理，重置定时器即可
if (msg === 'pong') return;
// 业务消息处理…
};
ws.onclose = function () {
console.log('❌ 连接关闭，准备重连');
stopHeartBeat(); // 关闭心跳
startReconnect(); // 启动重连
};
ws.onerror = function () {
console.error('❌ 连接异常');
stopHeartBeat();
startReconnect();
};
}
// 启动心跳：定时发送ping
function startHeartBeat() {
heartBeatTimer = setInterval(() => {
if (ws.readyState === 1) {
ws.send('ping'); // 发送心跳包
} else {
stopHeartBeat();
}
}, heartBeatInterval);
}
// 停止心跳
function stopHeartBeat() {
clearInterval(heartBeatTimer);
heartBeatTimer = null;
}
// 启动重连：失败后每隔3秒重试一次
function startReconnect() {
if (reconnectTimer) return; // 避免重复创建定时器
reconnectTimer = setInterval(() => {
console.log('🔄 尝试重连…');
initWebSocket();
// 重连成功后，清除重连定时器
if (ws.readyState === 1) {
clearInterval(reconnectTimer);
reconnectTimer = null;
}
}, reconnectInterval);
}
// 页面加载时初始化
window.onload = initWebSocket;
// 页面关闭时销毁
window.onunload = function () {
ws.close();
stopHeartBeat();
clearInterval(reconnectTimer);
};
✅ 服务端配合：只需要在收到 ping 消息时，回复 pong 即可，无需额外逻辑，非常简单。
六、WebSocket 适用场景 & 不适用场景（选型必看）
✅ 适合用 WebSocket 的场景（实时性要求高，双向通信）
这是 WebSocket 的主场，这些场景用 HTTP 实现会非常低效，甚至无法实现：
❌ 不适合用 WebSocket 的场景（别滥用）
WebSocket 是「持久连接」，会占用服务端资源，以下场景用 HTTP 更合适：
七、WebSocket 常见面试题 & 高频问题（查漏补缺）
Q1：WebSocket 和 HTTP 的区别？
答：核心 3 点：
Q2：WebSocket 有同源限制吗？
答：客户端连接时，不受浏览器同源策略限制（可以跨域连接任意服务端），但服务端可以通过配置，限制允许的客户端域名，防止非法连接。
Q3：WebSocket 如何实现鉴权？
答：主流 2 种方式（生产必用，防止非法连接）：
Q4：WebSocket 支持二进制传输吗？
答：支持！ws.send() 不仅可以传字符串，还可以传 Blob、ArrayBuffer 二进制数据，适合传输图片、文件等。
