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

劉黎志

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

0 引 言

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

1 SingalR

SingalR是一組可實現(xiàn)Web實時應(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)類型，用戶配置等自動選擇傳輸協(xié)議。在選擇傳輸協(xié)議的過程中，SingalR 會盡量使用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ù)端可以通過遠(yuǎn)程過程調(diào)用 （RPC）的方式調(diào)用客戶端的Javascipt函數(shù)，從而使得服務(wù)端可以主動推送消息到所有的連接客戶端，或特定的客戶端。而不需要客戶端按傳統(tǒng)的請求－應(yīng)答 （request－response）刷新頁面獲取最新數(shù)據(jù)。客戶端則利用SingalR Hub上下文代理類調(diào)用服務(wù)端函數(shù)。服務(wù)端與客戶端相互調(diào)用的過程如圖1所示。

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

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

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

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

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

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

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

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

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

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

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

Web實時應(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)用程序開發(fā)者可以利用OWIN 作為中間件將Web服務(wù)器與應(yīng)用程序分離，從而使得Web應(yīng)用程序可以以不同的方式作為其宿主發(fā)布，宿主可以是自宿主方式，IIS方式或Windows服務(wù)方式。OWIN 的另一個優(yōu)勢是，Web應(yīng)用程序不再依賴于某個具體版本的Framework，從而使得應(yīng)用程序和依賴組件之間的關(guān)系是可動態(tài)組合的。

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

?

2.2.2 BizService類

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

?

由于業(yè)務(wù)邏輯服務(wù)類中的代碼會被多個線程訪問，將應(yīng)用程序數(shù)據(jù)對象集合＿data 定義為ConcurrentDictionary＜string，Data＞保證了數(shù)據(jù)集合對象的線程安全。執(zhí)行業(yè)務(wù)邏輯及改變應(yīng)用程序狀態(tài)的代碼段也需要是線程安全的，所以反映應(yīng)用程序當(dāng)前狀態(tài)的＿state變量類型為volatile類型，ChangeAppState方法代碼段的第一行必須獲取＿updateStatelock對象鎖。由于應(yīng)用程序的數(shù)據(jù)源可能是關(guān)系數(shù)據(jù)庫、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以上版本腳本庫及系統(tǒng)動態(tài)生成的signalr／hubs腳本庫。

?

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

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

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

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

3 結(jié)束語

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

［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ǒng) ［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］.長春理工大學(xué)學(xué)報（自然科學(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.