摘要：移動(dòng)Web應(yīng)用迅猛發(fā)展，對(duì)系統(tǒng)的響應(yīng)速度要求更高，同時(shí)要降低數(shù)據(jù)傳輸量，以便減少話費(fèi)支出。傳統(tǒng)的Web HTTP工作模式，由于在請(qǐng)求和響應(yīng)中附加大量數(shù)據(jù)，難以滿足移動(dòng)用戶(hù)需求。該文結(jié)合了移動(dòng)Web框架Sencha Touch和WebSocket技術(shù)，設(shè)計(jì)實(shí)現(xiàn)了全新模式的移動(dòng)Web應(yīng)用，克服了普通Web的缺點(diǎn)，提升了系統(tǒng)的性能。

關(guān)鍵詞： Sencha Touch； WebSocket； Spring； Hibernate

中圖分類(lèi)號(hào)：TP393.09 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）05-0942-04

Mobile Web App Designing and Implementing Based on Sencha Touch and WebSocket

LV Hai-dong

（City Institute Dalian University of Technology， Dalian 116600， China）

Abstract： With the rapid development of mobile Web application， the response speed of the system requirements are higher， at the same time to reduce the amount of data transmission， in order to reduce the cost of expenditure. In traditional Web HTTP mode， due to additional amounts of data in the request and response， it is unable to meet the needs of mobile users. This paper combines the mobile Web framework Sencha Touch and WebSocket technology， design and implementation of mobile Web application of new mode， overcomes the drawbacks of conventional Web， improving system performance.

Key words： Sencha Touch； WebSocket； Spring； Hibernate

隨著智能手機(jī)和平板電腦的普及，移動(dòng)Web開(kāi)發(fā)成為發(fā)展最快的領(lǐng)域，各種移動(dòng)Web框架如雨后春筍層出不窮，Sencha Touch就是眾多框架中的佼佼者。它是基于HTML 5的移動(dòng)應(yīng)用JavaScript框架，可以讓W(xué)eb 應(yīng)用界面模擬原生應(yīng)用。其具有優(yōu)美用戶(hù)界面組件和豐富的數(shù)據(jù)管理，完全使用標(biāo)準(zhǔn)HTML 5和CSS3，全面兼容Android，iOS及其他移動(dòng)設(shè)備。Sencha Touch與其他移動(dòng)框架比較，是個(gè)較重量級(jí)的移動(dòng)Web應(yīng)用框架，由于其對(duì)觸摸屏豐富的UI設(shè)計(jì)，支持用戶(hù)復(fù)雜交互，并使用純JavaScript實(shí)現(xiàn)頁(yè)面元素布局，因此適合用于開(kāi)發(fā)業(yè)務(wù)邏輯比較復(fù)雜的移動(dòng)Web應(yīng)用，如交互較多的OA系統(tǒng)，ERP管理系統(tǒng)等。

但在與服務(wù)器端的數(shù)據(jù)交互過(guò)程中，Sencha Touch依然使用傳統(tǒng)的HTTP請(qǐng)求響應(yīng)模式的AJAX技術(shù)，難以實(shí)現(xiàn)數(shù)據(jù)的快速響應(yīng)和顯示。由于每次AJAX的HTTP請(qǐng)求和響應(yīng)中依然包含大量重復(fù)的頭信息，致使數(shù)據(jù)傳輸量增加，不但降低應(yīng)用的響應(yīng)速度，而且會(huì)導(dǎo)致用戶(hù)話費(fèi)的損失以及手機(jī)電源的損耗。

HTML5的WebSocket規(guī)范的提出，將徹底取代現(xiàn)有的AJAX技術(shù)，拋棄了原有Web應(yīng)用的請(qǐng)求/響應(yīng)模式，取而代之的是客戶(hù)和服務(wù)器的雙向?qū)崟r(shí)數(shù)據(jù)傳輸，極大提高了數(shù)據(jù)傳輸效率，使得移動(dòng)Web應(yīng)用可以與原生應(yīng)用相媲美。該文結(jié)合Sench Touch和WebSocket開(kāi)發(fā)出高效的Web應(yīng)用系統(tǒng)，為突出重點(diǎn)，只重點(diǎn)介紹二者整合，即實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)查詢(xún)和更新。

1 系統(tǒng)設(shè)計(jì)

