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是要放在服务器环境才可以查看。直接打开不行。
很简单的例子,有这方面需求的希望可以有所帮助。