□陸 釗

（玉林師范學(xué)院 計(jì)算機(jī)科學(xué)與工程學(xué)院，廣西 玉林 537000）

智慧校園無縫集成框架的技術(shù)應(yīng)用研究

□陸 釗

（玉林師范學(xué)院 計(jì)算機(jī)科學(xué)與工程學(xué)院，廣西 玉林 537000）

建設(shè)智慧校園是大數(shù)據(jù)時(shí)代高校信息化發(fā)展的方向，本文基于HTML5和SOA技術(shù)對(duì)智慧校園無縫集成問題提出一種整合的構(gòu)建框架，通過理論分析、具體需求設(shè)計(jì)和應(yīng)用測(cè)試等方面的闡述，證實(shí)該框架的技術(shù)應(yīng)用可行，達(dá)到實(shí)用性、敏捷性的目標(biāo).

智慧校園；無縫集成；Web Service；Web Worker

1 前言

目前，大部分高校都已逐步實(shí)現(xiàn)信息化管理，但存在沒有整體規(guī)劃的問題，導(dǎo)致各種應(yīng)用服務(wù)自成體系，各系統(tǒng)不能進(jìn)行數(shù)據(jù)互通和協(xié)同互作.在基于原有各類系統(tǒng)建設(shè)智慧校園服務(wù)平臺(tái)時(shí)，需要采用無縫集成框架來解決上述問題[1].無縫集成框架的構(gòu)建，能重新整合原先難以互相協(xié)作的業(yè)務(wù)流程，有效改善現(xiàn)有系統(tǒng)之間調(diào)用的網(wǎng)狀關(guān)系，使得系統(tǒng)之間的協(xié)作更加緊密，還能夠消除信息孤島，提高數(shù)據(jù)資源的利用率，管控能力和可視化更強(qiáng)[2].

HTML5是HTML最新的修訂版本，2014年10月由W3C（萬維網(wǎng)聯(lián)盟）完成標(biāo)準(zhǔn)制定.目標(biāo)是取代1999年所制定的HTML4.01和XHTML1.0標(biāo)準(zhǔn)，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求，使跨平臺(tái)內(nèi)容顯示更加流暢[3].HTML5增加了更多樣化的API，能增強(qiáng)瀏覽器的功能，更加適配移動(dòng)終端設(shè)備的應(yīng)用.本文論及的HTML5，是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合，即廣義的HTML5.SOA（Service-Oriented Architecture，設(shè)計(jì)面向服務(wù)的體系架構(gòu)）是一種成熟的應(yīng)用集成框架，已經(jīng)被廣泛構(gòu)建于企業(yè)級(jí)的應(yīng)用集成[4].SOA具有很好的適應(yīng)性，它屏蔽系統(tǒng)底層的細(xì)節(jié)，提供調(diào)用的一致性，使得接口的定義與集成服務(wù)所在的操作系統(tǒng)和設(shè)計(jì)語言無關(guān)，能夠非常靈活的移植到任何平臺(tái)上.

智慧校園服務(wù)平臺(tái)采用HTML5和SOA框架提供的應(yīng)用集成方案就可以實(shí)現(xiàn)無縫集成，通過構(gòu)建開放的標(biāo)準(zhǔn)API（應(yīng)用程序接口）和應(yīng)用集成規(guī)范，便捷地將各種校園應(yīng)用以服務(wù)的形式提供給移動(dòng)客戶端，還能在集成框架上加入新的應(yīng)用服務(wù).采用師生統(tǒng)一的身份認(rèn)證登錄，還能實(shí)現(xiàn)多功能應(yīng)用的“一帳號(hào)”式訪問.以實(shí)用性、敏捷性為目標(biāo)，本文主要研究基于HTML5和SOA技術(shù)的智慧校園無縫集成框架實(shí)現(xiàn)方案.

2 無縫集成框架

2.1 HTML5直連模式

