何為ASP.NET SignalR,有什么用
ASP.NET SignalR是一個ASP.NET庫,是為了實現實時web通信而創造的,能讓服務器與客戶端實現即時通信,而不需要服務器等待接收到客戶端請求才能返回內容。簡言之,就是可以實現服務端主動給客戶端發送請求。
ASP.NET SignalR的依賴環境
- Windows 7&8 或 Windows Server 2008 R2 & Windows 2012
- IIS 8 + & 集成模式
- .NET FRAMEWOKR 4.5 +
- 支持websocket的瀏覽器
實際上,ASP.NET SignalR請求是基於http的,在不支持websocket的環境下,會自動降級到Comet模式(即Forever Frame/Ajax long polling)兼容舊版本客戶端
ASP.NET SignalR的兩種通信模型
1、Persistent connection 持久性連接
Persistent Connections表示一個發送單個,編組,廣播信息的簡單終結點。開發人員通過使用持久性連接Api,直接訪問SignalR公開的底層通信協議
2、Hub 集線器
Hubs是基於連接Api的更高級別的通信管道,它允許客戶端和服務器上彼此直接調用方法,SignalR能夠很神奇地處理跨機器的調度,使得客戶端和服務器端能夠輕松調用在對方端上的方法。使用Hub還允許開發人員將強類型的參數傳遞給方法並綁定模型
講了那么多廢話,下面就演示兩種不同通信模型的實例吧
准備條件
1、使用Visual Studio 2015,創建一個默認的ASP.NET MVC項目
2、安裝ASP.NET SignalR,在nuget power shell中執行
Install-Package Microsoft.AspNet.SignalR
3、添加SignalR服務,添加->新建項->Visual C#/Web/SignalR,便可看到兩種不同的通信模型
4、在根目錄下面新建Connections文件夾
Persistent Connections演示實例
1、在Connections文件下,添加->新建項->Visual C#/Web/SignalR,選擇SignalR永久連接類(v2)
public class ChatConnection : 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); } }
2、在根目錄下找到Startup.cs
public partial class Startup { public void Configuration(IAppBuilder app) { ConfigureAuth(app); app.MapSignalR<ChatConnection>("/Connections/ChatConnection"); } }
3、在HomeController.cs
public ActionResult PersistentConnection() { return View(); }
4、新建PersistentConnection.cshtml
@{ Layout = null; } <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>PersistentConnection</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
<script type="text/javascript"> $(function () { // 聲明PersistentConnection連接
var connection = $.connection("/Connections/ChatConnection"); $('#displayname').val(prompt('Enter your name:', '')); $("msg").focus(); // 接收內容
connection.received(function (data) { $('#messages').append('<li>' + data + '</li>'); }); // 開啟連接
connection.start().done(function () { $("#broadcast").click(function () { // 發送內容
connection.send($('#displayname').val() + ':' + $('#msg').val()); }); }); }); </script>
</head>
<body>
<input type="text" id="msg" />
<input type="button" id="broadcast" value="broadcast" />
<input type="hidden" id="displayname" />
<ul id="messages"></ul>
</body>
</html>
5、在Chrome中運行
Hubs演示實例(圖片就不貼了,基本與Persistent Connections一樣)
1、在Connections文件下,添加->新建項->Visual C#/Web/SignalR,選擇SignalR集線器類(v2)
public class ChatHub : Hub { public void Send(string name, string message) { // 回調客戶端函數,這里與客戶端
Clients.All.broadcastMessage(name, message); } }
2、在根目錄下找到Startup.cs
public void Configuration(IAppBuilder app) { ConfigureAuth(app); app.MapSignalR(); }
3、在HomeController.cs
public ActionResult Hub() { return View(); }
4、並新建Hub.cshtml
@{ Layout = null; } <!DOCTYPE html>
<html>
<head>
<title>Hub</title>
<style type="text/css"> .container { background-color: #99CCFF; border: thick solid #808080; padding: 20px; margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
<!-- 引用jquery庫 -->
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<!-- 引用SignalR庫 -->
<script src="/Scripts/jquery.signalR-2.2.1.min.js"></script>
<!-- 聲明自動生成hub腳本路徑 -->
<script src="/signalr/hubs"></script>
<script type="text/javascript"> $(function () { // 聲明hub代理,首字母需小寫,與hub類名對應(也可使用別名)
var chat = $.connection.chatHub; // 服務端回調函數,與hub類中Clients.All.broadcastMessage(name, message)對應
chat.client.broadcastMessage = function (name, message) { // Html encode display name and message.
var encodedName = $('<div />').text(name).html(); var encodedMsg = $('<div />').text(message).html(); // Add the message to the page.
$('#discussion').append('<li><strong>' + encodedName + '</strong>: ' + encodedMsg + '</li>'); }; $('#displayname').val(prompt('Enter your name:', '')); $('#message').focus(); // 開啟hub連接
$.connection.hub.start().done(function () { $('#sendmessage').click(function () { // 發送內容至hub服務端,與public void Send(string name, string message)對應
chat.server.send($('#displayname').val(), $('#message').val()); $('#message').val('').focus(); }); }); }); </script>
</body>
</html>
5、運行
到此,ASP.NET SignalR介紹完畢