基于SingalR 的Web實(shí)時(shí)應(yīng)用程序框架設(shè)計(jì)

劉黎志

（1.武漢工程大學(xué) 智能機(jī)器人湖北省重點(diǎn)實(shí)驗(yàn)室，湖北 武漢430205；2.武漢工程大學(xué) 計(jì)算機(jī)科學(xué)與工程學(xué)院，湖北 武漢430205）

0 引 言

隨著移動(dòng)互聯(lián)網(wǎng)應(yīng)用的迅速發(fā)展，傳統(tǒng)的客戶端瀏覽器與服務(wù)器之間通過(guò)請(qǐng)求／應(yīng)答的方式獲取信息的方式已經(jīng)不能滿足用戶對(duì)數(shù)據(jù)實(shí)時(shí)更新的要求，用戶希望更新的數(shù)據(jù)能夠?qū)崟r(shí)推送到自己的桌面、手機(jī)或平板上，而不需要手動(dòng)更新［1－4］。HTML5 WebSocket可 以 取 代Comet的Long Pooling及Forever Frame技術(shù)，使得服務(wù)器和客戶端瀏覽器之間具有實(shí)時(shí)通訊能力。由于WebScoket連接實(shí)際上就是TCP連接，所以基于WebSocket開(kāi)發(fā)的實(shí)時(shí)應(yīng)用程序可以在數(shù)據(jù)傳輸穩(wěn)定性及數(shù)據(jù)傳輸量上得到極大提升［5－8］。微軟的SingalR通過(guò)兼容Comet及HTML5 Web Socket，結(jié)合OWIN （open Web interface for.NET）、Ajax、JQuery等技術(shù)，提供給開(kāi)發(fā)人員一個(gè)先進(jìn)的Web實(shí)時(shí)應(yīng)用程序開(kāi)發(fā)平臺(tái)。

1 SingalR

SingalR是一組可實(shí)現(xiàn)Web實(shí)時(shí)應(yīng)用程序的組件集合，SingalR 抽象了應(yīng)用程序客戶端和服務(wù)端之間的傳輸協(xié)議，SingalR 支持HTML5的WebSocket，Server Send Event協(xié)議及Comet的Ajax Long Pooling，F(xiàn)orever Frame協(xié)議［9］。SingalR 根據(jù)服務(wù)端及客戶端的不同配置環(huán)境，如瀏覽器類型及版本、操作系統(tǒng)類型，用戶配置等自動(dòng)選擇傳輸協(xié)議。在選擇傳輸協(xié)議的過(guò)程中，SingalR 會(huì)盡量使用HTML5的WebSocket協(xié)議，使用WebSocket協(xié)議可以最有效地利用服務(wù)端內(nèi)存，獲得最低的傳輸延遲及完全的服務(wù)端與客戶端的雙工通信，但使用WebSocket協(xié)議要求服務(wù)端的操作系統(tǒng) 必 須 是Windows Server 2012 或Windows 8，且 支 持.Net Framework 4.5。客戶端必須是最新版的Microsoft Internet Explorer，Google Chrome或Mozilla Firefox瀏覽器。

SingalR 在服務(wù)端和客戶端之間建立永久的連接，服務(wù)端可以通過(guò)遠(yuǎn)程過(guò)程調(diào)用 （RPC）的方式調(diào)用客戶端的Javascipt函數(shù)，從而使得服務(wù)端可以主動(dòng)推送消息到所有的連接客戶端，或特定的客戶端。而不需要客戶端按傳統(tǒng)的請(qǐng)求－應(yīng)答 （request－response）刷新頁(yè)面獲取最新數(shù)據(jù)?？蛻舳藙t利用SingalR Hub上下文代理類調(diào)用服務(wù)端函數(shù)。服務(wù)端與客戶端相互調(diào)用的過(guò)程如圖1所示。

圖1 服務(wù)端客戶端相互調(diào)用