如果應(yīng)用對(duì)于用戶交互方式及響應(yīng)上并沒有提出太高的要求，HTML5的跨平臺(tái)優(yōu)勢(shì)和性能完全可以達(dá)到.HTML5能夠?qū)eb應(yīng)用服務(wù)的界面適應(yīng)顯示于各種移動(dòng)終端的瀏覽器上，即自適應(yīng)網(wǎng)頁（Responsive Web）.智慧校園的移動(dòng)應(yīng)用可以利用這方面特性，將各種校園應(yīng)用無縫集成起來，只需要使用HTML5標(biāo)準(zhǔn)將原來的頁面和樣式做適當(dāng)?shù)恼{(diào)整.使用HTML5接口直連模式的具體流程如下圖1所示（不包含虛線框內(nèi)部分）：

圖1 HTML5接口直連（HTML5與SOA整合）模式流程圖

以智能手機(jī)終端為例，利用HTML5無縫集成校園應(yīng)用的流程為：

（1）搭建HTML5手機(jī)版本應(yīng)用服務(wù)器；

（2）通過將原來的HTML4.01或XHTML1.0的應(yīng)用頁面解析發(fā)布為HTML5手機(jī)版本程序包，同步到原來業(yè)務(wù)引擎中，需要HTML5標(biāo)準(zhǔn)將原來的頁面和樣式做適當(dāng)?shù)恼{(diào)整；

（3）生成的HTML5手機(jī)版本應(yīng)用服務(wù)器放置在 DMZ（Demilitarized Zone）服務(wù)器區(qū)，專供手機(jī)上網(wǎng)時(shí)使用；

（4）HTML5程序包的用戶帳號(hào)和密碼同步在LDAP（Lightweight Directory Access Protocol）或AD（Active Directory）的服務(wù)器上；

（5）應(yīng)用前端整合到手機(jī)客戶端的B/S集成器中，權(quán)限認(rèn)證集成在手機(jī)客戶端中.

2.2 HTML5與SOA整合模式

如果原系統(tǒng)業(yè)務(wù)邏輯比較復(fù)雜且對(duì)操作實(shí)時(shí)性要求較高，可以采用HTML5與SOA整合的模式.要將SOA整合的應(yīng)用集成服務(wù)傳送到客戶端，還需要將應(yīng)用服務(wù)頁面設(shè)計(jì)成 HTML5 標(biāo)準(zhǔn)，才能將應(yīng)用以相同的形式提供給客戶端使用，同時(shí)能減少因?yàn)橹匦略O(shè)計(jì)客戶端界面而產(chǎn)生的工作量.使用HTML5與SOA整合模式的具體流程如上圖1所示（包含虛線框內(nèi)部分）：

以智能手機(jī)終端為例，利用HTML5與SOA無縫集成校園應(yīng)用的流程為：

（1）搭建HTML5手機(jī)版本服務(wù)器；

（2）通過SOA后的應(yīng)用訪問，發(fā)布為HTML5手機(jī)版本程序包，同步到原來業(yè)務(wù)引擎中，需要按照HTML5和SOA規(guī)范發(fā)布應(yīng)用；

（3）生成的HTML5手機(jī)版本應(yīng)用服務(wù)器放置在DMZ（Demilitarized Zone）服務(wù)器區(qū)，專供手機(jī)上網(wǎng)時(shí)使用；

（4）HTML5程序包的用戶帳號(hào)和密碼同步在LDAP（Lightweight Directory Access Protocol）或AD（Active Directory）的服務(wù)器上；

（5）應(yīng)用前端整合到手機(jī)客戶端的B/S集成器中，權(quán)限認(rèn)證集成在手機(jī)客戶端中.

分析上述兩種模式，采用HTML5和SOA實(shí)現(xiàn)智慧校園無縫集成框架的核心實(shí)施方案為：

（1）設(shè)計(jì)良好的訪問接口，提供校園業(yè)務(wù)系統(tǒng)調(diào)用；

（2）提取原應(yīng)用系統(tǒng)的業(yè)務(wù)節(jié)點(diǎn)，基于SOA服務(wù)框架建立集成的服務(wù)模型；

