HTML5 `Shared Worker`：多标签页共享 Web Worker 实例

HTML5 Shared Worker：你网页里的“公用电话亭”

想象一下，你开了个连锁餐厅，生意红火得不行。每个餐厅都有自己的厨房、服务员和收银台，各自为营，忙得不可开交。突然有一天，你发现有个需求，需要所有餐厅共享一些数据，比如最新的菜谱、会员信息、甚至是餐厅的运营统计。

如果你每个餐厅都单独维护一份数据，那简直是噩梦！同步起来麻烦不说，还浪费资源。这时候，你就需要一个“中央厨房”，专门负责维护这些共享数据，所有餐厅都可以通过它来获取和更新信息。

在Web开发的世界里，Shared Worker 就扮演着这个“中央厨房”的角色。它允许不同的浏览器标签页（或者 iframe）共享同一个 Web Worker 实例，从而实现数据的共享和任务的协同。

什么是Web Worker？先来个小复习

在深入 Shared Worker 之前，我们先简单回顾一下 Web Worker。简单来说，Web Worker 就像一个独立的线程，可以在后台运行 JavaScript 代码，而不会阻塞主线程的渲染和用户交互。这意味着你可以把一些耗时的任务（比如复杂的计算、数据处理等）交给 Web Worker 去处理，让你的网页保持流畅。

Web Worker 分为两种：

Dedicated Worker (专用Worker): 顾名思义，它只能被创建它的那个页面使用，就像你的私人秘书，只为你服务。
Shared Worker (共享Worker): 可以被多个页面共享使用，就像一个公共电话亭，谁都可以用。

Shared Worker：多个标签页的福音

Shared Worker 的核心优势在于“共享”。它允许不同源（协议、域名或端口不同）的页面共享同一个 Worker 实例。这就像一个公共资源，多个网页可以共享它来进行数据处理、状态维护等等。

Shared Worker 怎么用？“公用电话亭”的使用说明

使用 Shared Worker 大致分为以下几个步骤：

创建 Shared Worker 文件: 这和创建普通的 Web Worker 文件差不多，都是一个独立的 JavaScript 文件。例如，我们可以创建一个名为 shared-worker.js 的文件。
创建 Shared Worker 实例: 在需要使用 Shared Worker 的页面中，使用 SharedWorker 构造函数创建一个实例。
```
const myWorker = new SharedWorker('shared-worker.js');
```
建立连接: 与 Dedicated Worker 不同，Shared Worker 需要显式地建立连接。通过 port 属性获取 MessagePort 对象，并调用 start() 方法。
```
const port = myWorker.port;
port.start();
```

发送和接收消息: 使用 postMessage() 方法向 Shared Worker 发送消息，使用 onmessage 事件监听来自 Shared Worker 的消息。

// 向 Shared Worker 发送消息
port.postMessage('Hello from page!');

// 监听来自 Shared Worker 的消息
port.onmessage = function(event) {
  console.log('Received message from Shared Worker:', event.data);
};

Shared Worker 内部逻辑: 在 shared-worker.js 文件中，你需要监听 connect 事件，该事件会在有新的页面连接到 Shared Worker 时触发。在 connect 事件处理函数中，你需要获取 MessagePort 对象，并监听 message 事件来处理来自页面的消息。

onconnect = function(event) {
  const port = event.ports[0];

  port.start(); // 开始消息传递

  port.onmessage = function(event) {
    console.log('Received message from page:', event.data);

    // 处理消息，并回复给页面
    port.postMessage('Hello from Shared Worker!');
  };
};

一个更形象的例子：多人在线聊天室

假设我们要开发一个简单的多人在线聊天室。每个用户在一个独立的标签页中打开聊天室页面。我们需要一个机制来共享聊天消息，让所有用户都能看到最新的消息。

使用 Shared Worker 可以轻松实现这个功能。我们可以创建一个 shared-worker.js 文件，负责维护聊天消息的列表，并将消息广播给所有连接到该 Shared Worker 的页面。

// shared-worker.js
let messages = [];
let ports = []; // 保存所有连接的端口

onconnect = function(event) {
  const port = event.ports[0];
  ports.push(port); // 将新的端口添加到端口列表中

  port.start();

  port.onmessage = function(event) {
    const message = event.data;
    console.log('Received message:', message);

    messages.push(message); // 将消息添加到消息列表中

    // 将消息广播给所有连接的页面
    ports.forEach(p => {
      if (p !== port) { // 排除消息来源页面
        p.postMessage(message);
      }
    });
  };

  // 将历史消息发送给新连接的页面
  messages.forEach(message => {
    port.postMessage(message);
  });

  // 断开连接时，从端口列表中移除该端口
  port.onclose = function() {
    ports = ports.filter(p => p !== port);
  };
};

在聊天室页面中，我们可以创建 Shared Worker 实例，并发送和接收消息。

// 聊天室页面
const myWorker = new SharedWorker('shared-worker.js');
const port = myWorker.port;
port.start();

const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');
const messageList = document.getElementById('messageList');

sendButton.addEventListener('click', function() {
  const message = messageInput.value;
  port.postMessage(message);
  messageInput.value = '';
});

port.onmessage = function(event) {
  const message = event.data;
  const li = document.createElement('li');
  li.textContent = message;
  messageList.appendChild(li);
};

在这个例子中，Shared Worker 就像一个聊天服务器，负责接收和转发消息。每个聊天室页面都通过连接到同一个 Shared Worker 实例来共享聊天消息。

Shared Worker 的优势：优点多得像星星一样

数据共享: 多个页面可以共享数据，避免数据冗余和同步问题。
资源共享: 可以共享计算资源，避免重复计算，提高效率。
状态维护: 可以维护全局状态，方便多个页面协同工作。
跨域通信: 可以在不同源的页面之间进行通信。
持久性: 只要有一个页面连接到 Shared Worker，它就会一直运行，即使关闭了所有页面，Shared Worker 仍然可以继续执行任务。 (需要浏览器支持)

Shared Worker 的局限：也有点小脾气

兼容性: 并非所有浏览器都完全支持 Shared Worker，特别是老版本的浏览器。
安全性: 需要注意跨域安全问题，避免恶意页面连接到 Shared Worker。
调试: 调试 Shared Worker 可能会比较麻烦，需要使用浏览器的开发者工具。
生命周期管理: 需要仔细管理 Shared Worker 的生命周期，避免资源浪费。

Shared Worker 的应用场景：用武之地很广阔

多人协作应用: 在线文档编辑、多人游戏等。
实时数据同步: 股票行情、新闻推送等。
缓存管理: 共享缓存数据，提高页面加载速度。
身份验证: 共享用户身份验证信息，实现单点登录。
日志记录: 集中记录日志信息，方便分析和排错。

Shared Worker vs Dedicated Worker：该选谁？

选择 Shared Worker 还是 Dedicated Worker，取决于你的具体需求。

如果你只需要在单个页面中使用 Web Worker，并且不需要与其他页面共享数据，那么 Dedicated Worker 是一个不错的选择。
如果你需要在多个页面之间共享数据和资源，并且需要维护全局状态，那么 Shared Worker 才是你的菜。

总结：Shared Worker，网页开发的“瑞士军刀”

Shared Worker 是一个强大的工具，可以帮助你构建更高效、更协同的 Web 应用。它就像一个公共的“数据交换中心”，让你的网页可以轻松地共享数据、资源和状态。虽然它也有一些局限性，但只要你掌握了它的用法，就能在很多场景下发挥巨大的作用。

下次你在开发需要多个页面共享数据的应用时，不妨考虑一下 Shared Worker，它可能会给你带来意想不到的惊喜！记住，用好这个“公用电话亭”，你的网页就能更好地互联互通，一起创造更精彩的Web体验！

HTML5 Shared Worker：你网页里的“公用电话亭”

发表回复 取消回复

发表回复取消回复