Node.js 和浏览器环境中都使用 WebSocket

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