（3）基于HTML5規(guī)范將原應(yīng)用服務(wù)轉(zhuǎn)換成適合移動(dòng)客戶端訪問的形式；

（4）對(duì)應(yīng)用服務(wù)提供良好的版本發(fā)布平臺(tái)，供移動(dòng)客戶端下載訪問；

（5）客戶端通過統(tǒng)一身份認(rèn)證在智慧校園平臺(tái)上，獲取其他應(yīng)用系統(tǒng)的服務(wù).

3 技術(shù)分析及實(shí)現(xiàn)案例

3.1 API創(chuàng)建

在SOA服務(wù)框架中，Web Service是一種新的利用網(wǎng)絡(luò)進(jìn)行應(yīng)用集成的解決方案，也是一種跨編程語言和跨操作系統(tǒng)平臺(tái)的遠(yuǎn)程調(diào)用技術(shù)，是構(gòu)造分布式、模塊化應(yīng)用程序和面向服務(wù)應(yīng)用集成的最新技術(shù)和發(fā)展趨勢(shì).單從結(jié)果上看，Web Service為一個(gè)應(yīng)用服務(wù)向外界暴露出一個(gè)能通過Web進(jìn)行調(diào)用的API[5]，移動(dòng)應(yīng)用（客戶端）能通過編程的方法在Web中調(diào)用這個(gè)應(yīng)用服務(wù).從結(jié)構(gòu)層次看，Web Service是可互操作的分布式應(yīng)用程序的平臺(tái)和標(biāo)準(zhǔn)，它定義了應(yīng)用程序如何在Web上實(shí)現(xiàn)互操作性.新版的常規(guī)動(dòng)態(tài)開發(fā)環(huán)境都包含組件來支持創(chuàng)建Web Service，可以按照它的標(biāo)準(zhǔn)對(duì)這些服務(wù)進(jìn)行查詢和訪問.例如.NET開發(fā)的應(yīng)用服務(wù)，可以借助Visual Studio軟件進(jìn)行對(duì)話式設(shè)計(jì)而后部署在IIS環(huán)境上.PHP也可以借助Zend Studio軟件或者在PHP5.0之后的版本中，使用自帶php_soap.dll類，結(jié)合SoapDiscovery.class.php就可以啟用來實(shí)現(xiàn)Web Service服務(wù)創(chuàng)建或者調(diào)用其他的API.Web Service標(biāo)準(zhǔn)輸出的是wsdl文檔xml格式的數(shù)據(jù)，如果僅僅是提取數(shù)據(jù)而不需要交互，也可以考慮把數(shù)據(jù)轉(zhuǎn)換成JSON格式輸出以便調(diào)用.

從上文可知，智慧校園平臺(tái)的內(nèi)容和服務(wù)大多是調(diào)用原有的系統(tǒng)來實(shí)現(xiàn)，例如新聞資訊類的內(nèi)容，就通常來自高校的門戶網(wǎng)站.一般高校網(wǎng)站大多以基于開源的PHP類CMS（內(nèi)容管理系統(tǒng)）進(jìn)行二次開發(fā)而成，其中以DedeCMS比較有代表性.接下來就以創(chuàng)建基于DedeCMS開發(fā)的高校門戶網(wǎng)站的資訊API為例分析這種關(guān)系是如何建立的[6].

（1）進(jìn)行數(shù)據(jù)格式轉(zhuǎn)換（jsonUtils.php）

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

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

配置正確后運(yùn)行api.php文件獲得如下JSON格式數(shù)據(jù)（限于篇幅只取1條）方便第三方應(yīng)用服務(wù)調(diào)用：

