前端3+1（Day9）9.1

前端3+1(Day9)

实现浏览器内多个标签页面之间通信的四种方法

什么是标签页之间的通信

实现标签页通信的方法

websocket通讯

全双工通信自然可以实现多个标签页之间的通信

websocket是HTML5新增的协议，它可以实现浏览器和服务器之间建立不受限制的双向通信通道。浏览器可以随时给服务器发送消息

普通浏览器他们只可以实现响应协议，也就是说，只有浏览器发送那个请求，服务器才可以响应。

虽然普通浏览器也可以通过comet或者轮询来实现双向通信。但是实时性不强，而且对服务器的压力比较大。

comet是什么

commet本质上也是轮询，但是在没有消息的情况下，服务器先脱一段时间，等有消息再去回复，解决了实时性问题，但是1. 在多线程模式运行的服务器会让大部分线程大部分时间都属于挂起状态，浪费服务器的资源。2. 一个http连接在长时间没有数据传输的情况下，链路上的任何网关都可能关闭这个连接，而网关是我们不可控的，这就要求comet连接必须定期发一些ping数据，显示连接’‘正常工作’。

ping数据是什么

ping表示某一个ip地址或者某个域名看下基本连接是否正常，是否有丢包，是否有网络延迟，ping就是我们经常用来作为网络连接通信的测试”指令“

造成丢包的原因

数据在Internet上的传输方式都是以数据包为单位传输的，每个包基本大小是nk。也就是说，无论我的网络质量是否完美，我都数据都不会以线性传输，中间都会有空洞。所以数据包的传输不会百分百完成，总会有一定的损耗。遇到这种情况，Internet会自动的让双方的电脑根据协议来补包。如果这个时候线路好，速度快，那么包的损失就非常少。如果线路差，那么包的损失量就会非常多，这时，补包也就不会百分百完成。这时数据传输就会有空洞，就会造成丢包

websocket其实并不是全新的协议，而是利用了HTTP协议建立连接。

为什么websocket连接可以实现全双工通信而HTTP不可以呢

HTTP的协议是建立在TCP协议上的，TCP协议本身就实现了双全工通信，但是HTTP协议的请求时应答式请求，这种应答机制限制了全双工通信。

websocket连接必须由浏览器发起，特点：

1. 建立在TCP协议上，服务器的实现比较容易

2. 和HTTP有很好的兼容性。默认端口也是80，443，并且握手阶段采用HTTP协议，因此握手时不容易屏蔽，能够通过各种HTTP代理

3. 数据格式比较轻量，性能开销小，通信高效

4. 可以发送文本，也可以发送二进制数据

5. 没有同源限制，客户端可以与任意的服务器通信

6. 协议标识符是ws

定时器setInterval+cookie

1. 在页面A设置一个setInterval定时器不断刷新，检查cookie的值是否发生变化，如果变化就进行刷新

2. 由于cookie是在同域可读，所以当页面B在审核时改变了cookie值，页面A自然也是可以拿到的

缺点：资源浪费，不够优雅

使用本地存储localstorage

• localstorage是浏览器多个标签共用的存储空间所以可以用来实现多标签之间的通信

• session是会话级的存储空间，每个标签页都是单独的

• 直接在window上添加监听即可

window.onstorage = (e) => {console.log(e)}
window.addEventListener('storage',(e) => console.log(e))

onstorage以及storage事件，针对都是非当前页面对localstorage进行修改时才会触发，当前页面进行修改是不会触发监听函数。在对原来的数据的值进行修改时才会触发。

html5浏览器的新特性ShareWorker

普通的webworker直接通过new worker()即可创建，这种webworker时当前页面专用的。

还有一种共享worker(ShareWorker)这种是可以多个标签页，iframe可以共用的