使用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');
});
}