{"sc_info":{"id1":"255","title1":"標(biāo)題1","pubdate1":"1428921121","description1":"摘要文字1}}

3.2 多線程調(diào)用

當(dāng)智慧校園平臺(tái)及客戶端調(diào)用多個(gè)應(yīng)用服務(wù)時(shí)候會(huì)面臨優(yōu)先次序等問題，該如何解決呢？移動(dòng)應(yīng)用的交互、調(diào)用功能主要依賴于使用JavaScript技術(shù)，而JavaScript和DOM（Document Object Model，文檔對(duì)象模型）是單線程的，即JavaScript和頁面的UI會(huì)共用一個(gè)線程，所以當(dāng)頁面啟用或者點(diǎn)擊一個(gè)按鈕開始運(yùn)行JavaScript后，在這段代碼運(yùn)行完畢之前，頁面看似被“凍結(jié)”了而無法響應(yīng)用戶操作.HTML5為這個(gè)問題提供了解決方案，通過使用Web Worker這個(gè)HTML5里原生支持多線程的功能，可以使JavaScript在瀏覽器后臺(tái)運(yùn)行，而且可以同時(shí)執(zhí)行多個(gè)任務(wù)，不會(huì)占用瀏覽器自身線程而造成內(nèi)容界面無法交互.所以使用Web Worker不僅可以提高應(yīng)用的總體性能，并且還提升用戶體驗(yàn)，適合應(yīng)用在智慧校園無縫集成框架中，緩解調(diào)用多個(gè)應(yīng)用服務(wù)時(shí)產(chǎn)出的擁堵問題.

使用Web Worker主要分為兩部分[7]:

（1）Web主線程

①通過Worker=newWorker(url)加載一個(gè)JavaScript文件來創(chuàng)建一個(gè)Worker，同時(shí)返回一個(gè)Worker實(shí)例；

②通過Worker.postMessage(data)方法來向Worker發(fā)送數(shù)據(jù),并啟動(dòng)Worker；

③綁定Worker.onmessage方法來接收從Worker發(fā)送過來的數(shù)據(jù)；

④可以使用Worker.terminate()來終止一個(gè)Worker的執(zhí)行.

（2）Worker工作線程

①通過postMessage(data)方法來向主線程發(fā)送數(shù)據(jù)；

②綁定onmessage方法來接收主線程發(fā)送過來的數(shù)據(jù).

另外，可以在Worker線程中通過importScripts(url)加載另外的腳本文件，使得Web Worker功能更加強(qiáng)大[8]本文以后臺(tái)獲取城市天氣預(yù)報(bào)為例說明Web Worker與Web Service的協(xié)同應(yīng)用.

很多網(wǎng)站提供了免費(fèi)天氣預(yù)報(bào)的Web Service，提供的信息是JSON格式，在JavaScript里面處理JSON，Web Worker得到了結(jié)果后，經(jīng)過處理，用消息發(fā)給Web頁面，Web頁面再顯示出來.整個(gè)流程如圖2所示：

圖2 Web Worker與Web Service的協(xié)同應(yīng)用流程圖

該應(yīng)用實(shí)現(xiàn)的主要代碼如下：

（3）PHP部分（weather.php，解決JavaScript跨域問題）

將上文的三個(gè)文件放在PHP環(huán)境里，運(yùn)行調(diào)用文件weather.html，點(diǎn)擊屏幕指定區(qū)域就可以顯示特定城市的天氣情況.核心部分（work.js）里使用了XMLHttpRequest對(duì)象，優(yōu)化了程序結(jié)構(gòu).在實(shí)際應(yīng)用時(shí)還可以根據(jù)需要進(jìn)一步完善，用Web Worker同時(shí)加載了天氣預(yù)報(bào)以及校園資訊的顯示效果如圖3所示：

圖3 數(shù)據(jù)顯示界面

4 測(cè)試分析

為檢驗(yàn)多線程的性能情況，結(jié)合軟件測(cè)試?yán)碚摲椒?，搭建了測(cè)試環(huán)境，包括：

①API服務(wù)地址：

A：天氣預(yù)報(bào)http://weather.51wnl.com/weatherinfo/GetMoreWeather?cityCode=101300901&weatherTy pe=0

B：校園資訊

http://210.36.247.30/cxcy/api.php

②智慧校園平臺(tái)

使用北京酒仙橋數(shù)據(jù)中心虛擬主機(jī)替代，地址：http://www.**.cc/w/test.html

③測(cè)試工具

Pingdom專業(yè)網(wǎng)頁測(cè)評(píng)工具，可列出測(cè)試頁面的所有元素以及其加載時(shí)間和文件大小，選擇紐約測(cè)試點(diǎn).地址：http://tools.pingdom.com/fpt/

（1）測(cè)試一

對(duì)平臺(tái)頁面（test.html）按4種調(diào)用組合進(jìn)行修改，基于Pingdom工具以每種調(diào)用進(jìn)行100次有效測(cè)試，每種調(diào)用記錄最快的1次加載結(jié)果進(jìn)行分析.經(jīng)測(cè)試得到如下記錄表3：

表3 測(cè)試一數(shù)據(jù)記錄表

驗(yàn)證結(jié)果：①各獨(dú)立線程可以靈活調(diào)用；②雙線程可以快速完整加載；③各線程調(diào)用次序不影響總加載時(shí)間；

（2）測(cè)試二

如圖4的顯示布局，對(duì)兩個(gè)矩形區(qū)域（ul標(biāo)簽）分別不同次序使用〈ul onclick=” getWeather()”＞和〈ul onclick=” getNews()”＞（即左鍵單擊到矩形區(qū)域）操作觸發(fā)顯示數(shù)據(jù).經(jīng)測(cè)試得到如下記錄表4：

表4 測(cè)試二數(shù)據(jù)記錄表

驗(yàn)證結(jié)果：①兩個(gè)線程加載均可以獨(dú)立控制；②線程并行時(shí)不會(huì)因?yàn)槟硞€(gè)線程加載未完成而影響另一個(gè)線程的加載；③各個(gè)線程響應(yīng)（顯示）的快慢取決于平臺(tái)與被調(diào)用數(shù)據(jù)之間的傳輸速度；

