共计 1526 个字符，预计需要花费 4 分钟才能阅读完成。
参考
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 服务才可以正常运行
另外我还画了一个简单的模型图，希望能帮助你加深理解
正文完
发表至： javascript
2019-07-08
