ASP.NET用SignalR建立瀏覽器和伺服器的持久串連詳解

前言

瀏覽器訪問網頁通過的是 HTTP 協議，瀏覽器發送一個請求，伺服器返回一個結果。伺服器是被動接收請求，如果想反過來，伺服器主動發送資訊給瀏覽器咋辦呢？

有很多解決方案，比如輪循（瀏覽器定時去向伺服器詢問是否有新資料）、WebSocket（HTML 5）……

而 SignalR 就是把這些技術綜合在一起，它自動識別當前瀏覽器支援哪些方式，然後選擇最優的方式。我們開發時不必去關注這些細節，SignalR 會幫我們實現，而且 SignalR 是微軟開發的，好用是一貫風格。

環境

.NET 4.5 及以上，低了不行。

如果 Visual Studio 版本太低，沒有 SignalR，則按下面的步驟添加：

Visual Studio 的菜單“工具 -> 庫封裝管理員 -> 管理解決方案的 NuGet 程式包（開啟解決方案之後才有）”，在彈出對話方塊中搜尋“SignalR”。

我用的 Visual Studio 2013 是不需要手工添加 SignalR 的，本身就內建。

實戰

開啟 Visual Studio（我的版本是 2013），建立一個 ASP.NET 項目。

第一步、添加一個“SignalR 永久串連類”

如：

添加後，我們可以發現 Visual Studio 還自動為我們添加了一些引用，還有 Scripts 檔案夾（裡麵包含 jquery.signalR-2.0.0.js）。這個類初始的代碼如下：

public class MyConnection1 : PersistentConnection{ protected override Task OnConnected(IRequest request, string connectionId) { return Connection.Send(connectionId, "Welcome!"); }  protected override Task OnReceived(IRequest request, string connectionId, string data) { return Connection.Broadcast(data); }}

第二步、添加“OWIN Startup 類”

然後添加點代碼：

public class Startup1{ public void Configuration(IAppBuilder app) { // 有關如何配置應用程式的詳細資料，請訪問 http://go.microsoft.com/fwlink/?LinkID=316888 app.MapSignalR<MyConnection1>("/myPath"); // myPath 是我們隨便寫的。 }}

MyConnection1 就是第一步建立的類名。

第三步、添加一個“Web Form ”

<textarea id="info" cols="60" rows="10"></textarea><script src="Scripts/jquery-1.10.2.min.js"></script><script src="Scripts/jquery.signalR-2.0.0.min.js"></script><script type="text/javascript"><!-- var conn = $.connection("/myPath");  conn.start().done(function (data) {  $("#info").append("串連成功，connectionId 為： " + data.id + "\r\n"); });  conn.received(function (data) {  $("#info").append("收到資料： " + data + "\r\n"); });//--></script>

運行效果如下：

擴充一下

MyConnection1：

方法 OnConnected：建立了串連時。

方法 OnReceived：收到了用戶端提交的資料時，參數 data 就是它所收到的資料。

方法 OnDisconnected：斷開了串連時。上面沒有用它。

方法 OnReconnected：重新串連了時。上面沒有用它。

……
MyConnection1 的 Connection 屬性：

方法 Send：向瀏覽器發送資料，第一個參數為 connectionId（字串類型），第二個參數為要發送的資料。

方法 Broadcast：向所有瀏覽器（準確地說應該是所有串連）發送資料。

JS：

var conn = $.connection("/myPath"); 建立連線物件。

conn.start().done() start() 是開始串連，done() 串連成功後要執行的代碼。

conn.received() 是收到伺服器發送來的資料要執行的。

conn.send() 是向伺服器發送資料。上面沒有用它。

下面看一個更全點的代碼：

上面不是說有些方法沒有用到沒，下面的例子更全一點：

MyConnection1：

protected override Task OnConnected(IRequest request, string connectionId){ return Connection.Send(connectionId, "Welcome!");} protected override Task OnReceived(IRequest request, string connectionId, string data){ Connection.Send(connectionId, "我收到了：" + data); return Connection.Broadcast("全體注意：我收到了用戶端的資料。");}

Web Form的代碼：

<textarea id="info" cols="60" rows="10"></textarea>要發送到伺服器的訊息：<input type="text" id="msg" size="20" /><input type="button" value="發送訊息" onclick="javascript: conn.send($('#msg').val());" /><script src="Scripts/jquery-1.10.2.min.js"></script><script src="Scripts/jquery.signalR-2.0.0.min.js"></script><script type="text/javascript"><!-- var conn = $.connection("/myPath");  conn.start().done(function (data) {  $("#info").append("串連成功，connectionId 為： " + data.id + "\r\n"); });  conn.received(function (data) {  $("#info").append("收到資料： " + data + "\r\n"); });//--></script>

到目前為止，大家可能都提不起興趣，伺服器主動發送資料在哪裡？？？

我們現在做一個定時程式，伺服器定時向瀏覽器發送資料。

建立 Global.asax（全域應用程式類）（並不是說這些代碼只能在 Global.asax 中運行，我們只是為了測試定時執行，才放在這裡的）。

添加如下代碼：

protected void Application_Start(object sender, EventArgs e){ Timer timer = new Timer(5000); timer.Elapsed += timer_Elapsed; timer.Start();} void timer_Elapsed(object sender, ElapsedEventArgs e){ var context = GlobalHost.ConnectionManager.GetConnectionContext<MyConnection1>(); context.Connection.Broadcast("我在 " + DateTime.Now.ToString() + " 主動向瀏覽器發送資料。");}

效果如下：

以上代碼，我們用的是 context.Connection.Broadcast，如果是針對某一串連發送，則用 Send 方法，這就需要 connectionId，不過要選擇哪個 connectionId 都是業務層面的事，不是問題。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流。