此移動(dòng)Web應(yīng)用是將某中型電子產(chǎn)品銷(xiāo)售企業(yè)的原有進(jìn)銷(xiāo)存Web應(yīng)用擴(kuò)展到移動(dòng)終端，使得公司的業(yè)務(wù)人員可以隨時(shí)隨地進(jìn)行業(yè)務(wù)處理，尤其是通過(guò)WebSocket技術(shù)，將所有數(shù)據(jù)實(shí)時(shí)推送到手機(jī)客戶(hù)端，實(shí)現(xiàn)公司業(yè)務(wù)處理高效快捷。在開(kāi)發(fā)過(guò)程中無(wú)論是數(shù)據(jù)輸入和查詢(xún)，都通過(guò)WebSocket實(shí)現(xiàn)客戶(hù)端和服務(wù)器端的雙向?qū)崟r(shí)通訊。

系統(tǒng)依然采用傳統(tǒng)的MVC模式，服務(wù)端采用JavaEE整合Hibernate4，Spring4，數(shù)據(jù)庫(kù)采用MySQL5.5，Web服務(wù)器采用Sun GlassFish4.0。其中GlassFish4和Spring4都提供了WebSocket服務(wù)器的編程支持。客戶(hù)端完全采用Sencha Touch2.3，由于其是基于HTML5 的JS框架，可以無(wú)縫集成WebSocket的異步編程模式。整個(gè)系統(tǒng)的總體架構(gòu)參見(jiàn)圖1所示。

服務(wù)器端由Hibernate擔(dān)任持久層職責(zé)，實(shí)現(xiàn)數(shù)據(jù)的CRUD，Spring整合Hibernate實(shí)現(xiàn)Hibernate的包裝和聲明式事務(wù)處理，同時(shí)使用Spring實(shí)現(xiàn)WebSocket Server，負(fù)責(zé)客戶(hù)端數(shù)據(jù)的接收和發(fā)送，當(dāng)客戶(hù)處于查詢(xún)模式時(shí)，通過(guò)Spring 的Schedule模塊定時(shí)讀取業(yè)務(wù)數(shù)據(jù)，并實(shí)時(shí)推送到客戶(hù)端Sencha Touch的DataView控件，實(shí)現(xiàn)查詢(xún)數(shù)據(jù)的實(shí)時(shí)更新，不需要客戶(hù)請(qǐng)求即可完成，實(shí)現(xiàn)全新模式的Web應(yīng)用。

客戶(hù)端完全采用Sencha Touch框架實(shí)現(xiàn)所有業(yè)務(wù)頁(yè)面，使用基于EXTJS的MVC模式，通過(guò)編寫(xiě)Model類(lèi)JS，控制類(lèi)JS和視圖view類(lèi)JavaScript，實(shí)現(xiàn)單頁(yè)面的移動(dòng)Web應(yīng)用。通過(guò)控制器類(lèi)JavaScript，將Model類(lèi)和View類(lèi)整合起來(lái)，實(shí)現(xiàn)業(yè)務(wù)數(shù)據(jù)管理。

客戶(hù)端和服務(wù)器端的數(shù)據(jù)傳輸全部采用JSON格式，無(wú)論客戶(hù)發(fā)送的數(shù)據(jù)和命令，還是服務(wù)端接收和發(fā)送的數(shù)據(jù)，比XML格式具有更少的數(shù)據(jù)傳輸，能極大提高傳輸效率，改善系統(tǒng)的響應(yīng)速度，提高用戶(hù)的滿意度。

2 系統(tǒng)編程實(shí)現(xiàn)

為節(jié)省篇幅，傳統(tǒng)的Spring和Hibernate整合編程不做贅述，重點(diǎn)介紹使用WebSocket實(shí)現(xiàn)數(shù)據(jù)的傳輸。

2.1 WebSocket服務(wù)器實(shí)現(xiàn)

Spring4提供了WebSocket API的支持，使得編寫(xiě)WebSocket Server簡(jiǎn)單高效，服務(wù)器端處理WebSocket的發(fā)送和接收的編程非常方便，完全克服了使用JavaEE服務(wù)器內(nèi)置的WebSocketServlet實(shí)現(xiàn)WebSocket Server的復(fù)雜性。編程時(shí)只要繼承TextWebSocketHander父類(lèi)，重寫(xiě)方法handerTextMessage即可，且自動(dòng)工作在異步模式，得以實(shí)現(xiàn)數(shù)據(jù)的高速傳輸。使用Spring4實(shí)現(xiàn)的WebSocket Server代碼參見(jiàn)如下代碼示意：

import org.springframework.web.socket.WebSocketHandler；

import org.springframework.web.socket.WebSocketSession；

import org.springframework.web.socket.TextMessage；

//定義庫(kù)存業(yè)務(wù)處理的Socket Server處理類(lèi)

