Web Worker 怎样完成WebSocket

Web Worker 可以使用 WebSocket API 来与服务器建立 WebSocket 连接，并通过消息传递机制与主线程进行通信。下面是一个简单的示例：

在主线程中创建一个 Web Worker，并向其发送 WebSocket 的连接参数：

const worker = new Worker('worker.js');
const wsUrl = 'ws://localhost:8080';
worker.postMessage({ type: 'connect', url: wsUrl });

在 Web Worker 中，接收连接参数，并建立 WebSocket 连接：

let socket;
self.addEventListener('message', (event) => {
  const { type, url } = event.data;
  if (type === 'connect') {
    socket = new WebSocket(url);
    socket.onopen = () => {
      console.log('WebSocket connected');
    };
    socket.onmessage = (event) => {
      console.log('Received message:', event.data);
      // 将消息发送给主线程
      self.postMessage({ type: 'message', data: event.data });
    };
    socket.onclose = () => {
      console.log('WebSocket closed');
    };
  }
});

在 Web Worker 中，也可以通过 socket.send() 方法向服务器发送消息。当收到来自主线程的消息时，可以通过 self.postMessage() 方法将消息发送回主线程。

需要注意的是，由于 Web Worker 是在单独的线程中执行的，因此它无法直接访问页面中的 DOM 元素。如果需要更新页面中的内容，可以通过消息传递机制将数据发送给主线程，由主线程来更新页面。