智慧校园无缝集成框架的技术应用研究

□陆 钊

（玉林师范学院 计算机科学与工程学院，广西 玉林 537000）

智慧校园无缝集成框架的技术应用研究

□陆 钊

（玉林师范学院 计算机科学与工程学院，广西 玉林 537000）

建设智慧校园是大数据时代高校信息化发展的方向，本文基于HTML5和SOA技术对智慧校园无缝集成问题提出一种整合的构建框架，通过理论分析、具体需求设计和应用测试等方面的阐述，证实该框架的技术应用可行，达到实用性、敏捷性的目标.

智慧校园；无缝集成；Web Service；Web Worker

1 前言

目前，大部分高校都已逐步实现信息化管理，但存在没有整体规划的问题，导致各种应用服务自成体系，各系统不能进行数据互通和协同互作.在基于原有各类系统建设智慧校园服务平台时，需要采用无缝集成框架来解决上述问题[1].无缝集成框架的构建，能重新整合原先难以互相协作的业务流程，有效改善现有系统之间调用的网状关系，使得系统之间的协作更加紧密，还能够消除信息孤岛，提高数据资源的利用率，管控能力和可视化更强[2].

HTML5是HTML最新的修订版本，2014年10月由W3C（万维网联盟）完成标准制定.目标是取代1999年所制定的HTML4.01和XHTML1.0标准，使网络标准达到符合当代的网络需求，使跨平台内容显示更加流畅[3].HTML5增加了更多样化的API，能增强浏览器的功能，更加适配移动终端设备的应用.本文论及的HTML5，是包括HTML、CSS和JavaScript在内的一套技术组合，即广义的HTML5.SOA（Service-Oriented Architecture，设计面向服务的体系架构）是一种成熟的应用集成框架，已经被广泛构建于企业级的应用集成[4].SOA具有很好的适应性，它屏蔽系统底层的细节，提供调用的一致性，使得接口的定义与集成服务所在的操作系统和设计语言无关，能够非常灵活的移植到任何平台上.

智慧校园服务平台采用HTML5和SOA框架提供的应用集成方案就可以实现无缝集成，通过构建开放的标准API（应用程序接口）和应用集成规范，便捷地将各种校园应用以服务的形式提供给移动客户端，还能在集成框架上加入新的应用服务.采用师生统一的身份认证登录，还能实现多功能应用的“一帐号”式访问.以实用性、敏捷性为目标，本文主要研究基于HTML5和SOA技术的智慧校园无缝集成框架实现方案.

2 无缝集成框架

2.1 HTML5直连模式

如果应用对于用户交互方式及响应上并没有提出太高的要求，HTML5的跨平台优势和性能完全可以达到.HTML5能够将Web应用服务的界面适应显示于各种移动终端的浏览器上，即自适应网页（Responsive Web）.智慧校园的移动应用可以利用这方面特性，将各种校园应用无缝集成起来，只需要使用HTML5标准将原来的页面和样式做适当的调整.使用HTML5接口直连模式的具体流程如下图1所示（不包含虚线框内部分）：

图1 HTML5接口直连（HTML5与SOA整合）模式流程图

以智能手机终端为例，利用HTML5无缝集成校园应用的流程为：

（1）搭建HTML5手机版本应用服务器；

（2）通过将原来的HTML4.01或XHTML1.0的应用页面解析发布为HTML5手机版本程序包，同步到原来业务引擎中，需要HTML5标准将原来的页面和样式做适当的调整；

（3）生成的HTML5手机版本应用服务器放置在 DMZ（Demilitarized Zone）服务器区，专供手机上网时使用；

（4）HTML5程序包的用户帐号和密码同步在LDAP（Lightweight Directory Access Protocol）或AD（Active Directory）的服务器上；

（5）应用前端整合到手机客户端的B/S集成器中，权限认证集成在手机客户端中.

2.2 HTML5与SOA整合模式

如果原系统业务逻辑比较复杂且对操作实时性要求较高，可以采用HTML5与SOA整合的模式.要将SOA整合的应用集成服务传送到客户端，还需要将应用服务页面设计成 HTML5 标准，才能将应用以相同的形式提供给客户端使用，同时能减少因为重新设计客户端界面而产生的工作量.使用HTML5与SOA整合模式的具体流程如上图1所示（包含虚线框内部分）：

以智能手机终端为例，利用HTML5与SOA无缝集成校园应用的流程为：

（1）搭建HTML5手机版本服务器；

（2）通过SOA后的应用访问，发布为HTML5手机版本程序包，同步到原来业务引擎中，需要按照HTML5和SOA规范发布应用；

