websocket连接成功但前端收不到消息，90%因未正确处理消息类型（如前端发binarymessage而java后端@onmessage仅监听textmessage）、连接空闲超时被中间件关闭、或未解析websocket原始帧格式（如php/node原生socket未解码掩码帧）。
WebSocket 连接成功但前端收不到消息，90% 是因为没处理好消息类型、连接状态或帧格式 —— 不是“连不上”，而是“看不见”。
onmessage 从不触发？先确认消息是不是 TextMessage
Java 后端用 @OnMessage 注解默认只监听 TextMessage。如果前端调用 socket.send(new ArrayBuffer()) 或 socket.send(blob)，发的是二进制帧，后端根本不会进这个方法，日志静默，毫无提示。
- 前端检查发送逻辑：
typeof data === 'string'才走sendText；否则必须显式加@OnMessage处理byte[]或ByteBuffer - 后端加一个二进制接收方法：
@OnMessage接收byte[] message，再做new String(message, StandardCharsets.UTF_8) - 浏览器开发者工具 Network → WS → Frames 标签页，看发送的帧类型是「Text」还是「Binary」——这是最直接的判断依据
连接看似正常，但 onmessage 偶尔失灵？检查心跳与空闲断连
服务端（尤其是 Nginx、Spring Gateway、某些云 WAF）常默认 60 秒无数据就主动发 FIN 关闭连接。前端 socket 状态仍显示 OPEN，但后续消息实际已被丢弃。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 在
onopen后立即启动定时器，每 30 秒发一次socket.send('ping')（内容任意，只要非空） - 服务端需响应
pong或至少不关闭该连接；若用 Spring，确认ReactorNettyWebSocketService的maxFramePayloadLength和空闲超时配置已调大 - 小程序特别注意：
onnetworkstatuschange触发时必须主动close()再重连，系统不会自动恢复底层 socket 句柄
收到乱码、空字符串或 json_decode 失败？你读到的是原始 WebSocket 帧
PHP 原生 socket、Node.js net.Socket 或自研服务若未实现 WebSocket 帧解析，socket_read($client, 1024) 拿到的就是带掩码、长度头、扩展字段的二进制帧 —— 不是 UTF-8 文本，也不是 JSON 字符串。
- 必须手动解析前 2 字节：第 1 字节低 4 位是 opcode（0x1=Text，0x2=Binary），第 2 字节最高位是 MASK 位
- MASK 为 1 时，紧随其后的 4 字节是掩码 key，之后所有 payload 数据都要按字节异或这 4 字节循环
- payload length 若为 126 或 127，需额外读 2 或 8 字节扩展长度；跳过这些，
json_decode()必然返回null
前端地址写错导致“连接成功但收不到”？验证客户端可直连性
WebSocket 地址不是部署路径，而是浏览器运行时能真实 TCP 握手的地址。写成 ws://localhost:8080 或 ws://127.0.0.1:8080，只有本机开发环境有效；部署到 Nginx 或用户手机上，必然失败。
- 打开浏览器控制台，执行
new WebSocket('ws://your-real-ip:port/path')，看是否报ERR_CONNECTION_REFUSED或卡在 pending - 服务端抓包（如
tcpdump -i any port 8080）确认 SYN 是否到达，排除防火墙/NAT/SSL 终止层拦截 - wss 场景下，用
openssl s_client -connect your-domain.com:443验证证书链是否完整，中间证书缺失会导致握手静默失败
真正棘手的不是连接失败，而是连接“活着”却像死了一样不收消息 —— 这类问题往往跨协议层、跨设备、跨网络栈，单靠 console.log 很难定位。务必从 Frames 标签页看原始帧，用 tcpdump 看三次握手和 FIN 包，再比对服务端日志里 onOpen 和 onMessage 的时间戳差。漏掉任意一环，排查就会陷入僵局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
