ShareWorker和Worker區別
worker：專屬線程，只針對當前運行環境（HTML 5 Web Workers）
sharedWorker：共享線程，同源策略下，多個運行環境共用同一個線程，包括數據。
方法
- start：開啓連接
- connect：連接
- postMessage：發送數據
- onmessage：接收數據
頁面通信舉例
頁面
<body>
<input type="text" id="input">
<button id="submit">提交</button>
<p id="news"></p>
</body>
<script>
let work = new SharedWorker('work.js');
let port = work.port;
//開啓
port.start();
//通知所有人
port.postMessage({ type: "start" });
//點擊觸發事件
submit.onclick = function (e) {
port.postMessage({
type: "msg",
value: input.value
});
input.value = "";
}
//接收數據
port.onmessage = function (e) {
console.log(e.data)
if (Array.isArray(e.data)) {
let html = "";
e.data.forEach(msg => {
html += `<p>${msg}</p>`;
});
news.innerHTML = html;
} else {
news.innerHTML = e.data;
}
}
</script>
work.js
let connectList = [], msgList = [];
self.onconnect = function (w) {
// 開啓
let port = w.ports[0];
port.start();
// 監聽
port.onmessage = function (e) {
let worker = e.currentTarget, data = e.data;
// 加入到列表
if (connectList.indexOf(worker) === -1) {
connectList.push(worker);
}
//新用戶進入
if (data.type === "start") {
connectList.forEach(item => {
if (item === worker)
item.postMessage("你已進入");
else
item.postMessage("新用戶進入");
})
}
//新消息
if (data.type === "msg") {
msgList.push(data.value);
connectList.forEach(item => {
item.postMessage(msgList);
})
}
}
}