基于HTML5的异步数据传输
时间:2013-12-05 09:56 文章来源:http://www.lunwenbuluo.com 作者:刘继飞 方友 点击次数:
摘要:为优化B/S系统结构与网络数据负载,本文在HTML5的WebStorage和WebSocket技术基础上,设计了一种异步数据传输方案。它将部分业务逻辑移交到客户端执行,并在客户端本地缓存数据,以异步方式与服务器进行交互。实践证明能有效减轻服务器负担,增强用户体验。
关键词:B/S结构;WebStorage;WebSocket;异步模式
对B/S(Browser/Server)结构的应用系统[1]而言,当客户端用户在同一时段内进行大量数据传输时,浏览器与服务器之间交互的大部分时间用来处理和传输数据。服务器负载增加、用户体验降低。本文使用HTML5中的存储和通信技术设计了一种异步数据传输方案,能解决上述问题。
1WebStorage和WebSocket
WebStorage是在HTML5本地保存信息和状态的技术,其持久存储LocalStorage和会话期存储SessionStoage两种方式共可存储多达5M字节[2]的数据,与Cookie等技术相比,具有更大的存储空间和更灵活的使用方式。
WebSocket是Web中目前为止最强大的通信功能,它定义一个全双工的通信信道,通过一个Socket即可进行通信。目的是为了取代轮询和Comet技术,使浏览器具有客户机/服务器(Client/Server,C/S)模式下应用程序的实时通信能力[3]。客户端与服务器的连接在握手时,基于同底层的TCP/IP连接,将HTTP协议升级为WebSocket协议,握手成功后进入双向长连接阶段,以全双工方式发送和接收数据。数据帧以0x00字节开头,0xff字节结束,与HTTP头的几百个字节相比,WebSocket只有2个字节的额外开销。
2异步数据传输
WebSocket与WebStorage提供了一系列API处理客户端业务,结合服务器端类库,可以进行异步数据传输。笔者使用JavaScript和C#语言,在.NETFramework4.5环境下设计了方案并做了实验。方案结构如图1所示:
在传统用户端与服务器交互基础上增加了一个中介:WebStorage。它在客户端存储数据并与服务器进行异步传输。下面以一个数据自动保存过程为例,简述该方案的应用。
客户端步骤:(JavaScript实现)
(1)初始化WebStorage对象,设置缓存空间和片段Seg大小(缓存空间包含n个片段);
(2)创建并打开WebSocket对象Ws,同时设置OnSend、OnMessage各个事件的函数;
(3)用户输入或修改数据,触发OnChange方法;
(4)OnChange判断缓存状态,如果缓存超过阈值,则执行(5),否则转到(3);
(5)设置缓存的Seg数据编号,装配形成格式化的数据流,Ws异步Send数据,请求服务器处理;
(6)判断OnMessage返回编号队列(OnMessage异步响应服务器返回,把服务器成功保存的Seg编号入队),如果队列为空,则继续执行(7),否则执行(8);
(7)用户如果还有数据输入,转到(3),否则执行(9);
(8)清除服务器成功保存的Seg,对应编号出队,重新设置流序编号和修改标志,然后转到(3);
(9)提交页面,Flush缓存中现有内容,关闭Ws。
上述过程中,用户编辑的数据片段存入缓存被发送给服务器。服务器成功保存片段数据后,返回其编号交与客户端Socket的OnMessage,OnMessage执行不影响用户编辑数据,处理过程是异步的。
管理端步骤:(C#实现)
(1)HttpHandler监听客户端请求;
(2)有客户端请求(IsWebSocketRequest),则引用HttpContext中的WebSocket对象Ws;
(3)如果Ws成功打开,则调用ReceiveAsync方法获取客户端送过来的数据置于buffer;否则转到(1);
(4)解析buffer,有效的Seg保存至数据库;
(5)调用Ws的SendAsync方法回送成功保存的编号,最后转到(1)。
3结论
该方案应用到笔者参与开发的两个信息管理系统中,运行结果表明:(1)在客户端驻留部分业务逻辑代码,可最大程度地利用客户端的软件资源;(2)减少访问次数,利用客户端本地缓存数据可大大减少网络流量,减少服务器的负载。(3)异步传输数据,在不影响逻辑功能前提下,改进数据传输形式与性能,改善系统运行效率而提升用户体验。
[参考文献]
[1]BruceSilver.HowtochooseanE-formsystem[J].TransformMagazine,2002,11:21-24.
[2]http://www.w3.org/TR/webstorage/[3]XUZK.ResearchonWebGISbasedonHTML5,AjaxandWebService[J].ScienceofSurveyingandMapping,2012,37(1):145-147.
- 论文部落提供核心期刊、国家级期刊、省级期刊、SCI期刊和EI期刊等咨询服务。
- 论文部落拥有一支经验丰富、高端专业的编辑团队,可帮助您指导各领域学术文章,您只需提出详细的论文写作要求和相关资料。
-
- 论文投稿客服QQ:
2863358778、
2316118108
-
- 论文投稿电话:15380085870
-
- 论文投稿邮箱:lunwenbuluo@126.com