巡更項(xiàng)目中，需要發(fā)送實(shí)時(shí)消息，以及需要任務(wù)開(kāi)始提醒，于是便有機(jī)會(huì)接觸到SignalR，在使用過(guò)程中，發(fā)現(xiàn)用SignalR實(shí)現(xiàn)通信非常簡(jiǎn)單，下面我思明將從三個(gè)方面分享一下：

一、SignalR是什么

Asp.net SignalR是微軟為實(shí)現(xiàn)實(shí)時(shí)通信的一個(gè)類(lèi)庫(kù)。一般情況下，SignalR會(huì)使用JavaScript的長(zhǎng)輪詢(xún)(long polling)的方式來(lái)實(shí)現(xiàn)客戶(hù)端和服務(wù)器通信，隨著Html5中WebSockets出現(xiàn)，SignalR也支持WebSockets通信。另外SignalR開(kāi)發(fā)的程序不僅僅限制于宿主在IIS中，也可以宿主在任何應(yīng)用程序，包括控制臺(tái)，客戶(hù)端程序和Windows服務(wù)等，另外還支持Mono，這意味著它可以實(shí)現(xiàn)跨平臺(tái)部署在Linux環(huán)境下。

SignalR內(nèi)部有兩類(lèi)對(duì)象：

Http持久連接(Persisten Connection)對(duì)象：用來(lái)解決長(zhǎng)時(shí)間連接的功能。還可以由客戶(hù)端主動(dòng)向服務(wù)器要求數(shù)據(jù)，而服務(wù)器端不需要實(shí)現(xiàn)太多細(xì)節(jié)，只需要處理PersistentConnection 內(nèi)所提供的五個(gè)事件：OnConnected, OnReconnected, OnReceived, OnError 和 OnDisconnect 即可。

Hub（集線器）對(duì)象：用來(lái)解決實(shí)時(shí)(realtime)信息交換的功能，服務(wù)端可以利用URL來(lái)注冊(cè)一個(gè)或多個(gè)Hub，只要連接到這個(gè)Hub，就能與所有的客戶(hù)端共享發(fā)送到服務(wù)器上的信息，同時(shí)服務(wù)端可以調(diào)用客戶(hù)端的腳本。

SignalR將整個(gè)信息的交換封裝起來(lái)，客戶(hù)端和服務(wù)器都是使用JSON來(lái)溝通的，在服務(wù)端聲明的所有Hub信息，都會(huì)生成JavaScript輸出到客戶(hù)端，.NET則依賴(lài)Proxy來(lái)生成代理對(duì)象，而Proxy的內(nèi)部則是將JSON轉(zhuǎn)換成對(duì)象。

二、為什么要用SignalR

聊天室，如在線客服系統(tǒng)，IM系統(tǒng)等

消息的實(shí)時(shí)推送服務(wù)

巡更人員位置的實(shí)時(shí)推送

三、怎么實(shí)現(xiàn)SignalR，下面主要介紹一下SignalR第一大功能，聊天。以下是一個(gè)簡(jiǎn)單的DEMO:

1、新建一個(gè)asp.net web 應(yīng)用程序

2、選擇模板MVC，同時(shí)更改無(wú)身份驗(yàn)證

3、選擇新建的項(xiàng)目，右擊-->選擇管理NuGet程序包-->搜索 signalr--> 安裝Microsoft ASP.NET SignalR

4、新建啟動(dòng)程序 Startup.cs

在類(lèi)中添加代碼：

app.MapSignalR();

5、新建SignalR集線器類(lèi)ChatHub.cs

6、在集線器類(lèi)ChatHub.cs中添加如下代碼

public class ChatHub : Hub
 {
  /// <summary>
  /// 供客戶(hù)端調(diào)用的服務(wù)器端代碼
  /// </summary>
  /// <param name="message"></param>
  public void Send(string message)
  {
   var name = Guid.NewGuid().ToString().ToUpper();
   // 調(diào)用所有客戶(hù)端的sendMessage方法
   Clients.All.sendMessage(name, message);
  }

  /// <summary>
  /// 客戶(hù)端連接的時(shí)候調(diào)用
  /// </summary>
  /// <returns></returns>
  public override Task OnConnected()
  {
   Trace.WriteLine("客戶(hù)端連接成功");
   return base.OnConnected();
  }
 }

7、修改Index.cshtml頁(yè)面代碼

@{
 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庫(kù). -->
 <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
 <!--引用自動(dòng)生成的SignalR 集線器(Hub)腳本.在運(yùn)行的時(shí)候在瀏覽器的Source下可看到 -->
 <script src="~/signalr/hubs"></script>

 <script>
  $(function () {
   // 1、引用自動(dòng)生成的集線器代理 必須用小寫(xiě)字母開(kāi)頭
   var chat = $.connection.chatHub;

   // 2、開(kāi)始連接服務(wù)器 done函數(shù)表明建立連接成功后為發(fā)送按鈕注冊(cè)了一個(gè)click事件
   $.connection.hub.start().done(function () {
    $('#sendmessage').click(function () {
     // 調(diào)用服務(wù)器端集線器的Send方法 也要小寫(xiě)開(kāi)頭
     chat.server.send($('#message').val());
     // 清空輸入框信息并獲取焦點(diǎn)
     $('#message').val('').focus();
    });
   });

   // 3、定義服務(wù)器端調(diào)用的客戶(hù)端sendMessage來(lái)顯示新消息
   chat.client.sendMessage = function (name, message) {
    // 向頁(yè)面添加消息
    $('#discussion').append('<li><strong>' + htmlEncode(name)
     + '</strong>: ' + htmlEncode(message) + '</li>');
   };

   // 設(shè)置焦點(diǎn)到輸入框
   $('#message').focus();
  });

  // 為顯示的消息進(jìn)行Html編碼
  function htmlEncode(value) {
   var encodedValue = $('<div />').text(value).html();
   return encodedValue;
  }
 </script>
}

8、直接運(yùn)行程序，打開(kāi)多個(gè)網(wǎng)頁(yè)，都可以收到相同的消息。。如下：

綜上所述，SignalR使用起來(lái)很方便，而且配置很簡(jiǎn)單，功能也很強(qiáng)大。

以上這篇Asp.net SignalR 讓實(shí)時(shí)通訊變得如此簡(jiǎn)單就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論