基于WebSocket和SenchaTouch的移動Web應(yīng)用設(shè)計(jì)與實(shí)現(xiàn)

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

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

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

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

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

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

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

系統(tǒng)依然采用傳統(tǒng)的MVC模式，服務(wù)端采用JavaEE整合Hibernate4，Spring4，數(shù)據(jù)庫采用MySQL5.5，Web服務(wù)器采用Sun GlassFish4.0。其中GlassFish4和Spring4都提供了WebSocket服務(wù)器的編程支持?？蛻舳送耆捎肧encha Touch2.3，由于其是基于HTML5 的JS框架，可以無縫集成WebSocket的異步編程模式。整個(gè)系統(tǒng)的總體架構(gòu)參見圖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é)客戶端數(shù)據(jù)的接收和發(fā)送，當(dāng)客戶處于查詢模式時(shí)，通過Spring 的Schedule模塊定時(shí)讀取業(yè)務(wù)數(shù)據(jù)，并實(shí)時(shí)推送到客戶端Sencha Touch的DataView控件，實(shí)現(xiàn)查詢數(shù)據(jù)的實(shí)時(shí)更新，不需要客戶請求即可完成，實(shí)現(xiàn)全新模式的Web應(yīng)用。

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

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

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

import org.springframework.web.socket.WebSocketHandler；

import org.springframework.web.socket.WebSocketSession；

import org.springframework.web.socket.TextMessage；

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

public class StockBusinessHandler extends TextWebSocketHandler {

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

public EchoEndpoint（IStockBusiness stockBusiness） {

this.stockBusiness = stockBusiness； }

@Override //Socket請求處理方法

public void handleTextMessage（WebSocketSession session， TextMessage message） {

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

String jsoncommand=message.getPayload（）；

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

String jsonData=stockBusiness.getData（jsoncommand）；

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

TextMessage message=new TextMessage（jsondata）；

session.sendMessage（message）；

}

}

編好后的WebSocket Server類可以通過Spring的XML配置文件方式，生成WebSocket需要的URL請求地址，配置的示意代碼如下所示。

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

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

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

2.2 客戶端編程

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

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

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

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

var w = new WebSocket（url）；

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

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

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

w.onmessage = function（data） {

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

//由Sencha Touch自動更新View的DataView控件顯示

this.view.store.data=data；

}；

//連接斷開事件

w.onclose = function（e） { 連接斷開處理代碼 }；

//連接異常事件

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

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

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

}

}）；

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

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

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

extend：'Ext.panel'，

docked：'top'，

layout：'hbox'，

items：[

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

{baseCls：'title'，html：'庫存'}，

{

xtype：'dataview'，

fullscreen：true，

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

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

itemTpl：'

}

]

}）；

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

圖2 移動WEB庫存查詢顯示界面

3 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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

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