实现多个标签页之间通讯的几种方法
prologue
- 以前在网上看到一个面试题：如何实现浏览器中多个标签页之间的通讯。我目前想到的方法有三种：使用websocket协议、经过localstorage、以及使用html5浏览器的新特性SharedWorker。
- websocket这里先不介绍了,全双工(full-duplex)通讯天然能够实现多个标签页之间的通讯，相信网上经过websocket实现聊天室的教程也很多，我本身也用socket.io写了一个在线聊天室
- 接下来会介绍另外两个方法：监听localstorage和使用SharedWorker
localstorage
- localstorage是浏览器多个标签共用的存储空间，因此能够用来实现多标签之间的通讯(ps：session是会话级的存储空间，每一个标签页都是单独的）。
- 直接在window对象上添加监听便可：
window.onstorage = (e) => {console.log(e)}
// 或者这样
window.addEventListener('storage', (e) => console.log(e))
复制代码
- onstorage以及storage事件，针对都是非当前页面对localStorage进行修改时才会触发，当前页面修改localStorage不会触发监听函数。而后就是在对原有的数据的值进行修改时才会触发，好比本来已经有一个key会a值为b的localStorage，你再执行：
localStorage.setItem('a', 'b')代码，一样是不会触发监听函数的。
webworker
- 咱们都知道JavaScript是单线程的，可是浏览器是拥有过个线程的好比：gui渲染线程、JS引擎线程、事件触发线程、异步http请求线程。
- webworker做为浏览器的一个新特性，能够提供一个额外的线程来执行一些js代码，而且不会影响到浏览器用户界面。
- 应用场景：好比页面中包含耗时较大的算法代码时，就会阻塞线程影响浏览器渲染等等。这时候就可把耗时代码，放到webworker(另外一个线程)中执行。
- 注意，这种多线程能力不是JavaScript语言原生具备的，而是浏览器宿主环境提供的。
- 普通的webworker直接使用
new Worker()便可建立，这种webworker是当前页面专有的。而后还有种共享worker(SharedWorker)，这种是能够多个标签页、iframe共同使用的，接下来介绍如何使用SharedWorker实现标签页之间的通讯。
SharedWorker
- 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时就会触发。html
-
注意webworker没法在本地使用，出于浏览器自己的安全机制，因此我此次的示例也是放在服务器上的，
worker.js和index.html在同一目录。 html5
-
由于客户端和webworker端的通讯不像websocket那样是全双工的，因此客户端发送数据和接收数据要分红两步来处理。示例中会有两个按钮，分别对应的向sharedWorker发送数据的请求以及获取数据的请求，但他们本质上都是相同的事件--发送消息。web
-
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')
复制代码
- 页面A发送数据给worker，而后打开页面B，调用
window.worker.port.postMessage('get')，便可收到页面A发送给worker的数据。 - 参考：developer.mozilla.org/zh-CN/docs/…