秒懂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)
}
以下是实验结果。
查看10道真题和解析
投递欣旺达等公司10个岗位 >