（3）生成的HTML5手机版本应用服务器放置在DMZ（Demilitarized Zone）服务器区，专供手机上网时使用；

（4）HTML5程序包的用户帐号和密码同步在LDAP（Lightweight Directory Access Protocol）或AD（Active Directory）的服务器上；

（5）应用前端整合到手机客户端的B/S集成器中，权限认证集成在手机客户端中.

分析上述两种模式，采用HTML5和SOA实现智慧校园无缝集成框架的核心实施方案为：

（1）设计良好的访问接口，提供校园业务系统调用；

（2）提取原应用系统的业务节点，基于SOA服务框架建立集成的服务模型；

（3）基于HTML5规范将原应用服务转换成适合移动客户端访问的形式；

（4）对应用服务提供良好的版本发布平台，供移动客户端下载访问；

（5）客户端通过统一身份认证在智慧校园平台上，获取其他应用系统的服务.

3 技术分析及实现案例

3.1 API创建

在SOA服务框架中，Web Service是一种新的利用网络进行应用集成的解决方案，也是一种跨编程语言和跨操作系统平台的远程调用技术，是构造分布式、模块化应用程序和面向服务应用集成的最新技术和发展趋势.单从结果上看，Web Service为一个应用服务向外界暴露出一个能通过Web进行调用的API[5]，移动应用（客户端）能通过编程的方法在Web中调用这个应用服务.从结构层次看，Web Service是可互操作的分布式应用程序的平台和标准，它定义了应用程序如何在Web上实现互操作性.新版的常规动态开发环境都包含组件来支持创建Web Service，可以按照它的标准对这些服务进行查询和访问.例如.NET开发的应用服务，可以借助Visual Studio软件进行对话式设计而后部署在IIS环境上.PHP也可以借助Zend Studio软件或者在PHP5.0之后的版本中，使用自带php_soap.dll类，结合SoapDiscovery.class.php就可以启用来实现Web Service服务创建或者调用其他的API.Web Service标准输出的是wsdl文档xml格式的数据，如果仅仅是提取数据而不需要交互，也可以考虑把数据转换成JSON格式输出以便调用.

从上文可知，智慧校园平台的内容和服务大多是调用原有的系统来实现，例如新闻资讯类的内容，就通常来自高校的门户网站.一般高校网站大多以基于开源的PHP类CMS（内容管理系统）进行二次开发而成，其中以DedeCMS比较有代表性.接下来就以创建基于DedeCMS开发的高校门户网站的资讯API为例分析这种关系是如何建立的[6].

（1）进行数据格式转换（jsonUtils.php）

表1 jsonUtils.php代码流程分析表

表2 api.php代码流程分析表

配置正确后运行api.php文件获得如下JSON格式数据（限于篇幅只取1条）方便第三方应用服务调用：

