使用sharedWorker在web页面之间通讯

时间 2019-11-07

标签使用 sharedworker web 页面之间通讯栏目 HTML 繁體版

原文原文链接

参考

developer.mozilla.org/zh-CN/docs/…html

目标

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

SharedWorked如何使用

使用SharedWorked能够建立一个多页面共享的进程，经过这种方式来实现多页面之间的消息互通bash

先建立'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);                 /**发给本身 */
            });        
        }
    
    }
复制代码

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

新建一个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服务才能够正常运行

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