SharedWorker的簡單例子

本文轉載自查看原文 2019-05-24 22:41 861 js共享進程/ SharedWorker/ worker/ 多頁面通信

　　最近項目中要用到，多個頁面之間的通信，百度了些資料覺得SharedWorker很不錯。

　　就簡單寫了一個demo。

　　直接上代碼吧，不羅嗦

　　dome1.html的代碼

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>多個頁面之間的通信</title>
</head>
<body>
    <button class="btn1">發送消息1</button>
    <button class="btn2">發送消息2</button>
    <button class="btn3">發送消息3</button>
    <button class="btn4">發送消息4</button>
  <div>
    <input type="text" class="input1">
    <button class="btn5">發送</button>
  </div>
  <div class="chat"></div>
<script>
var worker = new SharedWorker("test_worker2.js");
worker.port.start();
const ID = 122;
worker.port.postMessage({id:ID});
var to_ws = function(data){
    worker.port.postMessage([123,data]);
};
document.querySelector(".btn1").onclick = function(){
    to_ws("發送到demo2消息1");
};
document.querySelector(".btn2").onclick = function(){
    to_ws("發送到demo2消息2");
};
document.querySelector(".btn3").onclick = function(){
    to_ws("發送到demo2消息3");
};
document.querySelector(".btn4").onclick = function(){
    to_ws("發送到demo2消息4");
};

//接收woker的發送消息
worker.port.onmessage = function(e){
      chuli_xiaoxi(e.data[0],e.data[1]);
};



var ochat = document.querySelector(".chat");
var oinput = document.querySelector(".input1");
document.querySelector(".btn5").onclick = function(){
  var value = oinput.value;
  if(value){
    chuli_xiaoxi(123,value);
    to_ws(value);
    //oinput.value = "";
  };
};
var chuli_xiaoxi = function(id,data){
  var odiv = document.createElement("div");
  if(id === 123){
    odiv.style.color = "red";
  }else{
    odiv.style.color = "green";
  };
  odiv.innerHTML = id+"說： "+data;
  ochat.appendChild(odiv);
};
</script>
</body>
</html>

　　demo2.html 的代碼

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>多個頁面之間的通信</title>
</head>
<body>
  <button class="btn1">發送消息1</button>
  <button class="btn2">發送消息2</button>
  <button class="btn3">發送消息3</button>
  <button class="btn4">發送消息4</button>
  <div>
    <input type="text" class="input1">
    <button class="btn5">發送</button>
  </div>
  <div class="chat"></div>
<script>
var worker = new SharedWorker("test_worker2.js");
worker.port.start();
const ID = 123;
worker.port.postMessage({id:ID});
var to_ws = function(data){
  worker.port.postMessage([122,data]);
};
document.querySelector(".btn1").onclick = function(){
  to_ws("發送到demo1消息1");
};
document.querySelector(".btn2").onclick = function(){
  to_ws("發送到demo1消息2");
};
document.querySelector(".btn3").onclick = function(){
  to_ws("發送到demo1消息3");
};
document.querySelector(".btn4").onclick = function(){
  to_ws("發送到demo1消息4");
};

//接收woker的發送消息
worker.port.onmessage = function(e){
  chuli_xiaoxi(e.data[0],e.data[1]);
};



var ochat = document.querySelector(".chat");
var oinput = document.querySelector(".input1");
document.querySelector(".btn5").onclick = function(){
  var value = oinput.value;
  if(value){
    chuli_xiaoxi(122,value);
    to_ws(value);
    //oinput.value = "";
  };
};
var chuli_xiaoxi = function(id,data){
  var odiv = document.createElement("div");
  if(id === 122){
    odiv.style.color = "red";
  }else{
    odiv.style.color = "green";
  };
  odiv.innerHTML = id+"說： "+data;
  ochat.appendChild(odiv);
};
</script>
</body>
</html>

　　當然最重要的是worker的代碼看這里，因為寫了幾個可能這個能用

　　test_worker2.js 的代碼

var list = [];
var list_id = [];
onconnect = function(e) {
    var port = e.ports[0];
    port.addEventListener('message', function(e) {
        if(e.data.id){
            var index = list_id.indexOf(e.data.id);
            if(index === -1){
                list.push(port);
                list_id.push(e.data.id);
            }else{
                //關閉上個鏈接
                list[index].close();
                list[index] = port;
            };
        }else{
            send(e.data[1],e.data[0]);
        };
    });
    port.start();
}
var send = function(data,id){
    var index = list_id.indexOf(id);
    if(index !== -1){
        list[index].postMessage([id,data]);
    };
    
};

　　就是這么簡單，這只是實現非常簡單的功能

　　這個demo是要放在服務器環境才可以查看。直接打開不行。

　　很簡單的例子，有這方面需求的希望可以有所幫助。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 gRPC的簡單Go例子一個簡單的回調（例子） JPA OpenJPA 簡單例子 workerman簡單例子簡單的WebRTC例子 Java 8 forEach簡單例子一個簡單的RESTful例子簡單的python GUI例子 ActiveMQ的簡單例子應用 webSql的簡單小例子