SignalR 实现web浏览器客户端与服务端的推送功能
SignalR 是一個(gè)集成的客戶端與服務(wù)器庫(kù)，基于瀏覽器的客戶端和基于 ASP.NET 的服務(wù)器組件可以借助它來(lái)進(jìn)行雙向多步對(duì)話。 換句話說(shuō)，該對(duì)話可不受限制地進(jìn)行單個(gè)無(wú)狀態(tài)請(qǐng)求/響應(yīng)數(shù)據(jù)交換；它將繼續(xù)，直到明確關(guān)閉。 對(duì)話通過(guò)永久連接進(jìn)行，允許客戶端向服務(wù)器發(fā)送多個(gè)消息，并允許服務(wù)器做出相應(yīng)答復(fù)，值得注意的是，還允許服務(wù)器向客戶端發(fā)送異步消息。它和AJax類似，都是基于現(xiàn)有的技術(shù)。本身是一個(gè)復(fù)合體。一般情況下，SignalR會(huì)使用Javascript的長(zhǎng)輪詢( long polling)，實(shí)現(xiàn)客戶端和服務(wù)端通信。在WebSockets出現(xiàn)以后，SignalR也支持WebSockets通信。當(dāng)然SignalR也使用了服務(wù)端的任務(wù)并行處理技術(shù)以提高服務(wù)器的擴(kuò)展性。它的目標(biāo)整個(gè) .NET Framework 平臺(tái)，它也不限 Hosting 的應(yīng)用程序，而且還是跨平臺(tái)的開(kāi)源項(xiàng)目，支持Mono 2.10+，覺(jué)得它變成是 Web API 的另一種實(shí)作選擇，但是它在服務(wù)端處理聯(lián)機(jī)的功能上比 ASP.NET MVC 的 Web API 要強(qiáng)多了，更重要的是，它可以在 Web Form 上使用。
SignalR 內(nèi)的客戶端庫(kù) (.NET/JavaScript) 提供了自動(dòng)管理的能力，開(kāi)發(fā)人員只需要直接使用 SignalR 的 Client Library 即可，同時(shí)它的 JavaScript 庫(kù)可和 jQuery 完美整合，因此能直接與像 jQuery 或 Knockout.js 一起使用。
SignalR內(nèi)部有兩類對(duì)象：
· Persistent Connection：持久性連接，用來(lái)解決長(zhǎng)時(shí)間連接的能力，而且還可以由客戶端主動(dòng)向服務(wù)器要求數(shù)據(jù)，而服務(wù)器端也不需要實(shí)現(xiàn)太多細(xì)節(jié)，只需要處理 PersistentConnection 內(nèi)所提供的五個(gè)事件：OnConnected, OnReconnected, OnReceived, OnError 和 OnDisconnect 即可。
· Hub：信息交換器，用來(lái)解決 realtime 信息交換的功能，服務(wù)器端可以利用 URL 來(lái)注冊(cè)一個(gè)或多個(gè) Hub，只要連接到這個(gè) Hub，就能與所有的客戶端共享發(fā)送到服務(wù)器上的信息，同時(shí)服務(wù)器端可以調(diào)用客戶端的腳本，不過(guò)它背后還是不離 HTTP 的標(biāo)準(zhǔn)，所以它看起來(lái)神奇，但它并沒(méi)有那么神奇，只是 JavaScript 更強(qiáng)，強(qiáng)到可以用像 eval() 或是動(dòng)態(tài)解釋執(zhí)行的方式，允許 JavaScript 能夠動(dòng)態(tài)的加載與執(zhí)行方法調(diào)用而己。
SignalR 將整個(gè)交換信息的行為封裝得非常漂亮，客戶端和服務(wù)器全部都使用 JSON 來(lái)溝通，在服務(wù)器端聲明的所有 hub 的信息，都會(huì)一般生成 JavaScript 輸出到客戶端，.NET 則是依賴 Proxy 來(lái)生成代理對(duì)象，這點(diǎn)就和 WCF/.NET Remoting 十分類似，而 Proxy 的內(nèi)部則是將 JSON 轉(zhuǎn)換成對(duì)象，以讓客戶端可以看到對(duì)象。
下面我們來(lái)針對(duì)Persistent Connection和Hub 做個(gè)Demo試試：
新建一個(gè)ASP.NET MVC項(xiàng)目MvcApplicationSignalR，通過(guò)Nuget添加SignalR的包。
新建一個(gè)類MyConnection 繼承自 PersistentConnection ，引用SignalR命名空間，重寫OnReceivedAsync 的方法，并要求 SignalR 對(duì)傳入的信息做廣播
using System;?
using System.Collections.Generic;?
using System.Linq;?
using System.Text;?
using SignalR;?
using System.Threading.Tasks;
namespace MvcApplicationSignalR?
{?
?? public? class MyConnection : PersistentConnection
??? {?
?????? protected override Task OnReceivedAsync(IRequest request, string connectionId, string data)?
??????? {?
??????????? // Broadcast data to all clients?
??????????? data = string.Format("數(shù)據(jù)是:{0} 時(shí)間是:{1}", data, DateTime.Now.ToString());?
??????????? return Connection.Send(connectionId, data);?
??????? }
??? }?
}
接著在 Global.asax 中加入對(duì)應(yīng)路由信息，這會(huì)由 SignalR 的路由表來(lái)處理 Metadata 的輸出工作，紅色部分代碼：
protected void Application_Start()?
{?
??? RouteTable.Routes.MapConnection<MyConnection>("echo", "echo/{*operation}");
這樣服務(wù)器端就完成了。現(xiàn)在我們?cè)陧?xiàng)目中Master、View (Home/Index)，然后加入必要的代碼：
<head>?
??? <meta charset="utf-8" />?
??? <title>@ViewBag.Title</title>?
??? <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />?
??? <script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>?
??? <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>?? <script src="@Url.Content("~/Scripts/jquery.signalR-0.5.2.min.js")" type="text/javascript"></script>?</head>
@{?
??? ViewBag.Title = "Home Page";?
}?
<script type="text/javascript">?
??? $(function () {?
??????? var connection = $.connection('echo');
??????? connection.received(function (data) {?
??????????? $('#messages').append('<li>' + data + '</li>');?
??????? });
??????? connection.start();
??????? $("#broadcast").click(function () {?
??????????? connection.send($('#msg').val());?
??????? });?
??????? $("#btnStop").click(function () {?
??????????? connection.stop();?
??????? });?
??? });
</script>?
<h2>@ViewBag.Message</h2>?
<input type="text" id="msg" />?
<input type="button" id="broadcast" value="發(fā)送" />?
<input type="button" id="btnStop" value="停止" />?
<ul id="messages">?
</ul>
運(yùn)行起來(lái)就是這個(gè)效果：
下面我們來(lái)展示 SignalR 的另一個(gè)功能：由服務(wù)器端調(diào)用客戶端的 JavaScript 腳本的功能，而這個(gè)功能的要求必須是要實(shí)現(xiàn)成 Hub 的模式，因此我們可以順便看到如何實(shí)現(xiàn)一個(gè) Hub 類型的 SignalR 應(yīng)用程序。
向項(xiàng)目中加入一個(gè)類Chat繼承自 Hub 類 (這是 Hub 應(yīng)用程序的要求) ：
using System;?
using System.Collections.Generic;?
using System.Linq;?
using System.Web;?
using SignalR.Hubs;?
using System.Threading.Tasks;?
using System.Threading;
namespace MvcApplicationSignalR?
{?
?? [HubName("geffChat")]?
?? public class Chat : Hub??
?? {?
?????? public void SendMessage(string message)?
?????? {?
?????????? Clients.sendMessage(message);?
?????? }?
?? }?
}
這段程序代碼的用意是，在連接進(jìn)到 Hub 時(shí)，將連接代碼加到聯(lián)機(jī)用戶的集合中，等會(huì)就會(huì)使用到，因?yàn)槲覀儠?huì)依照客戶端的 ID 來(lái)調(diào)用客戶端腳本。
1. HubName：這個(gè) atttibute 代表 client 端要如何建立對(duì)應(yīng) server 端對(duì)象的 proxy object。通過(guò) HubName ， server 端的 class name才不會(huì)被 client 綁死。如果沒(méi)有設(shè)定，則會(huì)以 server 端 class name 為 HubName 默認(rèn)值。
2. 繼承 Hub：繼承 Hub 之后，很多對(duì)應(yīng)的設(shè)計(jì)就都不用寫了，我們只需要把注意力放在 client 如何送 request 給 server的 hub ， server 如何通知 client 即可。
3. public void SendMessage(string message) ，就像 WebService Method 或 PageMethod 一般， client 端通過(guò) proxy object ，可以直接調(diào)用 server 端這個(gè)方法。后續(xù)會(huì)介紹到如何在頁(yè)面上使用。
4. Clients 屬性：代表所有有使用 Chat 的頁(yè)面。而 Clients 的型別是 dynamic ，因?yàn)橐苯訉?duì)應(yīng)到 JavaScript 的對(duì)象。
5. Clients.sendMessage(message)：代表 server 端調(diào)用 Clients 上的 sendMessage 方法，也就是 JavaScript 的方法。
6. 總結(jié)： Chat 對(duì)象職責(zé)就是當(dāng) client 端調(diào)用SendMessage() 方法后，要把這個(gè) message ，送給所有 client 頁(yè)面上呈現(xiàn)。以達(dá)到聊天室的功能。
服務(wù)端的做完了，開(kāi)始制作客戶端，同樣在Home/Index頁(yè)面上增加以下html代碼
<%--很重要的一個(gè)參考，一定要加，且在這一行之前，一定要先參考jQuery.js與signalR.js--%>?
<script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>
@{?
??? ViewBag.Title = "Home Page";?
}?
<script type="text/javascript">?
??? $(function () {?
??????? var connection = $.connection('/echo');????
??????? connection.received(function (data) {?
??????????? $('#messages').append('<li>' + data + '</li>');?
??????? });
??????? connection.start();
??????? $("#broadcast").click(function () {?
??????????? connection.send($('#msg').val());?
??????? });?
??????? $("#btnStop").click(function () {?
??????????? connection.stop();?
??????? });
??????? // 建立對(duì)應(yīng)server端Hub class的對(duì)象，請(qǐng)注意geffChat的第一個(gè)字母要改成小寫?
??????? var chat = $.connection.geffChat;
??????? // 定義client端的javascript function，供server端hub，通過(guò)dynamic的方式，調(diào)用所有Clients的javascript function?
??????? chat.sendMessage = function (message) {?
??????????? //當(dāng)server端調(diào)用sendMessage時(shí)，將server push的message數(shù)據(jù)，呈現(xiàn)在wholeMessage中?
??????????? $('#wholeMessages').append('<li>' + message + '</li>');?
??????? };
??????? $("#send").click(function () {?
??????????? //調(diào)用叫server端的Hub對(duì)象，將#message數(shù)據(jù)傳給server?
??????????? chat.sendMessage($('#message').val());?
??????????? $('#message').val("");?
??????? });
??????? //把connection打開(kāi)?
??????? $.connection.hub.start();
??? });
</script>?
<h2>@ViewBag.Message</h2>?
<input type="text" id="msg" />?
<input type="button" id="broadcast" value="發(fā)送" />?
<input type="button" id="btnStop" value="停止" />?
<ul id="messages">?
</ul>
<div>?
??? <input type="text" id="message" />?
??? <input type="button" id="send" value="發(fā)送" />?
??? <div>?
??????? 聊天室內(nèi)容:?
??????? <br />?
??????? <ul id="wholeMessages">?
??????? </ul>?
??? </div>?
</div>
1. 先引用 jQuery 與 signalR 的 js 文件。
2. 很重要的一個(gè)步驟：加入一個(gè) js 引用，其路徑為「根目錄/signalr/hubs」。 SignalR 會(huì)建立相關(guān)的 JavaScript，放置于此。
3. 通過(guò) $.connection.『server 端的 HubName』，即可建立對(duì)應(yīng)該 hub 的 proxy object。要注意，首字母需小寫。
4. 定義 client 端上，供 server 端通知的 JavaScript function，這邊的例子是 sendMessage。
5. 當(dāng)按下發(fā)送按鈕時(shí)，調(diào)用 server 端的 SendMessage() 方法，只需要直接通過(guò) proxy object 即可。要注意，首字母需小寫。
6. 記得透過(guò) $.connection.hub.start() ，把 connection 打開(kāi)。
注意：SingalR 會(huì)自動(dòng)生成一個(gè)siganlr/hub 的橋接js..，在本機(jī)使用localhost測(cè)試都不會(huì)有問(wèn)題。當(dāng)部署到IIS的時(shí)候會(huì)發(fā)生404錯(cuò)誤，是由于被IIS誤判可能是虛擬目錄…，解決方法是在web.config加入一段：
<!-- 加入下面這一段-->
<system.webServer>
<validation validateIntegratedModeConfiguration="false" />
<modules runAllManagedModulesForAllRequests="true">
</modules>
</system.webServer>
參考：
- https://github.com/SignalR/SignalR/wiki/QuickStart-Persistent-Connections
- https://github.com/SignalR/SignalR/wiki/QuickStart-Hubs
實(shí)例代碼：MvcApplicationSignalR
總結(jié)
以上是生活随笔為你收集整理的SignalR 实现web浏览器客户端与服务端的推送功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 文莱在世界地图的哪个位置（文莱在哪里世界
- 下一篇： 为什么浏览器不能跨域