参考

https://developer.mozilla.org...

目标

在不使用webSocket和轮询的情况下，实现页面之间的实时通信

SharedWorked如何使用

使用SharedWorked可以创建一个多页面共享的进程，通过这种方式来实现多页面之间的消息互通

  1. 先创建'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);                 /**发给自己 */            });                }        }

这个文件在页面中会被引用，用来创建一个共享进程对象。代码中维护了一个连接对象池，定义了简单的事件和方法。

  1. 新建一个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>
  1. 重复步骤2,可以再创建一个或多个页面
  2. 由于SharedWorker遵循同源策略，所以你要启动一个简单的web服务才可以正常运行

另外我还画了一个简单的模型图，希望能帮助你加深理解