websocket连接建立后需监听message事件处理服务器消息，event.data为接收内容，推荐用json.stringify()发送、json.parse()解析；需配合onerror、onclose及try...catch做异常和状态处理，并按type字段路由分发消息。
WebSocket 连接建立后，通过监听 message 事件来接收并处理服务器发来的消息。
监听 message 事件
WebSocket 实例提供 onmessage 属性（或用 addEventListener('message', ...)），当服务器发送数据时触发。该事件的 event.data 就是接收到的消息内容。
- 如果服务端发送的是字符串（如 JSON），
event.data类型为string - 如果服务端发送的是二进制（如
ArrayBuffer或Blob），event.data类型对应为ArrayBuffer或Blob，需额外解析 - 推荐统一使用
JSON.stringify()发送、JSON.parse()解析，便于结构化通信
基础处理示例
常见写法如下：
const ws = new WebSocket('wss://example.com/chat');
ws.onopen = () => {
console.log('连接已建立');
};
ws.onmessage = (event) => {
try {
const data = JSON.parse(event.data); // 假设是 JSON 字符串
console.log('收到消息:', data);
// 根据 data.type 或其他字段做不同处理
if (data.type === 'chat') {
renderChatMessage(data.content);
} else if (data.type === 'system') {
showNotification(data.message);
}
} catch (e) {
console.warn('消息解析失败，原始数据:', event.data);
}
};
注意错误与异常处理
仅监听 message 不够，还需关注连接状态和错误：
- 用
ws.onerror捕获连接过程中的底层错误（如网络中断、跨域失败） - 用
ws.onclose处理连接关闭（可能是服务端主动断开或网络异常） - 在
onmessage中加try...catch防止非法 JSON 导致脚本中断 - 避免在未检查
ws.readyState === WebSocket.OPEN时调用ws.send()
区分消息类型与路由分发
实际项目中建议对消息做简单协议设计，比如约定统一格式：
{
"id": "msg_123",
"type": "user_join",
"payload": { "userId": "u456", "name": "Alice" },
"timestamp": 1717023456000
}
然后用一个中央处理器分发：
- 定义
handlers = { user_join: handleUserJoin, chat: handleChat, ... } - 收到消息后根据
data.type查找并执行对应 handler - 便于解耦、测试和后期扩展
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