public class StockBusinessHandler extends TextWebSocketHandler {

private IStockBusiness stockBusiness=null； //依賴(lài)注入庫(kù)存業(yè)務(wù)處理類(lèi)負(fù)責(zé)數(shù)據(jù)的DB讀寫(xiě)

public EchoEndpoint（IStockBusiness stockBusiness） {

this.stockBusiness = stockBusiness； }

@Override //Socket請(qǐng)求處理方法

public void handleTextMessage（WebSocketSession session， TextMessage message） {

//接收請(qǐng)求命令和參數(shù)

String jsoncommand=message.getPayload（）；

//調(diào)用業(yè)務(wù)方法取得查詢(xún)數(shù)據(jù)，業(yè)務(wù)方法內(nèi)解析JSON格式的命令和參數(shù)，使用HibernateTemplate對(duì)象完成數(shù)據(jù)的增加，修改，刪除和查詢(xún)。

String jsonData=stockBusiness.getData（jsoncommand）；

//發(fā)送查詢(xún)數(shù)據(jù)到WebSocket客戶(hù)端，查詢(xún)數(shù)據(jù)以JSON格式封裝

TextMessage message=new TextMessage（jsondata）；

session.sendMessage（message）；

}

}

編好后的WebSocket Server類(lèi)可以通過(guò)Spring的XML配置文件方式，生成WebSocket需要的URL請(qǐng)求地址，配置的示意代碼如下所示。

xmlns：xsi="http：//www.w3.org/2001/XMLSchema-instance"

xmlns：websocket="http：//www.springframework.org/schema/websocket"">

實(shí)際項(xiàng)目中配置了多個(gè)Socket Server Hander類(lèi)用于處理不同模塊的數(shù)據(jù)管理和查詢(xún)。

2.2 客戶(hù)端編程

移動(dòng)客戶(hù)端使用Sencha Touch的MVC編程模式，分別為每個(gè)業(yè)務(wù)模塊定義Model，Controller，View和DataStore JavaScript文件，整個(gè)項(xiàng)目只需要一個(gè)主啟動(dòng)頁(yè)面即可，所有的業(yè)務(wù)頁(yè)面完全使用Sencha Touch的JS代碼實(shí)現(xiàn)，具體MVC編程可參見(jiàn)Sencha網(wǎng)站，在此不再贅述。

Sencha Touch中由控制器類(lèi)負(fù)責(zé)頁(yè)面的顯示，事件的處理以及不同View對(duì)象的載入和銷(xiāo)毀，進(jìn)而實(shí)現(xiàn)頁(yè)面的切換。如下示意代碼是產(chǎn)品庫(kù)存管理控制器類(lèi)，當(dāng)控制器類(lèi)載入時(shí)，自動(dòng)顯示產(chǎn)品庫(kù)存列表頁(yè)面View對(duì)象，當(dāng)頁(yè)面載入進(jìn)DOM后，自動(dòng)啟動(dòng)函數(shù)showPanel，實(shí)現(xiàn)頁(yè)面數(shù)據(jù)的載入和處理。本案例中會(huì)自動(dòng)發(fā)起WebSocket連接，請(qǐng)求服務(wù)器發(fā)送默認(rèn)的產(chǎn)品庫(kù)存信息，當(dāng)頁(yè)面中做進(jìn)一步檢索操作后，會(huì)再次使用當(dāng)前WebSocket連接，發(fā)送新的參數(shù)，請(qǐng)求服務(wù)器發(fā)送新的查詢(xún)結(jié)果。

Ext.define（'erp.controller.inventory.Product'，{

extend：'Ext.app.Controller'，

views： ['erp.view.inventory.Product']，

init：function（）

{

this.control（{

'viewport>panel'：{

render：this.showPanel

}

}）；

}，

showPanel：function（）

{ //定義產(chǎn)品庫(kù)存顯示頁(yè)面初始化事件

//WebSocket服務(wù)器URL地址，注意協(xié)議使用的是ws，而不是http

var url = "ws：//210.30.108.30：8080//inventory/stock "；

var w = new WebSocket（url）；

//監(jiān)聽(tīng)連接建立事件

w.onopen = function（） { alert（"WS OPEN"）；}；

//監(jiān)聽(tīng)服務(wù)器數(shù)據(jù)到達(dá)事件，數(shù)據(jù)由服務(wù)器推送到客戶(hù)端

w.onmessage = function（data） {

//取得服務(wù)器發(fā)送的JSON數(shù)據(jù)，直接賦予頁(yè)面的Store對(duì)象的data屬性，

//由Sencha Touch自動(dòng)更新View的DataView控件顯示

this.view.store.data=data；

}；

//連接斷開(kāi)事件

w.onclose = function（e） { 連接斷開(kāi)處理代碼 }；

//連接異常事件

w.onerror = function（e） { 異常處理代碼 }；

//客戶(hù)端向服務(wù)器端發(fā)送處理請(qǐng)求，要求顯示所有的產(chǎn)品庫(kù)存列表。

w.send（{module："stock"，command："list"，scope："all"}）；

}

}）；

