基于HTML5的异步数据传输
2022-06-08
对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.
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.