5 總結(jié)展望

建設(shè)智慧校園是大數(shù)據(jù)時(shí)代高校信息化發(fā)展的方向，應(yīng)用新技術(shù)手段來實(shí)現(xiàn)它可以有效降低建設(shè)成本，本文所例舉的API創(chuàng)建和JSON調(diào)用方法能使系統(tǒng)更敏捷、高效.目前，HTML5的兼容性問題和Web Worker功能的局限問題還存在，但是隨著技術(shù)的進(jìn)步，這些問題也將得到解決. ■

[1]宗平，朱洪波，黃剛，等.智慧校園設(shè)計(jì)方法的研究[J].南京郵電大學(xué)學(xué)報(bào)(自然科學(xué)版). 2010，(04).

[2]茅志剛. 基于移動(dòng)互聯(lián)網(wǎng)的智慧校園服務(wù)平臺(tái)的研究與實(shí)現(xiàn)[D]. 碩士, 杭州電子科技大學(xué), 2014.

[3]HTML5 - 維基百科，自由的百科全書[Z].

[4]面向服務(wù)的體系結(jié)構(gòu)-維基百科，自由的百科全書[Z].

[5]Dojotoolkit. 關(guān)于Web Worker你必須知道的7件事-CSDN.NET[Z].

[6]Laofeng. DedeCMS如何二次開發(fā)Web Service(JSON篇)_百度文庫[Z].

[7]邱珊.使用HTML5 Web Worker提高Web的應(yīng)用性能研究[J].軟件導(dǎo)報(bào). 2013.

[8]IBM.深入HTML5 Web Worker 應(yīng)用實(shí)踐：多線程編程[Z].

【責(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

玉林師范學(xué)院2012年度校級(jí)科研項(xiàng)目（項(xiàng)目編號(hào)：2012YJQN27）

陸釗（1978～），男，廣西南寧人，玉林師范學(xué)院計(jì)算機(jī)科學(xué)與工程學(xué)院講師，碩士，研究方向：數(shù)據(jù)挖掘、Web應(yīng)用。