SingalR 負(fù)責(zé)維護(hù)所有與服務(wù)端連接的客戶端，新加入的客戶端及退出的客戶端，SingalR 是可以自動(dòng)感知的，從而使得服務(wù)端的更新可以實(shí)時(shí)的推送到所有客戶端。SingalR 提供兩種永久鏈接及Hub兩種方式連接服務(wù)端及客戶端，永久鏈接提供PersistentConnection類供開(kāi)發(fā)人員以類似于WCF （windows communication foundation）的方式進(jìn)行相互方法調(diào)用，而Hub則提供更抽象的調(diào)用通道進(jìn)行雙向方法調(diào)用，使得服務(wù)端及客戶端都可以像調(diào)用本地方法一樣調(diào)用對(duì)方的方法，同時(shí)支持強(qiáng)類型的參數(shù)傳遞及模型綁定。服務(wù)端與客戶端的連接方式及傳輸協(xié)議如圖2所示。

圖2 服務(wù)端與客戶端的連接方式及傳輸協(xié)議

2 Web實(shí)時(shí)應(yīng)用程序框架

Web實(shí)時(shí)應(yīng)用程序一般需要處理3種場(chǎng)景：①客戶端調(diào)用服務(wù)端方法獲取數(shù)據(jù)集合，并使用HTML 將數(shù)據(jù)集合在客戶端瀏覽器中展示，服務(wù)端方法不需要廣播調(diào)用其它連接的客戶端方法更新客戶端頁(yè)面，該場(chǎng)景用于一個(gè)新的客戶端連接到SingalR Hub時(shí)。②客戶端調(diào)用服務(wù)端方法更新應(yīng)用程序狀態(tài)、執(zhí)行業(yè)務(wù)邏輯等操作，導(dǎo)致應(yīng)用程序數(shù)據(jù)、狀態(tài)、業(yè)務(wù)規(guī)則發(fā)生變化，從而需要從服務(wù)端廣播調(diào)用所連接的客戶端方法，以反映這些改變，該場(chǎng)景用于用戶與客戶端頁(yè)面進(jìn)行交互，操作業(yè)務(wù)邏輯時(shí)。③服務(wù)端定時(shí)將數(shù)據(jù)更新發(fā)送到所連接的客戶端，需要從服務(wù)端廣播調(diào)用所連接的客戶端方法，從而反應(yīng)數(shù)據(jù)更新，該場(chǎng)景用戶服務(wù)端主動(dòng)推送數(shù)據(jù)到客戶端的情況，不需要客戶端主動(dòng)請(qǐng)求，如股票數(shù)據(jù)的實(shí)時(shí)變化、Web瀏覽器實(shí)時(shí)聊天等。本文提出的Web 實(shí)時(shí)應(yīng)用程序框架基于SingalR 的WebSocket傳輸協(xié)議及Hub連接方式，能滿足上述3種場(chǎng)景的功能需求。

2.1 Web實(shí)時(shí)應(yīng)用程序框架設(shè)計(jì)

當(dāng)客戶端瀏覽器向服務(wù)端實(shí)時(shí)應(yīng)用程序發(fā)出連接請(qǐng)求時(shí)，SingalR在客戶端與服務(wù)端之間建立永久的連接，并使用WebSocket進(jìn)行雙工通訊。連接完成后，OWIN （open Web interface for.NET）的Startup.cs類負(fù)責(zé)啟動(dòng)服務(wù)端與客戶端之間SingalR Hub上下文路由，服務(wù)端與客戶端的雙向方法調(diào)用及結(jié)果返回通過(guò)SingalR Hub上下文完成［10］。

