概述
SignalR是通訊框架，前台Web頁面與后台服務實現數據的交互。ASP.NET SignalR 是一個為 ASP.NET 開發人員的庫，簡化了將實時 web 功能添加到應用程序的過程。實時Web功能使服務端代碼推送內容到鏈接可客服端並立即應用成為可能，而不需要服務端等待客戶端去請求數據。
SignalR可用於任何你想添加實時Web功能到ASP.NET應用程序的情形，聊天室是一個常用的例子，用戶可以刷新Web頁面來獲得新的數據，或者頁面使用一個長輪詢來取回數據，這都是SignalR可以應用的場景。比如說儀表盤和監視系統，實時游戲等。
SignalR支持以一種簡單的API來創建服務器到客戶端的遠程調用客戶端的Javascript方法，SignalR還包括用於用於連接管理的API和分組連接。
創建項目：
第一步：創建簡單的Web Form項目，通過NuGet安裝Microsoft.AspNet.SignalR組件。
第二步：添加OWIN Startup類，並修改映射內容。
修改內容如下：
namespace SignalRCapter01 { public class SRStartup { public void Configuration(IAppBuilder app) { // 有關如何配置應用程序的詳細信息，請訪問 http://go.microsoft.com/fwlink/?LinkID=316888 // Maps SignalR hubs to the app builder pipeline at "/signalr". app.MapSignalR(); } } }
第三步：添加Hub類，並修改代碼內容。
修改內容如下：
[HubName("MsgChat")] public class MyHub : Hub { public void sendMess(string Msg) { Clients.All.BroadMsg(string.Format("消息接收時間：{0}，內容：{1}",DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"),Msg)); } } }
第四步：修改WebForm JS內容。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChatHome.aspx.cs" Inherits="SignalRCapter01.ChatHome" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>MSG</title> <link rel="shortcut icon" href="/favicon.ico"/> <link rel="bookmark" href="/favicon.ico"/> <script src="Scripts/jquery-1.6.4.min.js"></script> <script src="Scripts/jquery.signalR-2.2.1.min.js"></script> <script src="signalr/hubs"></script> <script type="text/javascript"> $(function () { // 聲明一個代理引用該集線器,記得$.connection.后面的方法首字母必須要小寫,這也是我為什么使用別名的原因 var chat = $.connection.MsgChat; // 這里是注冊集線器調用的方法,和1.0不同的是需要chat.client后注冊,1.0則不需要 chat.client.BroadMsg = function (name) { // HTML編碼的顯示名稱和消息。 var encodedMsg = $('<div />').text(name).html(); // 將消息添加到該頁。 $('#messsagebox').append('<li>' + encodedMsg + '</li>'); }; // 獲取用戶名稱。 $('#username').html(prompt('請輸入您的名稱:', '')); // 設置初始焦點到消息輸入框。 $('#message').focus(); // 啟動連接,這里和1.0也有區別 $.connection.hub.start().done(function () { $('#send').click(function () { var message = $('#username').html() + ":" + $('#message').val() // 這里是調用服務器的方法,同樣,首字母小寫 chat.server.sendMess(message); // 清空輸入框的文字並給焦點. $('#message').val('').focus(); }); }); }); </script> </head> <body> <div> <div >名稱:<p id="username"></p></div> <div style="border-color:red;border:double"> <ul id="messsagebox"> <li>聊天窗口</li> <li></li> </ul> </div> <input type="text" value="" placeholder="請輸入消息" id="message" /> <button id="send">發送</button> </div> </body> </html>
知識總結
1、Hub Server端的方法首字母必須小寫，否則客戶端提示找不到方法；
2、Js初始化的時候，要和后台服務別名一致；
var chat = $.connection.MsgChat;
3、Hub分組發送消息：
//作用:將連接ID加入某個組 //Context.ConnectionId 連接ID,每個頁面連接集線器即會產生唯一ID //roomName分組的名稱 Groups.Add(Context.ConnectionId, roomName); //作用:將連接ID從某個分組移除 Groups.Remove(Context.ConnectionId, roomName); //作用:調用分組內連接對象注冊的本地JS //XXX:本地JS名稱 //Room:分組名稱 // new string[0]:過濾(不發送)的連接ID數組 Clients.Group(Room, new string[0]).XXXX
4、重寫Connection方法實例代碼：
static List<string> MyClientIDs = new List<string>(); public override Task OnConnected() { if (MyClientIDs.IndexOf(Context.ConnectionId) == -1) MyClientIDs.Add(Context.ConnectionId); Clients.All.ShowMyFirst(JsonConvert.SerializeObject(MyClientIDs)); return base.OnConnected(); } public override Task OnDisconnected(bool stopCalled) { if(MyClientIDs.IndexOf(Context.ConnectionId)!=-1) MyClientIDs.Remove(Context.ConnectionId); Clients.All.ShowMyFirst(JsonConvert.SerializeObject(MyClientIDs)); return base.OnDisconnected(stopCalled); }
5、參考博客：
http://www.cnblogs.com/GuZhenYin/p/4633205.html
http://blog.jobbole.com/82746/