上面的控制器類(lèi)需要定義如下JavaScript類(lèi)，首先是表達(dá)產(chǎn)品的Model類(lèi)，示意代碼如下。

Ext.define（'erp.model.inventory.stock.Product'， {

extend： 'Ext.data.Model'，

fields： [

{ name： 'id'， type： 'int' }，

{ name： 'name'， type： 'string' }，

{ name： 'unitprice'， type： float' }，

{ name： 'stockqty'， type： float' }

]

}）；

在Model類(lèi)基礎(chǔ)上，定義產(chǎn)品讀取的數(shù)據(jù)倉(cāng)庫(kù)類(lèi)Srore，由Store負(fù)責(zé)讀取服務(wù)器的數(shù)據(jù)，發(fā)送到View中的DateView控件上，傳統(tǒng)的方式是通過(guò)AJAX Proxy的HTTP請(qǐng)求，發(fā)起向服務(wù)器的請(qǐng)求，由服務(wù)器響應(yīng)發(fā)回JSON數(shù)據(jù)。在本文的新模式中，Store不再發(fā)送AJAX請(qǐng)求，而是服務(wù)器通過(guò)WebSocket將數(shù)據(jù)推送到客戶(hù)端，客戶(hù)端接收到數(shù)據(jù)后，直接將數(shù)據(jù)設(shè)置到Store的data屬性，實(shí)現(xiàn)Store的數(shù)據(jù)更新，Sench Touch監(jiān)測(cè)Store變化自動(dòng)更新DataView的數(shù)據(jù)顯示，實(shí)現(xiàn)了全新模式的Web應(yīng)用。產(chǎn)品檢索的Store定義示意代碼如下：

Ext.define（'erp.store.inventory.Product'， {

extend：'Ext.data.Store'，

model： 'erp.model.inventory.Product'，

autoLoad： true

}）；

最后定義顯示產(chǎn)品庫(kù)存的View類(lèi)，示意代碼如下：

Ext.define（'erp.view.inventory.Product'， {

extend：'Ext.panel'，

docked：'top'，

layout：'hbox'，

items：[

{baseCls：'title'，html：'產(chǎn)品名稱(chēng)'}，

{baseCls：'title'，html：'庫(kù)存'}，

{

xtype：'dataview'，

fullscreen：true，

store：'erp.store.inventory.Product'，

baseCls：'erp.model.inventory.Product'，

itemTpl：'

}

]

}）；

顯示產(chǎn)品及庫(kù)存的View通過(guò)Controller類(lèi)的Views屬性引入到控制器中，實(shí)現(xiàn)了Sencha Touch的MVC模式編程。按照Sencha Touch的設(shè)計(jì)模式，這些類(lèi)都定義在單獨(dú)的JavaScript文件中，實(shí)現(xiàn)了代碼分離，保證了項(xiàng)目的可維護(hù)性，并可以實(shí)現(xiàn)最大化的代碼重用，如Model類(lèi)和Store類(lèi)可以被不同的View共享。產(chǎn)品View類(lèi)在移動(dòng)終端的顯示界面如圖2所示。

圖2 移動(dòng)WEB庫(kù)存查詢(xún)顯示界面

3 結(jié)束語(yǔ)

本文在傳統(tǒng)的AJAX應(yīng)用中全新地引入了WebSocket數(shù)據(jù)傳輸技術(shù)，徹底改變了以往Web的請(qǐng)求/響應(yīng)的同步工作模式所帶來(lái)的性能的限制，利用WebSocket的實(shí)時(shí)、雙向傳輸以及異步工作模式，極大提高了Web應(yīng)用的數(shù)據(jù)傳輸速度，必將帶來(lái)Web應(yīng)用的全面革新。

參考文獻(xiàn)：

[1] 陸凌牛.Sencha Touch權(quán)威指南[M].北京：機(jī)械工業(yè)出版社，2012.

[1] 唐俊開(kāi).HTML5移動(dòng)Web開(kāi)發(fā)指南[M].北京：電子工業(yè)出版社，2012.

[3] 溫照松，易仁偉，姚寒冰.基于WebSocket的實(shí)時(shí)Web應(yīng)用解決方案[J].電腦知識(shí)與技術(shù)，2012（6）.

[4] 肖在昌，楊文暉，劉兵.基于WebSocket的實(shí)時(shí)技術(shù)[J].電腦與電信，2012（12）.

[5] 韓安.HTML5 WebSocket技術(shù)研究[J].電子世界，2013（10）.