客戶端調(diào)用服務(wù)端方法需要通過(guò)調(diào)用SingalR Hub類的實(shí)例方法，但SingalR Hub實(shí)例類只在客戶端連接到服務(wù)端時(shí)，瞬間在服務(wù)端內(nèi)存中存在，所以處理上述3類場(chǎng)景的方法不能在SingalR Hub實(shí)例類中定義，而需要在單獨(dú)的業(yè)務(wù)邏輯類中定義，并且要求該業(yè)務(wù)邏輯類實(shí)例在應(yīng)用程序的生命周期中為唯一且靜態(tài)只讀的，以便每個(gè)SingalR Hub類實(shí)例可以訪問(wèn)該實(shí)例，從而調(diào)用其實(shí)例方法。為使得業(yè)務(wù)邏輯類實(shí)例可以通過(guò)SingalR Hub調(diào)用客戶端腳本方法，需要有當(dāng)前所有客戶端連接的實(shí)例引用，該實(shí)例引用可以通過(guò)GlobalHost.ConnectionManager.GetHubContext＜T＞（）.Clients得到，ConnectionManager負(fù)責(zé)動(dòng)態(tài)維護(hù)當(dāng)前的客戶端連接，即新的客戶端加入及存在的客戶端斷開(kāi)連接，ConnectionManager是可以動(dòng)態(tài)感知的，并返回反映當(dāng)前實(shí)際客戶端連接數(shù)量的Clients實(shí)例引用。唯一且靜態(tài)只讀的業(yè)務(wù)邏輯類實(shí)例由BizService類中的Instance屬性反映，BizServiceHub的＿biz屬性在構(gòu)造函數(shù)中被賦值，從而獲得業(yè)務(wù)邏輯類實(shí)例引用。

業(yè)務(wù)邏輯靜態(tài)類實(shí)例通過(guò)異步的方式訪問(wèn)數(shù)據(jù)、Web服務(wù)、WCF數(shù)據(jù)服務(wù)及其它數(shù)據(jù)源獲取原始或更新的數(shù)據(jù)，提高了程序的性能及伸縮性。由于業(yè)務(wù)邏輯靜態(tài)類實(shí)例中的方法代碼有可能被多個(gè)線程訪問(wèn)，故含寫操作的代碼均是以線程安全的方式實(shí)現(xiàn)的。Web實(shí)時(shí)應(yīng)用程序框架如圖3所示。

圖3 Web實(shí)時(shí)應(yīng)用程序框架

2.2 Web實(shí)時(shí)應(yīng)用程序框架實(shí)現(xiàn)

Web實(shí)時(shí)應(yīng)用程序框架由OWIN Startup 類、BizService類、BizServiceHub 類 及 客 戶 端 的BizService.js 腳 本組成。

2.2.1 OWIN Startup類

OWIN （open Web interface for.NET）定 義 了.NET Web服務(wù)器與Web應(yīng)用程序之間的抽象接口。Web應(yīng)用程序開(kāi)發(fā)者可以利用OWIN 作為中間件將Web服務(wù)器與應(yīng)用程序分離，從而使得Web應(yīng)用程序可以以不同的方式作為其宿主發(fā)布，宿主可以是自宿主方式，IIS方式或Windows服務(wù)方式。OWIN 的另一個(gè)優(yōu)勢(shì)是，Web應(yīng)用程序不再依賴于某個(gè)具體版本的Framework，從而使得應(yīng)用程序和依賴組件之間的關(guān)系是可動(dòng)態(tài)組合的。

OWIN 的Startup.cs類負(fù)責(zé)在客戶端及服務(wù)端之間注冊(cè)SingalR 中間件，該中間件負(fù)責(zé)定義客戶端連接服務(wù)端SingalR Hub上下文的路由。在應(yīng)用程序啟動(dòng)時(shí)，通過(guò)調(diào)用OwinExtensions類的擴(kuò)展方法MapSignalR 方法實(shí)現(xiàn)。Startup.cs的定義如下所示。

?

2.2.2 BizService類

在服務(wù)端執(zhí)行讀取數(shù)據(jù)、改變應(yīng)用程序狀態(tài)、執(zhí)行業(yè)務(wù)邏輯及定時(shí)推送更新數(shù)據(jù)到客戶端的業(yè)務(wù)邏輯服務(wù)類BizService的定義如下所示。

?

