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