基于SingalR 的Web實時應用程序框架設計

劉黎志

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

0 引 言

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

1 SingalR

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

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

圖1 服務端客戶端相互調用

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

圖2 服務端與客戶端的連接方式及傳輸協議

2 Web實時應用程序框架

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

2.1 Web實時應用程序框架設計

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

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

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

圖3 Web實時應用程序框架

2.2 Web實時應用程序框架實現

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

2.2.1 OWIN Startup類

OWIN （open Web interface for.NET）定 義 了.NET Web服務器與Web應用程序之間的抽象接口。Web應用程序開發者可以利用OWIN 作為中間件將Web服務器與應用程序分離，從而使得Web應用程序可以以不同的方式作為其宿主發布，宿主可以是自宿主方式，IIS方式或Windows服務方式。OWIN 的另一個優勢是，Web應用程序不再依賴于某個具體版本的Framework，從而使得應用程序和依賴組件之間的關系是可動態組合的。

OWIN 的Startup.cs類負責在客戶端及服務端之間注冊SingalR 中間件，該中間件負責定義客戶端連接服務端SingalR Hub上下文的路由。在應用程序啟動時，通過調用OwinExtensions類的擴展方法MapSignalR 方法實現。Startup.cs的定義如下所示。

?

2.2.2 BizService類

在服務端執行讀取數據、改變應用程序狀態、執行業務邏輯及定時推送更新數據到客戶端的業務邏輯服務類BizService的定義如下所示。

?

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

2.2.3 BizServiceHub類

供客戶端進行服務端方法調用的SingalR Hub上下文BizServiceHub類定義如下所示。

?

2.2.4 BizService.js腳本

執行用戶界面交互事件、調用服務端方法及服務端廣播調用方法的客戶端腳本BizService.js定義如下所示?？蛻?端 腳 本 需 引 用jquery－1.10.0.min.js，jquery.signalR－2.0.0.js以上版本腳本庫及系統動態生成的signalr／hubs腳本庫。

?

2.3 Web實時應用程序場景執行過程

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

客戶端執行業務邏輯或改變應用程序狀態的場景的執行過程為：①客戶端連接到服務端的SingalR 上下文，并完成Hub連接初始化。②由客戶端觸發事件如Click，在事件中按biz.server.changeAppState （state）格 式 調 用 服 務 端BizServicHub類的ChangeAppState方法，并傳入參數。③服務端的BizServicHub 實例調用業務邏輯類實例的ChangeAppState方法執行業務邏輯或改變應用程序狀態。完成后，按Clients.All.changeAppStateClient（state）格式廣播調用所有客戶端的changeAppStateClient方法。④SingalR Hub上下文負責通知所有的連接客戶端執行change－AppStateClient邏輯。

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

3 結束語

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

［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］.計算機應用與軟件，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］.長春理工大學學報（自然科學版），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.