{"sc_info":{"id1":"255","title1":"标题1","pubdate1":"1428921121","description1":"摘要文字1}}

3.2 多线程调用

当智慧校园平台及客户端调用多个应用服务时候会面临优先次序等问题，该如何解决呢？移动应用的交互、调用功能主要依赖于使用JavaScript技术，而JavaScript和DOM（Document Object Model，文档对象模型）是单线程的，即JavaScript和页面的UI会共用一个线程，所以当页面启用或者点击一个按钮开始运行JavaScript后，在这段代码运行完毕之前，页面看似被“冻结”了而无法响应用户操作.HTML5为这个问题提供了解决方案，通过使用Web Worker这个HTML5里原生支持多线程的功能，可以使JavaScript在浏览器后台运行，而且可以同时执行多个任务，不会占用浏览器自身线程而造成内容界面无法交互.所以使用Web Worker不仅可以提高应用的总体性能，并且还提升用户体验，适合应用在智慧校园无缝集成框架中，缓解调用多个应用服务时产出的拥堵问题.

使用Web Worker主要分为两部分[7]:

（1）Web主线程

①通过Worker=newWorker(url)加载一个JavaScript文件来创建一个Worker，同时返回一个Worker实例；

②通过Worker.postMessage(data)方法来向Worker发送数据,并启动Worker；

③绑定Worker.onmessage方法来接收从Worker发送过来的数据；

④可以使用Worker.terminate()来终止一个Worker的执行.

（2）Worker工作线程

①通过postMessage(data)方法来向主线程发送数据；

②绑定onmessage方法来接收主线程发送过来的数据.

另外，可以在Worker线程中通过importScripts(url)加载另外的脚本文件，使得Web Worker功能更加强大[8]本文以后台获取城市天气预报为例说明Web Worker与Web Service的协同应用.

很多网站提供了免费天气预报的Web Service，提供的信息是JSON格式，在JavaScript里面处理JSON，Web Worker得到了结果后，经过处理，用消息发给Web页面，Web页面再显示出来.整个流程如图2所示：

图2 Web Worker与Web Service的协同应用流程图

该应用实现的主要代码如下：

（3）PHP部分（weather.php，解决JavaScript跨域问题）

将上文的三个文件放在PHP环境里，运行调用文件weather.html，点击屏幕指定区域就可以显示特定城市的天气情况.核心部分（work.js）里使用了XMLHttpRequest对象，优化了程序结构.在实际应用时还可以根据需要进一步完善，用Web Worker同时加载了天气预报以及校园资讯的显示效果如图3所示：

图3 数据显示界面

4 测试分析

为检验多线程的性能情况，结合软件测试理论方法，搭建了测试环境，包括：

①API服务地址：

A：天气预报http://weather.51wnl.com/weatherinfo/GetMoreWeather?cityCode=101300901&weatherTy pe=0

B：校园资讯

http://210.36.247.30/cxcy/api.php

②智慧校园平台

使用北京酒仙桥数据中心虚拟主机替代，地址：http://www.**.cc/w/test.html

③测试工具

Pingdom专业网页测评工具，可列出测试页面的所有元素以及其加载时间和文件大小，选择纽约测试点.地址：http://tools.pingdom.com/fpt/

（1）测试一

对平台页面（test.html）按4种调用组合进行修改，基于Pingdom工具以每种调用进行100次有效测试，每种调用记录最快的1次加载结果进行分析.经测试得到如下记录表3：

表3 测试一数据记录表

验证结果：①各独立线程可以灵活调用；②双线程可以快速完整加载；③各线程调用次序不影响总加载时间；

（2）测试二

如图4的显示布局，对两个矩形区域（ul标签）分别不同次序使用〈ul onclick=” getWeather()”＞和〈ul onclick=” getNews()”＞（即左键单击到矩形区域）操作触发显示数据.经测试得到如下记录表4：

表4 测试二数据记录表

验证结果：①两个线程加载均可以独立控制；②线程并行时不会因为某个线程加载未完成而影响另一个线程的加载；③各个线程响应（显示）的快慢取决于平台与被调用数据之间的传输速度；

5 总结展望

建设智慧校园是大数据时代高校信息化发展的方向，应用新技术手段来实现它可以有效降低建设成本，本文所例举的API创建和JSON调用方法能使系统更敏捷、高效.目前，HTML5的兼容性问题和Web Worker功能的局限问题还存在，但是随着技术的进步，这些问题也将得到解决. ■

[1]宗平，朱洪波，黄刚，等.智慧校园设计方法的研究[J].南京邮电大学学报(自然科学版). 2010，(04).

[2]茅志刚. 基于移动互联网的智慧校园服务平台的研究与实现[D]. 硕士, 杭州电子科技大学, 2014.

[3]HTML5 - 维基百科，自由的百科全书[Z].

[4]面向服务的体系结构-维基百科，自由的百科全书[Z].

[5]Dojotoolkit. 关于Web Worker你必须知道的7件事-CSDN.NET[Z].

[6]Laofeng. DedeCMS如何二次开发Web Service(JSON篇)_百度文库[Z].

[7]邱珊.使用HTML5 Web Worker提高Web的应用性能研究[J].软件导报. 2013.

[8]IBM.深入HTML5 Web Worker 应用实践：多线程编程[Z].

【责任编辑 谢明俊】

On the Technology of the Seamless Integration Framework for Digital Campus

LU Zhao
(School of Science and Engineering, Yulin Normal University, Yunlin, Guangxi 537000)

The construction of digital campus is the direction for university informatization development in the era of big data. Based on HTML 5 and SOA technologies, the paper proposes an integrated construction framework to solve the problem of seamless integration in the construction of Digital Campus. Through theoretical analysis, and the elucidation of specific demand design and application test, the feasibility of the technology is proved, and the aim of practicality and agility is achieved.

wisdom campus; seamless integration; web service; web worker

TP39

A

1004-4671（2015）02-0123-09

2015-04-17

玉林师范学院2012年度校级科研项目（项目编号：2012YJQN27）

陆钊（1978～），男，广西南宁人，玉林师范学院计算机科学与工程学院讲师，硕士，研究方向：数据挖掘、Web应用。