如何实现浏览器多个标签页内通信

最新推荐文章于 2024-07-08 10:04:44 发布

wyk760629476

最新推荐文章于 2024-07-08 10:04:44 发布

阅读量135

点赞数

分类专栏：面试基础题目文章标签：网络通信 websocket

本文链接：https://blog.csdn.net/wyk760629476/article/details/116131092

版权

面试基础题目专栏收录该内容

9 篇文章 0 订阅

订阅专栏

localstorage

// 赋值
let student1 = {id: '2013010818', name: 'wangyakun', sex: 'woman', age: 20}
loaclStorage.setItem('student', student1)

// 取值
loaclStorage.getItem('student')

// 删除
loaclStorage.removeItem('student')

在一个标签页中添加数据,另一个标签页可以直接获取该值
h5标签,低版本不支持,大小也有限制,大概5m左右

cookie+setInterval
```
// 设置定时任务来获取cokie里面的数据,去除自己想要的字段值
setInterval(()=>{
  let getName = JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[cokieName])
}, 10000)
```
cokie的存储空间有限,最多4k,每个域名下面最多能设置30-50个cokie
每次http请求都会将cokie带到服务器,但服务器不用此数据,会浪费带宽,
定时任务频率太大,影响浏览器性能,频率过小影响数据时效性

websocket

// server.js文件
//获得WebSocketServer类型
var WebSocketServer = require('ws').Server;
//创建WebSocketServer对象实例，监听指定端口
var wss = new WebSocketServer({ port: 8080 });
//创建保存所有已连接到服务器的客户端对象的数组
var clients=[]; 
//为服务器添加connection事件监听，当有客户端连接到服务端时，立刻将客户端对象保存进数组中。
wss.on('connection', function(client) {
  // 如果没有这个client对象，说明是第一次连接，就加入到clients中
  if(clients.indexOf(client)===-1){
    clients.push(client);
    //为每个client对象绑定message事件，当某个客户端发来消息时，自动触发
    client.on('message', function (msg) {
      //遍历clients数组中每个其他客户端对象，并发送消息给其他客户端
      for(var c of clients){
        if(c!=client){
          c.send(msg);
        }
      }
    })
  }
})

<!-- send.html文件 -->
<body style="text-align: right">
  <input id="msg" type="text"> 
  <button id="send">发送</button>
  <script>
    //建立到服务端webSocket连接
    var ws = new WebSocket("ws://localhost:8080");
    send.onclick = function(){
      if(msg.value.trim()!==""){
        // 将消息发到服务器
        ws.send(msg.value.trim());
      }
    }
  </script>
</body>

<!-- receive.html文件 -->
<body>
  <h1>收到消息：<span id="recMsg"></span></h1>
  <script>
    //建立到服务端webSocket连接
    var ws = new WebSocket("ws://localhost:8080");
    //当连接被打开时，注册接收消息的处理函数
    ws.onopen=function(event) {
      //当有消息发过来时，就将消息放到显示元素上
      ws.onmessage=function(event) {
        recMsg.innerHTML=event.data;
      }
    }
  </script>
</body>

需要后台支持才能实现websocket的功能，如果数据量很大的话，消耗服务器资源的严重。但是功能强大，灵活

sharedworker

//main1 和main2都是这样

<!DOCTYPE HTML>
<html>
<head>
    <title>Shared workers: demo 2</title>
</head>
<body>
<div id="log"></div>
<input type="text" name="" id="txt">
<button id="get">get</button>
<button id="set">set</button>
<script>
  var worker = new SharedWorker('shared.js');
  var get = document.getElementById('get');
  var set = document.getElementById('set');
  var txt = document.getElementById('txt');
  var log = document.getElementById('log');

  worker.port.addEventListener('message', function(e) {
    log.innerText = e.data;
  }, false);
  worker.port.start(); // note: need this when using addEventListener

  set.addEventListener('click',function(e){
      worker.port.postMessage(txt.value);
  },false);

  get.addEventListener('click',function(e){
      worker.port.postMessage();
  },false);
</script>
</body>
</html>

//shared
var data;
onconnect = function(e) {
  var port = e.ports[0];
  port.onmessage = function(e) {
    // 没有传入数据说明想获取数据,将data的数据返回去
    if(e.data==''){
        port.postMessage(data);
    }else{
        data=e.data;
    }
  }
}

SharedWorker的实质在于share，不同的线程可以共享一个线程，他们的数据也是共享的。