Mock-Socket是最轻量可控的前端WebSocket测试方案，它自动替换全局WebSocket、支持连接/消息/错误全生命周期模拟，三行代码即可启动可交互服务器，无需修改业务代码。
直接用 mock-socket 启动一个本地 WebSocket 服务，是最轻量、最可控的前端测试方式。它不依赖真实后端，也不需要改业务代码，连 WebSocket 构造函数都不用动。
为什么不用自己写 FakeWebSocket 类
手写 FakeWebSocket 看似简单，但很快会遇到几个硬伤：
-
readyState变化时机难模拟（比如从CONNECTING到OPEN的延迟） - 无法响应
onerror或触发close事件的真实行为 - 多客户端并发连接时，消息广播、连接隔离等逻辑极易出错
- 不支持
send()后的bufferedAmount反馈，导致前端重发逻辑误判
mock-socket 启动一个可交互的服务器
安装后只需三行代码就能跑起来，且默认自动替换全局 WebSocket：
npm install mock-socket
在测试入口或 beforeAll 中：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
import { Server } from 'mock-socket';
const server = new Server('ws://localhost:8080');
server.on('connection', (socket) => {
socket.on('message', (data) => {
socket.send(`echo: ${data}`); // 响应客户端消息
});
});
- 客户端用
new WebSocket('ws://localhost:8080')即可直连，无需任何适配 - 多个 tab 或多个
WebSocket实例会各自建立独立连接，互不干扰 - 调用
server.close()可主动断开所有连接，适合清理测试上下文
如何触发 onError 和 onClose 场景
真实网络异常很难稳定复现，但 mock-socket 提供了明确的控制点：
- 手动关闭某连接：
socket.close(4001, 'Simulated network error')→ 触发客户端onclose与code/reason - 发送非法数据：
socket.send(new ArrayBuffer(0))→ 在某些浏览器下会触发onerror - 不调用
socket.send()而直接socket.close()→ 模拟服务端静默断连 - 注意：不要在
socket.on('close')里再调socket.close()，会报InvalidStateError
测试中容易漏掉的连接状态细节
很多前端逻辑只处理 onopen 和 onmessage，却忽略了连接建立前后的“毛刺”：
-
WebSocket.CONNECTING期间调用send()不会报错，但消息会进队列，直到OPEN才真正发出 —— 这个行为必须被测试覆盖 - 服务端在
connection回调里立即send()，客户端可能收不到（因onopen尚未触发），需靠onmessage兜底 -
mock-socket默认不模拟 TLS 握手延迟，若要测wss://场景下的超时，得手动加setTimeout包裹socket.send()
