参考
https://developer.mozilla.org...
目标
在不使用webSocket和轮询的情况下，实现页面之间的实时通信
SharedWorked如何使用
使用SharedWorked可以创建一个多页面共享的进程，通过这种方式来实现多页面之间的消息互通
- 先创建'worker.js'文件，写入代码
var portList = [];
onconnect = function(e) {
var port = e.ports[0];
portList.push(port);
console.log(port)
port.onmessage = function(e) {
var workerResult = e.data;
portList.map(item=>{
// item!=port&&item.postMessage(workerResult); /**不发给自己 */
item.postMessage(workerResult); /**发给自己 */
});
}
}这个文件在页面中会被引用，用来创建一个共享进程对象。代码中维护了一个连接对象池，定义了简单的事件和方法。
- 新建一个web页面引用'worker.js'，定义一些简单的事件和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container">
</div>
<input type="text" id="number3">
<button onclick="send()">send</button>
</body>
<script>
var squareNumber = document.querySelector('#number3');
var container = document.querySelector('#container');
if (!!window.SharedWorker) {
var myWorker = new SharedWorker("worker.js");
myWorker.port.onmessage = function(e) {
console.log('Message received from worker' + e.data);
var msgData = JSON.parse(e.data);
var msg = `sender:${msgData.sender},content:${msgData.content}`;
appendMessag(msg);
}
}
function send() {
var msgData = {
sender:"index2",
content:squareNumber.value
}
var msg = JSON.stringify(msgData);
myWorker.port.postMessage(msg);
}
function appendMessag(msg){
var ele = document.createElement("p");
ele.innerHTML = msg;
container.appendChild(ele);
}
</script>
</html>- 重复步骤2,可以再创建一个或多个页面
- 由于SharedWorker遵循同源策略，所以你要启动一个简单的web服务才可以正常运行
另外我还画了一个简单的模型图，希望能帮助你加深理解
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。