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

□陸 釗

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

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

□陸 釗

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

建設(shè)智慧校園是大數(shù)據(jù)時代高校信息化發(fā)展的方向，本文基于HTML5和SOA技術(shù)對智慧校園無縫集成問題提出一種整合的構(gòu)建框架，通過理論分析、具體需求設(shè)計和應(yīng)用測試等方面的闡述，證實(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ù)平臺時，需要采用無縫集成框架來解決上述問題[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ò)需求，使跨平臺內(nèi)容顯示更加流暢[3].HTML5增加了更多樣化的API，能增強(qiáng)瀏覽器的功能，更加適配移動終端設(shè)備的應(yīng)用.本文論及的HTML5，是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合，即廣義的HTML5.SOA（Service-Oriented Architecture，設(shè)計面向服務(wù)的體系架構(gòu)）是一種成熟的應(yīng)用集成框架，已經(jīng)被廣泛構(gòu)建于企業(yè)級的應(yīng)用集成[4].SOA具有很好的適應(yīng)性，它屏蔽系統(tǒng)底層的細(xì)節(jié)，提供調(diào)用的一致性，使得接口的定義與集成服務(wù)所在的操作系統(tǒng)和設(shè)計語言無關(guān)，能夠非常靈活的移植到任何平臺上.

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

2 無縫集成框架

2.1 HTML5直連模式

如果應(yīng)用對于用戶交互方式及響應(yīng)上并沒有提出太高的要求，HTML5的跨平臺優(yōu)勢和性能完全可以達(dá)到.HTML5能夠?qū)eb應(yīng)用服務(wù)的界面適應(yīng)顯示于各種移動終端的瀏覽器上，即自適應(yīng)網(wǎng)頁（Responsive Web）.智慧校園的移動應(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)時使用；

（4）HTML5程序包的用戶帳號和密碼同步在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ù)雜且對操作實(shí)時性要求較高，可以采用HTML5與SOA整合的模式.要將SOA整合的應(yīng)用集成服務(wù)傳送到客戶端，還需要將應(yīng)用服務(wù)頁面設(shè)計成 HTML5 標(biāo)準(zhǔn)，才能將應(yīng)用以相同的形式提供給客戶端使用，同時能減少因為重新設(shè)計客戶端界面而產(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)時使用；

（4）HTML5程序包的用戶帳號和密碼同步在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è)計良好的訪問接口，提供校園業(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)換成適合移動客戶端訪問的形式；

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

（5）客戶端通過統(tǒng)一身份認(rèn)證在智慧校園平臺上，獲取其他應(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)平臺的遠(yuǎn)程調(diào)用技術(shù)，是構(gòu)造分布式、模塊化應(yīng)用程序和面向服務(wù)應(yīng)用集成的最新技術(shù)和發(fā)展趨勢.單從結(jié)果上看，Web Service為一個應(yīng)用服務(wù)向外界暴露出一個能通過Web進(jìn)行調(diào)用的API[5]，移動應(yīng)用（客戶端）能通過編程的方法在Web中調(diào)用這個應(yīng)用服務(wù).從結(jié)構(gòu)層次看，Web Service是可互操作的分布式應(yīng)用程序的平臺和標(biāo)準(zhǔn)，它定義了應(yīng)用程序如何在Web上實(shí)現(xiàn)互操作性.新版的常規(guī)動態(tài)開發(fā)環(huán)境都包含組件來支持創(chuàng)建Web Service，可以按照它的標(biāo)準(zhǔn)對這些服務(wù)進(jìn)行查詢和訪問.例如.NET開發(fā)的應(yīng)用服務(wù)，可以借助Visual Studio軟件進(jìn)行對話式設(shè)計而后部署在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)用.

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

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

（1）Web主線程

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

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

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

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

（2）Worker工作線程

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

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

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

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

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

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

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

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

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

4 測試分析

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

①API服務(wù)地址：

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

B：校園資訊

http://210.36.247.30/cxcy/api.php

②智慧校園平臺

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

③測試工具

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

（1）測試一

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

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

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

（2）測試二

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

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

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

5 總結(jié)展望

建設(shè)智慧校園是大數(shù)據(jù)時代高校信息化發(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].南京郵電大學(xué)學(xué)報(自然科學(xué)版). 2010，(04).

[2]茅志剛. 基于移動互聯(lián)網(wǎng)的智慧校園服務(wù)平臺的研究與實(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)報. 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年度校級科研項目（項目編號：2012YJQN27）

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