由于業(yè)務(wù)邏輯服務(wù)類中的代碼會(huì)被多個(gè)線程訪問(wèn)，將應(yīng)用程序數(shù)據(jù)對(duì)象集合＿data 定義為ConcurrentDictionary＜string，Data＞保證了數(shù)據(jù)集合對(duì)象的線程安全。執(zhí)行業(yè)務(wù)邏輯及改變應(yīng)用程序狀態(tài)的代碼段也需要是線程安全的，所以反映應(yīng)用程序當(dāng)前狀態(tài)的＿state變量類型為volatile類型，ChangeAppState方法代碼段的第一行必須獲?。遳pdateStatelock對(duì)象鎖。由于應(yīng)用程序的數(shù)據(jù)源可能是關(guān)系數(shù)據(jù)庫(kù)、Web服務(wù)、WCF數(shù)據(jù)服務(wù)及其它數(shù)據(jù)源，所以獲取數(shù)據(jù)的getDatas方法應(yīng)是異步執(zhí)行的，以提高程序的性能。

2.2.3 BizServiceHub類

供客戶端進(jìn)行服務(wù)端方法調(diào)用的SingalR Hub上下文BizServiceHub類定義如下所示。

?

2.2.4 BizService.js腳本

執(zhí)行用戶界面交互事件、調(diào)用服務(wù)端方法及服務(wù)端廣播調(diào)用方法的客戶端腳本BizService.js定義如下所示?？蛻?端 腳 本 需 引 用jquery－1.10.0.min.js，jquery.signalR－2.0.0.js以上版本腳本庫(kù)及系統(tǒng)動(dòng)態(tài)生成的signalr／hubs腳本庫(kù)。

?

2.3 Web實(shí)時(shí)應(yīng)用程序場(chǎng)景執(zhí)行過(guò)程

客戶端獲取初始數(shù)據(jù)的場(chǎng)景的執(zhí)行過(guò)程為：①得到服務(wù)端BizServicHub類在客戶端的代理對(duì)象biz。②客戶端連接到服務(wù)端的SingalR 上下文，并完成Hub連接初始化后，按biz.server.getAllDatas（）格式調(diào)用服務(wù)端BizServicHub類的GetAllDatas方法，注意客戶端的方法名的第一個(gè)字符為小寫。③服務(wù)端的BizServicHub實(shí)例調(diào)用業(yè)務(wù)邏輯類實(shí)例的GetAllDatas方法返回?cái)?shù)據(jù)。④客戶端獲取數(shù)據(jù)集合，并調(diào)用DisplayData（）方法顯示數(shù)據(jù)。

客戶端執(zhí)行業(yè)務(wù)邏輯或改變應(yīng)用程序狀態(tài)的場(chǎng)景的執(zhí)行過(guò)程為：①客戶端連接到服務(wù)端的SingalR 上下文，并完成Hub連接初始化。②由客戶端觸發(fā)事件如Click，在事件中按biz.server.changeAppState （state）格 式 調(diào) 用 服 務(wù) 端BizServicHub類的ChangeAppState方法，并傳入?yún)?shù)。③服務(wù)端的BizServicHub 實(shí)例調(diào)用業(yè)務(wù)邏輯類實(shí)例的ChangeAppState方法執(zhí)行業(yè)務(wù)邏輯或改變應(yīng)用程序狀態(tài)。完成后，按Clients.All.changeAppStateClient（state）格式廣播調(diào)用所有客戶端的changeAppStateClient方法。④SingalR Hub上下文負(fù)責(zé)通知所有的連接客戶端執(zhí)行change－AppStateClient邏輯。

服務(wù)端定時(shí)推送數(shù)據(jù)到客戶端場(chǎng)景的執(zhí)行過(guò)程為：①服務(wù)端業(yè)務(wù)邏輯類實(shí)例中的Timer組件根據(jù)updateInterval定義的時(shí)間間隔，定時(shí)調(diào)用UpdateDatas方法。②getData（）通過(guò)異步調(diào)用從數(shù)據(jù)源獲取到更新的數(shù)據(jù)后，按Clients.All.updateDataClient（data）格式廣播調(diào)用所有客戶端的updateDataClient方法，并循環(huán)傳遞更新的數(shù)據(jù)對(duì)象。③SingalR Hub上下文負(fù)責(zé)通知所有的連接客戶端執(zhí)行updateDataClient邏輯。

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

