SharedWorker的简单例子

　　最近项目中要用到，多个页面之间的通信，百度了些资料觉得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是要放在服务器环境才可以查看。直接打开不行。

　　很简单的例子，有这方面需求的希望可以有所帮助。

SharedWorker的简单例子

猜你喜欢