`
yarmyarch
  • 浏览: 2462 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

基于HTML5 LocalStorage设计的跨页面通信模型

阅读更多
  处女贴,大牛们轻拍 ~~

  最近在做一个webim项目,涉及到多点登陆的功能开发。该功能的核心是跨页面通信,最常用的手段当然是Flash的localConnection。大家都知道,使用LocalStorage进行同域下的跨页面通信是非常容易实现的,但是LocalStorage是针对所有页面生效的,如果考虑存在多个页面时希望可以进行点对点通信、数据组发等,事情就变得有点复杂了。

  考虑多点登陆需求中最常见的场景:访客可以打开多个页面,但同时只有一个页面保持与服务器连接;当另一个页面获得焦点时,当前正与服务器保持连接的页面应当断开该连接,并将页面状态传递给获得焦点的页面,新页面立即与服务器建立连接。

  为了实现以上场景,这个多点登陆模型应当具备以下基本特征:
  在以上场景中,假设我们称“当前正与服务器保持连接的页面”为“活动页面(MainPage)”,其他页面为“非活动页面(SubPage)”,则任意时刻MainPage只有一个,其他页面均为SubPage;
  任意一个SubPage应当可以使自己成为MainPage,同时原来的MainPage则转换为SubPage;
  MainPage和SubPage之间可以传递数据。

  我们期望这个模型可以完全隐藏实现方案,从通信的角度来说我更希望该模型能提供如下功能:
  页面A可以向发送一个Ajax请求发送Post一样,向页面B发送一个请求,可以携带参数,并允许获取页面B的返回数据以执行回调,例如:
A.someKindOfSend(B, key, param, callback)
;
  页面B可以添加一个Action用于处理某key标注的请求,并且返回处理结果,类似
B.someKindOfAddListener(key, handler)
;
  MainPage可以向所有SubPage发送请求;

  在保证基本功能完整性的情况下,该模型对页面通信做了一些限制,以使逻辑最简:
  SubPage之间无法直接通信;
  SubPage可向MainPage发送请求,因此如果两个SubPage之间希望通信,应当将其中一个SubPage转换为MainPage。

  另外,由于该模型基于LocalStorage封装,因此也应当能提供基本容器方法:add、set、get、remove。出于稳定性考虑,不提供全局查询和清空操作。

  综上,该模型的接口可设计为:
MultiPageUtil: {
  //跨页面通信控制
  controller : {
    //检测当前页面是否为活动页面
    isMainPage : function(){},

    /**
     *使当前页面转换为活动页面。如果当前页面已经是一个活动页面,则什么也不做
     *@param callback{Function} 转换成功后的回调函数
     */
    active : function(callback){},

    /**
     *对一个来自其他页面的Post事件添加处理器。
     *该方法区分来源,即MainPage能监听来自所有SubPage的事件,
     *SubPage仅能监听来自MainPage的事件。
     *@param key {String} 需要监听的属性key
     *@param handler {Function(e)} 被监听的key的value发生变化时的处理函数。传入参数为onstorage标准事件对象,handler的返回值将作为post请求中callback方法参数中标注事件e的newValue。如果为一个字段指定了多个listener,则该post的请求会收到多次响应。
     */
    addPostListener : function(callback){},

    /**
     *如果当前页面是一个SubPage,则该方法将向活动页面发送一个请求。
     *@param key {String} 请求标志位,类似Ajax请求中的URL
     *@param value {String} 请求数据,可用于传递请求参数并在对应的事件处理器中通过e.newValue获取
     *@param [callback] {Function} 请求响应函数。该函数将接收来自MainPage关于该请求的回复字符串
     */
    postMainPage : function(callback){},

    /**
     *如果当前页面是一个MainPage,则该方法将向活动页面发送一个请求。
     *@param key {String} 请求标志位,类似Ajax请求中的URL
     *@param value {String} 请求数据,可用于传递请求参数并在对应的事件处理器中通过e.newValue获取
     *@param [callback] {Function} 请求响应函数。该函数将接收来自MainPage关于该请求的回复字符串。注意,如果当前存在多个非活动页面,callback将可能被执行多次。
     */
    postSubPages : function(callback){}
  },

  //封转原LocalStorage处理的工具集
  util : {
    add : function(key, value){},
    set : function(key, value){},
    get : function(key){},
    remove : function(key, value){},
			
    /**
     *对一个来自localStorage中的某个属性变化事件添加处理器
     *支持添加多个处理器
     *该方法不区分来源。
     *@param key {String} 需要监听的属性key
     *@param handler {Function(e)} 被监听的key的value发生变化(由基本容器方法触发)时的处理函数,e为storage标准事件对象
     */
    addListener : function(key, handler) {}
  }


  到此为止,这个模型看起来还算比较可行,不过,在真正用LocalStorage实现时还需要处理一些额外的问题:
  1.基本思想:模型通过localStorage的标准事件onstorage来实现跨页面通信,即页面A通过写入特定数据触发页面B的onstorage事件,页面B响应之后再写入数据通知页面A处理结果;
  2.浏览器兼容性问题,老生常谈了,包括事件监听器绑定机制、标准事件属性支持程度等;
  3.事件筛选:LocalStorage对应的标准事件onstorage,在一个页面中对LocalStorage进行修改时所有页面均会收到该事件,有的浏览器甚至包括LocalStorage的修改者也会受到。因此,需要在存入的key中添加特定的标志位,以防止不应该响应该事件的页面对事件做出错误的处理。(例如,SubPage应当忽略除来自MainPage之外的所有Post请求);
  4.LocalStorage全局域字段污染问题:由1可知,Post请求实质仍然是往LocalStorage中写入数据,普通的处理很有可能将用户写入LocalStorage的普通数据覆盖,从而产生污染。可考虑使用特殊字段时间戳标记的方式防止污染。
  5.垃圾数据:大量的Post请求如果不进行清理,则会长期滞留在浏览器划分给LocalStorage在该域下的空间内。因此,每一个Post请求在被处理之后,都应当清空用于发送该Post而在LocalStorage中写入的数据;同时,callback、handler等函数是由绑定在onstorage事件的最上层处理器执行的,而callback应当是一次性的,因此执行之后也应当被处理。

  相信看到这里各位一定有许多想法,不妨留下您的意见来一起探讨探讨。附件中的代码是该模型的实现,目前的设计还有很多值得优化的地方,代码逻辑写到后期也有些紊乱和冗余...开发环境为Firefox6+、Chrome13。

  Many 3X!
分享到:
评论

相关推荐

    基于html5的简单聊天室

    综上所述,基于HTML5的简单聊天室结合EXT4框架,实现了功能丰富的Web实时通信应用。开发者通过充分利用HTML5的新特性,如WebSocket和Web Storage,以及EXT4的强大组件库,创建了一个用户友好、交互性强的在线聊天...

    基于HTML5、Angularjs、Ajax创建的一个用于测试restful api的页面,有点类似postman的功能.zip

    【标题】基于HTML5、AngularJS、Ajax创建的RESTful API测试页面类似于Postman功能的实现 【描述】本项目是使用HTML5技术进行前端开发,结合AngularJS框架以及Ajax异步请求,构建了一个用于测试RESTful API的网页...

    基于HTML5和NodeJs的网络版坦克大战.zip

    【标题】基于HTML5和Node.js的网络版坦克大战是一个利用现代Web技术重构的经典游戏项目。HTML5作为最新的超文本标记语言版本,极大地扩展了Web应用程序的功能,使其能够实现更丰富的交互性和离线存储能力。而Node.js...

    基于HTML5开发的微信app网页显示

    在这个项目中,开发者通过HTML5实现了微信App内的各种功能页面,包括但不限于登录、聊天、朋友圈、电池充电状态显示等功能。 1. **响应式设计**:为了确保网页在不同设备上都能正常显示,项目采用了响应式设计。...

    HTML原型设计

    HTML原型设计是网页设计的重要阶段,它通过使用HTML5语言构建出页面的初步结构和交互模型,以便在项目开发初期就能清晰地展示出网站或应用的功能布局和用户体验。HTML5作为最新的超文本标记语言标准,引入了许多新...

    3D熊出没HTML5游戏源码

    通过使用HTML5的本地存储(localStorage)或Web Storage API,游戏可以保存用户的进度和设置,即使页面刷新也能保持游戏状态。同时,WebSocket协议可能用于实现多人在线互动,让"3D熊出没"具备社交功能。 在服务器...

    HTML5 for .NET Developers

    2. Web Forms与HTML5:虽然Web Forms主要是基于服务器的模型,但通过更新控件模板,也可以支持HTML5输入控件和属性。 3. SignalR与WebSocket:HTML5引入了WebSocket协议,为实时通信提供了双向通信通道。.NET ...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    本文研究并设计了基于Android+HTML5的在线认证检测系统,主要工作包括以下四个方面: (1)针对多窗口类浏览器模式问题,指出并分析了该问题存在的原因,利用Activity的运行机制,通过Fragment栈对主要模块的Webview...

    HTML5移动开发源码+书籍

    5. 实时通信:可能涵盖WebSocket和Server-Sent Events (SSE)等技术,用于实现即时通讯功能。 6. 性能分析与调试:教授如何使用开发者工具监控和优化移动Web应用的性能。 7. 测试与部署:介绍如何进行跨平台测试,...

    基于html5的APP流量统计源码-Elmer Bootstrap

    【标题】"基于HTML5的APP流量统计源码-Elmer Bootstrap"是一个专门针对移动应用程序(APP)设计的流量分析工具的源代码实现,利用了先进的Web技术HTML5和流行的前端框架Elmer Bootstrap。这个系统旨在帮助开发者和...

    html5仿微信聊天界面

    7. **本地存储**: HTML5的`localStorage`和`sessionStorage`API允许在浏览器中存储用户数据,如聊天记录或用户设置,即使在页面刷新或关闭后也能保留。 8. **图标字体**: 使用图标字体如Font Awesome或Ionicons,...

    HTML5与ASP.NET程序设计教程(ppt)

    2. **离线存储**:通过`Application Cache`和`localStorage`,HTML5允许网页在离线状态下也能访问部分数据,提高了应用的响应速度和可用性。 3. **媒体元素**:和标签让开发者可以直接在网页上嵌入音频和视频,无需...

    基于APPCAN制作的一款Hibird类型的APP,APP的编程语言是HTML5+CSS3+JavaScript.zip

    - **Flexbox布局**:灵活的盒模型,能方便地处理容器内元素的对齐、排列和响应式设计。 - **Grid布局**:二维网格布局系统,适用于复杂的页面结构。 - **动画**:`@keyframes`规则和`transition`属性可实现平滑的...

    萌萌水贼HTML5游戏源码

    【萌萌水贼HTML5游戏源码】是一个基于HTML5技术开发的游戏项目,它展示了HTML5在游戏开发领域的强大功能和广泛应用。HTML5是超文本标记语言(HyperText Markup Language)的第五个版本,它的主要改进包括对多媒体、...

    androidHtml5多属性选择

    例如,借助于如AngularJS或Vue.js这样的前端框架,可以在HTML5页面的视图与Android应用的模型之间建立实时链接,确保选择的变化会立即反映到两者之中。 6. 性能优化:由于WebView是基于Chromium引擎的,所以性能...

    HTML5 模板 地址

    在这个“HTML5模板地址”中,我们可以找到一些基于HTML5构建的网页模板,这些模板可能包含了各种类型的网页元素,如游戏、抽奖、规则说明和奖励展示等。 首先,`index.html`通常是网站的主页,它会提供网站的基本...

    超强后端管理静态页面源码

    【超强后端管理静态页面源码】是一套基于HTML5技术构建的静态页面源代码,设计用于后端管理系统。这套源码充分利用了HTML5的新特性,提供了完整的前端界面,包括登录、用户管理、数据展示等多个功能模块。由于是静态...

    web课程设计网页规划与设计 基于HTML+CSS+JavaScript制作智能停车系统公司网站静态模板

    ### 知识点一:HTML5在网页设计中的应用 #### 1.1 HTML5概述 HTML5作为超文本标记语言的最新版本,为开发者提供了更丰富的功能与更灵活的表现形式。它不仅支持传统的文本内容展示,还引入了一系列新的元素与属性来...

    基于react、html5、css3的实现的组件库.zip

    结合这个压缩包中的"catwiki-main"文件,我们可以推测这是一个基于React、HTML5和CSS3实现的组件库,可能包含了一些专为猫百科或猫咪相关网站设计的组件,如图片滑动、信息卡片、导航菜单等。这样的组件库可以加速...

    TR基于HTML5和CSS3标准开发,在Google Chrome上使用能获得最佳体验.zip

    这个压缩包“TR基于HTML5和CSS3标准开发,在Google Chrome上使用能获得最佳体验.zip”包含了一个名为“tr-weibo-master”的项目,暗示这可能是一个使用HTML5和CSS3技术重构的微博应用或类似社交平台的前端代码。...

Global site tag (gtag.js) - Google Analytics