HTML5帶來(lái)的本地存儲(chǔ)、WebSocket、圖形及多媒體應(yīng)用、支持多設(shè)備及跨平臺(tái)、自適應(yīng)頁(yè)面等技術(shù)，正在深刻的改變傳統(tǒng)的Web應(yīng)用程序開(kāi)發(fā)的模式，WebSocket正在逐步取代Comet技術(shù)，成為Web實(shí)時(shí)應(yīng)用程序開(kāi)發(fā)的主流技術(shù)。Web實(shí)時(shí)應(yīng)用程序的框架設(shè)計(jì)還需要考慮以下兩個(gè)問(wèn)題：客戶端的頻繁更新及服務(wù)端的資源爭(zhēng)用?？蛻舳祟l繁更新問(wèn)題突出表現(xiàn)在Web實(shí)時(shí)多人對(duì)戰(zhàn)游戲中，在游戲過(guò)程中，多個(gè)用戶會(huì)頻繁的改變狀態(tài)及更新數(shù)據(jù)，Web實(shí)時(shí)應(yīng)用程序的框架設(shè)計(jì)需要及時(shí)的將狀態(tài)和數(shù)據(jù)的變化在服務(wù)端處理后，再實(shí)時(shí)反饋到所有連接的客戶端。資源爭(zhēng)用表現(xiàn)在如何合理的調(diào)度服務(wù)端資源處理來(lái)自眾多客戶端的WebSocket連接、業(yè)務(wù)邏輯執(zhí)行、數(shù)據(jù)存儲(chǔ)及更新等請(qǐng)求。怎樣更好的處理這兩個(gè)問(wèn)題，將是后續(xù)研究的重點(diǎn)方向。

［1］Yan Zhangling，Dai Mao.A real－time group communication architecture based on WebSocket ［J］.International Journal of Computer and Communication Engineering，2012，2 （1）：408－411.

［2］Panagiotakis S，Kapetanakis K.Architecture for real time communications over the Web ［J］.International Journal of Web Engineering，2013，2 （1）：1－8.

［3］Ma Kun，Sun Runyuan.Introducing WebSocket－based realtime monitoring system for remote intelligent buildings ［J］.International Journal of Distributed Sensor Networks，2013：1－10.

［4］JASRI，Kouto，Sayo－cho Hyogo.Web－based control application using WebSocket ［C］／／Proceedings of ICALEPCS，2011：673－675.

［5］ZHANG Yanzhao，CHEN Shaohong.Real time control system based on smart phone platform ［J］.Computer Applications and Software，2013，30 （7）：236－239 （in Chinese）. ［張 延召，陳少紅.基于智能手機(jī)平臺(tái)的實(shí)時(shí)控制系統(tǒng) ［J］.計(jì)算機(jī)應(yīng)用與軟件，2013，30 （7）：236－239.］

［6］WU Xiaodong，WANG Peng.Research on communication mechanism and efficiency of Html5 ［J］.Journal of Changchun University of Science and Technology （Natural Science Edition），2011，34 （4）：159－163 （in Chinese）. ［吳曉東，王鵬.Html5的通信機(jī)制及效率的研究 ［J］.長(zhǎng)春理工大學(xué)學(xué)報(bào)（自然科學(xué)版），2011，34 （4）：159－163.］

［7］Nikolai Qveander.Pushing real time data using HTML5 Web Sockets ［D］.Sweden：UMEA University Department of Computing Science，2011.

［8］Pavel Smolka.Real－time communication in web browser［D］.Czech Republic：MASARYK University Faculty of Informatics，2013.

［9］Patrick Fletcher.Introduction to SignalR ［EB／OL］.［2014－06－10］.http：／／www.asp.net／signalr／overview／signalr－20／gettingstarted－with－signalr－20／introduction－to－signalr.

［10］Howard Dierking.An overview of project katana ［EB／OL］.［2013－08－30］.http：／／www.asp.net／aspnet／overview／owinand－katana／an－overview－of－project－katana.