即时通信与浏览器多TAB通信

简介:

摘要

浏览器与服务器端的即时通信技术解决了在线聊天等产品中涉及到的复杂网络环境下的问题;采用多tab通信技术来处理现代浏览器的跨页面通信,分析特定疑难问题的技术解决方案。

TAG

即时通信,多tab通信

内容

 

关键技术

 

  1. 消息推送:通过基于web server的长连接技术实现
  2. 前端多Tab数据交互:借助Flash的Local Connection和ShareObject技术实现

Client-Server交互模型

分层设计

多Tab通信技术

  • 主要功能:

1.多Tab中始终维持一个特立独行的Tab

2.多Tab间互相通信:支持广播、组播、单播

3.跨浏览器数据存储

4.跨域发送Http请求

利用flash的LocalConnection的唯一性保证客户端多个浏览器多个tab之间,有且只有一个页面与服务端交互,称之为server tab。

只有server tab会与Lightthy通信

当server tab接收到lightthy的消息后,从本地存储SharedObject中获取其他tab的id,然后通过LocalConnection传递给他们。

遇到的问题和解决方案

问题:

 

  • 通信时间过长的问题。LocalConnection构造的本地连接都是以串行的形式进行,每一次连接到用户的电脑上,机器状态正常的情况下,在IE的传输时间大概是40-100ms;下一次连接必须等待上一次连接返回成功以后才进行。那么如果我们进行广播,一次广播20个窗口。那么最后一个窗口收到消息的时候大概是2s左右,如果中间再出现某此失败或者阻塞的情况,时间会更长。
  • 单纯以广播形式进行,那么无论是什么消息,都将所有接收端叫醒一次,由接收端自己判断是否处理收到的消息。这样浪费了很多资源。所以可以考虑使用组播方式,来减少这种消耗。组内单播针对一些特殊具体应用的效率更高。

解决方案:

 

  • 存储接收端列表,以组划分。
  • 在本地协议上实现以组划分。

问题:

 

  • 多页面并发频繁对SharedObject进行写操作,容易导致SharedObject崩溃(文件被无故删除,并且再次创建失败)。
  • 考虑到一台计算机不可能只登陆一个用户,而SharedObject存储容量有限,如果有效的删除无用的数据是关键问题。

解决方案:

 

  • 机制上用写队列+文件锁来避免并发写操作。
  • 为了避免客户端异常情况,比如强杀浏览器进程,造成的文件锁不能解锁的情况,需要处理超时自动解锁的问题。
  • 对于非常频繁的特殊的写操作,采用从reclist中删除无用的接收者id,做缓冲时间,批量操作等策略。
  • 对于存储空间限制问题,我们的措施是分用户存储,只保留最近进行操作的10个用户的列表数据。

问题:

 

为了减少服务端压力,设计的初衷就是前端要在多个浏览器窗口中挑出一个独特的窗口来发起listen。Server Tab的概念保证了前端能生成一个唯一的独特窗口,用于发起listen。实现原理是利用LocalConnection的connect name唯一性,并用轮询connect来保证只要原来发起listen的窗口一旦断掉,即能自动重新挑选一个窗口来作为Server Tab,并发起listen。但是我们仍然遇到了外壳浏览器下面一些诡异的问题,窗口被缓存成假死状态。导致这个机制不能很好的运行下去。

解决方案:

 

  • 将Server Tab的ID做成非永久的,而是与时间相关的。也就是说给Server Tab加上一个生命周期。能解决一些外壳浏览器下的窗口假死造成的问题。
  • 在主流浏览器(IE、Firefox…)下,window.unload的时候关闭本页面的server及轮询,在其他非主流浏览器下,window.beforeunload的时候做这个操作。进一步减少这种异常情况发生的机会。

下面是一个窗口打开后,在本地注册的流程

 


关注百度技术沙龙













 本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/743735,如需转载请自行联系原作者  


相关文章
|
10月前
|
存储
如何实现浏览器内多个标签页之间的通信
如何实现浏览器内多个标签页之间的通信
94 0
|
5月前
|
存储 移动开发 API
如何实现浏览器内多个标签页之间的通信
在浏览器中,可通过三种方式实现多标签页通信:一是利用 `localStorage`,通过设置及监听数据变化实现信息传递;二是借助 `Broadcast Channel API`,在同一频道下双向传输消息;三是运用 `SharedWorker`,作为共享工件在各标签间架起沟通桥梁。每种方法依据实际需求选择使用。
|
5月前
|
算法 安全 前端开发
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
174 0
|
10月前
|
存储 安全 前端开发
浏览器跨窗口通信:原理与实践
浏览器跨窗口通信:原理与实践
410 0
|
10月前
|
JavaScript
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
|
Web App开发 视频直播
浏览器跨标签页通信、双向数据传输、实时通信有什么区别?
浏览器跨标签页通信、双向数据传输、实时通信有什么区别?
103 0
|
Web App开发 网络协议 前端开发
【从零学习python 】86. 深入了解HTTP协议及其在浏览器和服务器通信中的作用
【从零学习python 】86. 深入了解HTTP协议及其在浏览器和服务器通信中的作用
153 0
|
JavaScript 小程序
vue监听浏览器tab切换
vue监听浏览器tab切换
237 0
|
编解码 移动开发 C++
初识http协议,简单实现浏览器和服务器通信
初识http协议,简单实现浏览器和服务器通信
909 0
|
存储 Web App开发 JavaScript
面试官:你是如何实现浏览器多标签页之间通信的?
前言 我们都知道浏览器是可以打开很多标签页的,如果每个标签页代表的是单独的一个网站,那么这些标签页之间肯定是不能通信的,如果能通信那估计我们都得凉凉。但是在很多情况下,浏览器中的很多标签页都属于某一个网站,而且这些标签页之间会使用一些相同的数据,这个时候我们就需要让这些标签页的数据都保持同步。 比如很多博客网站,点击文章列表通常是打开一个新的标签页进入文章详情页,那么如果我们在文章详情页点赞、评论等操作,而文章列表页也使用了这些数据,这个时候我们需要保持两边的数据一致,衍生出来就是详情页改了数据,需要让列表页知道。 总结来看:在某些情况下,实现多标签页之间通信是必要的!
687 0
面试官:你是如何实现浏览器多标签页之间通信的?

热门文章

最新文章