WebSocket连接成功但无法收到服务器消息怎么办？

问题应该出在服务器端发送的数据格式上。

Wireshark看到数据到了TCP层，不代表它是正确的WebSocket帧。你服务器可能直接用socket.write()写了原始字符串，而不是按照WebSocket协议封装帧。WebSocket数据需要特定的帧格式（opcode、mask、payload length等），浏览器只能解析这种格式的数据。

排查方法：在Chrome DevTools的Network标签页里找到你的WebSocket连接，点开看"Frames"面板。如果服务器消息真的到了，Received列表里会显示；如果显示是空的但Wireshark有数据，那就实锤是服务器发送的帧格式不对。

Python服务端怎么写的？如果用了ws库或者websocket-server库基本不会踩这个坑，但如果用的是原生socket自己写握手和数据传输，大概率是帧封装漏了。

修复思路：要么换用成熟的WebSocket库（比如websockets库），要么自己手动发送消息时加上正确的WebSocket帧头。websockets用法很简单：

import asyncio

import websockets



async def echo(websocket, path):

    async for message in websocket:

        await websocket.send(f"Echo: {message}")



asyncio.get_event_loop().run_until_complete(

    websockets.serve(echo, "localhost", 8080)

)

asyncio.get_event_loop().run_forever()

服务端代码贴出来一眼就能看清问题在哪。

这个问题我遇到过几次，确实是挺让人头疼的。WebSocket连接成功了，但收不到消息，这种情况通常不是浏览器限制的问题，而是双方通信协议或者数据格式没对上。具体来说，可能是以下几个原因导致的。

---

### 1. 检查服务器发送的消息格式
WebSocket的消息传递是基于帧的，服务器发过来的数据必须是合法的UTF-8字符串或者二进制数据。如果你的服务器发的是其他格式（比如直接用bytearray发了一些乱码），客户端就无法正确解析。

**解决方案：**
在Python服务器端确保消息是以字符串形式发送的。例如：

import websocket



# 假设这是你的WebSocket处理逻辑

def send_message(ws):

    ws.send("Hello, client!")  # 确保发送的是字符串

如果发送的是非字符串内容，需要明确指定编码方式。例如：

ws.send(b"Hello, client!")  # 如果是二进制数据，前端需要特殊处理

如果是二进制数据，前端需要用event.data判断类型，并用ArrayBuffer处理。

---

### 2. 检查消息是否被意外丢失
有时候服务器确实发了消息，但由于网络问题或者其他中间层干扰（比如代理、防火墙等），消息可能没到客户端。你提到用Wireshark抓包看到消息确实发出来了，那可以排除这部分问题。不过还是要注意一个细节：Wireshark抓到的消息是不是完整的？有没有碎片化？

**解决方案：**
确保服务器和客户端的WebSocket实现都支持分片（Fragments）。现代浏览器和主流WebSocket库一般都支持，但如果用了自定义实现，可能需要手动拼接。

---

### 3. 检查事件绑定顺序
虽然不太可能，但还是要确认一下：onmessage绑定的时机是否正确。如果绑定事件的时间点不对，可能会错过某些消息。

**解决方案：**
把事件绑定写在WebSocket实例创建之后，确保不会因为异步问题漏掉消息。比如：

const socket = new WebSocket('ws://localhost:8080');



// 立即绑定消息监听器，确保不漏消息

socket.onmessage = (event) => {

  console.log('Received:', event.data);

};



socket.addEventListener('open', () => {

  console.log('Connected!');

});

---

### 4. 检查跨域问题
即使WebSocket连接成功，也可能存在跨域限制影响消息传递。这种情况下，服务器需要显式设置允许的Origin。

**解决方案：**
在Python服务器端配置CORS头。例如：

def handle_handshake(request_headers):

    if "Origin" in request_headers:

        response_headers["Access-Control-Allow-Origin"] = request_headers["Origin"]

确保服务器正确响应了Sec-WebSocket-Accept和Access-Control-Allow-Origin字段。

---

### 5. 检查浏览器缓存或扩展干扰
有时候浏览器本身的缓存机制或者扩展（比如广告拦截插件）可能会干扰WebSocket通信。尽管概率很低，但为了排查方便，可以尝试以下方法：
- 清除浏览器缓存。
- 在隐身模式下测试。
- 换个浏览器试试。

---

### 6. 加入调试信息
最后，加入更多调试信息可以帮助定位问题。比如：
- 在服务端打印每次发送消息的日志。
- 在客户端打印WebSocket的状态变化。

示例代码：

const socket = new WebSocket('ws://localhost:8080');



// 监听所有状态变化

socket.addEventListener('open', () => {

  console.log('Connection opened');

});

socket.addEventListener('close', () => {

  console.log('Connection closed');

});

socket.addEventListener('error', (err) => {

  console.error('Error:', err);

});

socket.onmessage = (event) => {

  console.log('Message received:', event.data);

};

---

### 总结
按照以上步骤逐一排查，基本能找到问题所在。从你的描述来看，最有可能的原因是服务器发送的消息格式不符合WebSocket规范，或者事件绑定顺序有问题。具体来说，先检查服务器端的消息是否是合法的UTF-8字符串，然后再看绑定事件的时机是否正确。

如果还解决不了，可以把服务器的实现代码贴出来，我们一起看看有没有遗漏的地方。反正调试WebSocket这种东西，真的得一点点来，有时候真是让人头大。 😅