使用sharedWorker在web页面之间通信

jiezi

5 年前

https://developer.mozilla.org…

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

使用 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 服务才可以正常运行

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

使用sharedWorker在web页面之间通信

参考

目标

SharedWorked 如何使用