使用WebSocket为什么不适配双端
浏览器环境本身就支持 WebSocket,直接使用 JavaScript 内置的 WebSocket 对象来建立连接。
Node中本身并没有内置 WebSocket 协议的支持,所以需要使用第三方库 ws来实现 WebSocket 功能。
一. 使用跨平台 WebSocket 库
选择 isomorphic-ws 或 universal-websocket-client 这些跨平台的 WebSocket 库。根据运行环境自动选择合适的 WebSocket 实现,从而在 Node.js 和浏览器环境中都能正常工作。
例如,使用 isomorphic-ws,代码实现:
javascript
// 在 Node.js 和浏览器环境中都使用相同的代码
import { WebSocket } from 'isomorphic-ws';
const socket = new WebSocket('ws://example.com');
二. 根据环境选择不同的 WebSocket 实现
if (typeof window !== 'undefined') {
// 浏览器环境
let socket: WebSocket;
console.log('浏览器环境');
socket = new WebSocket('ws://localhost:8080');
// 连接成功时触发
socket.onopen = () => {
console.log('WebSocket 连接成功');
};
// 接收消息时触发
socket.onmessage = (event) => {
console.log('收到服务器消息:', event.data);
if (typeof event.data === 'string') {
const data = JSON.parse(event.data);
}
};
// 连接关闭时触发
socket.onclose = () => {
console.log('WebSocket 连接关闭');
};
// 错误时触发
socket.onerror = (error) => {
console.error('WebSocket 连接错误:', error);
};
} else {
// Node.js 环境
const WebSocket = require('ws');
let socket = null;
socket = new WebSocket('ws://localhost:8080');
socket.on('open', () => {
console.log('Connected to server');
});
socket.on('message', (message: string) => {
console.log(`Received message: ${message}`);
if (typeof message === 'string') {
const data = JSON.parse(message);
console.log(data)
}
});
socket.on('close', () => {
console.log('Disconnected from server');
});
}










