巡更項目中,須要發送實時消息,以及須要任務開始提醒,因而便有機會接觸到SignalR,在使用過程當中,發現用SignalR實現通訊很是簡單,下面我思明將從三個方面分享一下:html
1、SignalR是什麼jquery
Asp.net SignalR是微軟爲實現實時通訊的一個類庫。通常狀況下,SignalR會使用JavaScript的長輪詢(long polling)的方式來實現客戶端和服務器通訊,隨着Html5中WebSockets出現,SignalR也支持WebSockets通訊。另外SignalR開發的程序不單單限制於宿主在IIS中,也能夠宿主在任何應用程序,包括控制檯,客戶端程序和Windows服務等,另外還支持Mono,這意味着它能夠實現跨平臺部署在Linux環境下。web
SignalR內部有兩類對象:瀏覽器
SignalR將整個信息的交換封裝起來,客戶端和服務器都是使用JSON來溝通的,在服務端聲明的全部Hub信息,都會生成JavaScript輸出到客戶端,.NET則依賴Proxy來生成代理對象,而Proxy的內部則是將JSON轉換成對象。服務器
2、爲何要用SignalRapp
3、怎麼實現SignalR,下面主要介紹一下SignalR第一大功能,聊天。如下是一個簡單的DEMO:asp.net
一、新建一個asp.net web 應用程序ide
二、選擇模板MVC,同時更改無身份驗證函數
三、選擇新建的項目,右擊-->選擇管理NuGet程序包-->搜索 signalr--> 安裝Microsoft ASP.NET SignalR post
四、新建啓動程序 Startup.cs
在類中添加代碼:
app.MapSignalR();
五、新建SignalR集線器類ChatHub.cs
六、在集線器類ChatHub.cs中添加以下代碼
public class ChatHub : Hub { /// <summary> /// 供客戶端調用的服務器端代碼 /// </summary> /// <param name="message"></param> public void Send(string message) { var name = Guid.NewGuid().ToString().ToUpper(); // 調用全部客戶端的sendMessage方法 Clients.All.sendMessage(name, message); } /// <summary> /// 客戶端鏈接的時候調用 /// </summary> /// <returns></returns> public override Task OnConnected() { Trace.WriteLine("客戶端鏈接成功"); return base.OnConnected(); } }
七、修改Index.cshtml頁面代碼
@{ ViewBag.Title = "聊天窗口"; } <h2>Chat</h2> <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> @section scripts { <!--引用SignalR庫. --> <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script> <!--引用自動生成的SignalR 集線器(Hub)腳本.在運行的時候在瀏覽器的Source下可看到 --> <script src="~/signalr/hubs"></script> <script> $(function () { // 一、引用自動生成的集線器代理 必須用小寫字母開頭 var chat = $.connection.chatHub; // 二、開始鏈接服務器 done函數代表創建鏈接成功後爲發送按鈕註冊了一個click事件 $.connection.hub.start().done(function () { $('#sendmessage').click(function () { // 調用服務器端集線器的Send方法 也要小寫開頭 chat.server.send($('#message').val()); // 清空輸入框信息並獲取焦點 $('#message').val('').focus(); }); }); // 三、定義服務器端調用的客戶端sendMessage來顯示新消息 chat.client.sendMessage = function (name, message) { // 向頁面添加消息 $('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>'); }; // 設置焦點到輸入框 $('#message').focus(); }); // 爲顯示的消息進行Html編碼 function htmlEncode(value) { var encodedValue = $('<div />').text(value).html(); return encodedValue; } </script> }
八、直接運行程序,打開多個網頁,均可以收到相同的消息。。以下:
綜上所述,SignalR使用起來很方便,並且配置很簡單,功能也很強大。碼字不容易,轉載請註明出處
借鑑微博: