秒懂sharedWorker

本文以最简单的方式来了解sharedWorker的基本运用,即从一个标签页发送消息到另外一个标签页。

创建worker

以下便是创建worker的核心代码。

const worker = new SharedWorker('worker.js','my-worker');

这一步，需要在发送标签页，和接收消息的标签页进行。可以理解为双方都通过new SharedWorker()，共享了worker.js文件，代表这两个标签页已经连接到了worker。返回值可以理解为连接到worker的角色。

ps:new SharedWorker()第一个参数是共享的worker文件路径，第二个参数是worker名(不给的话会默认给一个名字)，这个名字可以在chorme浏览器的chrome：//inspect路径可以看到。

点击inspect即可进入worker的控制台，类似于终端，可以看到worker.js里面打印的内容。

发送消息的页面

发送消息的核心代码如下，就一行。

worker.port.postMessage("你想要发送的消息")

可以把它绑定到一个按钮上，来触发发送消息的这个操作。以下是发送消息页面的全部代码。

<!DOCTYPE html>
<html>
<head>
  <title>SharedWorker Example</title>
</head>
<body>
  <h1>Page 1</h1>
  <input type="text" id="message-input">
  <button id="send-button">Send message to Page 2</button>
  <script>
    const worker = new SharedWorker('worker.js','my-worker');// 连接到worker
    const port = worker.port;
    document.getElementById('send-button').addEventListener('click', function() {
      const message = document.getElementById('message-input').value;
      port.postMessage(message);// 发送消息
    });
  </script>
</body>
</html>

这里，我通过在一个按钮上绑定click事件，来获取输入框的内容，并通过发送消息的核心代码来把这个消息发送到worker。

worker接收并转发消息

发送到worker的消息，在worker.js里面需要对其进行处理，包括了接收消息和转发消息的内容。下面是worker.js文件里面的全部内容。

const connections = []; // 创建一个连接池
onconnect = function(e) {
  const port = e.ports[0];
  connections.push(port);// 连接后就把新的链接放到connections数组
  // 监听消息
  port.onmessage = function(e) {
    // 转发消息
    console.log('worker接收到消息！')
    connections.forEach(function(connection) {
      connection.postMessage(e.data);
    });
  };
};

首先是要创建一个连接池connections。

onconnect是连接完成的事件，不用担心没有对它进行命名会报错，因为worker.js不是单纯的js运行脚本。

这里提供一个回调函数，代表连接成功，也就是创建worker那一步成功连接到worker会触发的事件。这里的port和创建worker里面的port是同一个东西。可以通过分别在worker里面和页面里面打印验证。

port.onmessage代表监听消息，这里是在worker里面进行的监听。同样接收一个回调函数，来在worker里面进行接收消息后对应的操作。这里通过遍历连接池里面的连接，分别向池子里面的port发送消息。

接收消息的页面

在接收消息的页面同样也是通过port.onmessage来进行消息的接收。可以通过它来监听到刚刚worker.js文件里面进行转发的消息。进而进行接收到消息后的操作。

下列代码是接收到消息的全部内容，它的操作是将接收到的消息追加到ul里面。

<!DOCTYPE html>
<html>
<head>
  <title>SharedWorker Example</title>
</head>
<body>
  <h1>Page 2</h1>
  <ul id="message-list"></ul>
  <script>
    const worker = new SharedWorker('worker.js','my-worker');
    const port = worker.port;
    
    port.onmessage = function(e) {
      console.log('接收到消息！');
      const message = e.data;
      const li = document.createElement('li');
      li.textContent = message;
      document.getElementById('message-list').appendChild(li);
    };
  </script>
</body>
</html>

回顾

主要的点就是要知道worker.js负责的工作，和发送消息，接收消息需要负责的工作，之后再来找具体的api实现就行了。

建立一个sharedWork非常简单，主要就是几个api。在下面的代码块中罗列出来。通过自由组合，即可实现一些实际的应用啦~

// 连接到worker
const worker = new SharedWorker('worker.js','my-worker');
// 发送消息
port.postMessage('你想要发送的消息')
// 连接后的回调
onconnect = (e) => {
  const port = e.ports[0];
  console.log('这是已连接的port',port);
}
// 接收消息
port.onmessage = (e) => {
    console.log('这是接收到的消息：',e.data)
}