实现浏览器内多个标签页之间的通信

实现浏览器内多个标签页之间的通信

第一种方式:websocket协议.
1.首先我们得了解websocket是什么?
它是一种网络通信协议
2.为什么会用到websocket?
因为http有缺陷,通信只可以由客户端发起,服务器无法主动向客户端发送消息。
但如果这时,服务器有连续变化的状态,那么就只能使用轮询的方式来访问。
轮询:每隔一段时间,就发出一个询问.
因为websocket拥有全双工(full-duplex)通信自然可以实现多个标签页之间的通信.

第二种方式:localstorage
localstorage是浏览器多个标签共用的存储空间,所以可以用来实现多标签之间的通信
这里补充一点其他的:session是会话级的存储空间,每个标签页都是单独的
使用方式:直接在window对象上添加监听,以下为例子:
标签页1:

<input id="name">  
<input type="button" id="btn" value="提交">  
<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
            var name=$("#name").val();    
            localStorage.setItem("name", name);   
        });    
    });    
</script>

标签页2:

<script type="text/javascript">  
    $(function(){   
        window.addEventListener("storage", function(event){    
            console.log(event.key + "=" + event.newValue);    
        });     
    });  
</script>  

storage事件,针对都是非当前页面对localStorage进行修改时才会触发,当前页面修改localStorage不会触发监听函数。

第三种方式:html5浏览器的新特性SharedWorker
关于SharedWorker
普通的webworker直接使用new Worker()即可创建,这种webworker是当前页面专有的。然后还有种共享worker(SharedWorker),这种是可以多个标签页、iframe共同使用的。
SharedWorker可以被多个window共同使用,但必须保证这些标签页都是同源的(相同的协议,主机和端口号)

使用方式
首先新建一个js文件worker.js,具体代码如下:

// sharedWorker所要用到的js文件,不必打包到项目中,直接放到服务器即可
let data = ''
onconnect = function (e) {
  let port = e.ports[0]

  port.onmessage = function (e) {
    if (e.data === 'get') {
      port.postMessage(data)
    } else {
      data = e.data
    }
  }
}

webworker端(暂且这样称呼)的代码就如上,只需注册一个onmessage监听信息的事件,客户端(即使用sharedWorker的标签页)发送message时就会触发.

注意点
1.webworker无法在本地使用,出于浏览器本身的安全机制,所以我这次的示例也是放在服务器上的,worker.js和index.html在同一目录。
2.因为客户端和webworker端的通信不像websocket那样是全双工的,所以客户端发送数据和接收数据要分成两步来处理。示例中会有两个按钮,分别对应的向sharedWorker发送数据的请求以及获取数据的请求,但他们本质上都是相同的事件–发送消息。
3.webworker端会进行判断,传递的数据为’get’时,就把变量data的值回传给客户端,其他情况,则把客户端传递过来的数据存储到data变量中。下面是客户端的代码:

// 这段代码是必须的,打开页面后注册SharedWorker
//显示指定worker.port.start()方法建立与worker间的连接
    if (typeof Worker === "undefined") {
      alert('当前浏览器不支持webworker')
    } else {
      let worker = new SharedWorker('worker.js')
      worker.port.addEventListener('message', (e) => {
        console.log('来自worker的数据:', e.data)
      }, false)
      worker.port.start()
      window.worker = worker
    }
// 获取和发送消息都是调用postMessage方法,我这里约定的是传递'get'表示获取数据。
window.worker.port.postMessage('get')
window.worker.port.postMessage('发送信息给worker')

webSocket如何兼容低浏览器?

1.Adobe Flash Socket
2.ActiveX HTMLFile (IE)
3.基于 multipart 编码发送 XHR
4.基于长轮询的 XHR

以上内容的参考链接 – 多个标签实现通信
关于websocket原理的有趣解释

    原文作者:少年版
    原文地址: https://segmentfault.com/a/1190000018354650
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