因為項目需要，需要在網頁上實現訊息的推送。在百度上搜尋了一下，發現實現網頁上的訊息推送，可以使用asp.net 中的SignalR類庫，當然也可以使用H5的WebSocket Ajax的輪迴。當然此處我們使用asp.net 中的SignalR類庫。因為它可以實現網頁上訊息的即時推送。什麼是即時推送呢，我簡單的說一下我個人的理解吧。即時：在同一時間類發生的事情，當然在電腦中並不是絕對的即時，因為CPU在同一時間片只能處理一個任務，那麼這個時候疑問又來了？
我們平時使用電腦又上網，又聽音樂是如何?的呢，因為現在的CPU的計算速度很快。CPU會把處理不同的任務的時間片，CPU會把時間片划到很小，很小，小到我們人類感知不到。比如在現在這個時間片上，CPU正在處理音樂任務,在下一個時間片的時候,CPU又在處理上網任務。所以我認為在電腦並沒有絕對的即時，只是我們人類感知不到罷了。
推送：在此處的推送是指在網頁訊息推送。例如：使用者A和B分別在各自的電腦開啟開啟一個相同的訊息推送網頁。假設使用者A現在向使用者B發送訊息。就要經曆一個這樣的過程 使用者A->Server->使用者B。當然具體的底層實現過程，我就不在些探討了哈。因為這個不是現在所要探討的主題。因為Server有地址一般是固定不變的。所以用戶端向伺服器發送訊息比較容易，因為目的地址固定。那伺服器如何向用戶端發送訊息呢，這個就有點難道了因為用戶端的地址不固定的，並且http是無狀態的是不能記住使用者的地址的。
所以為瞭解決這一個問題，電腦的先輩們用到了幾個方法：
1、用戶端"心跳"。每隔一段時間去訪問伺服器，看看伺服器有沒有任務給其用戶端。Ajax的輪迴就是使用的這個方法。缺點就是即時性不太高。
2、服務端和用戶端的長串連，本文所要談到的SignalR就是用的這種思想。缺點：伺服器的壓力大。
好了，現在就說一下什麼是SignalR吧。SignalR 是為 ASP.NET 開發人員提供的一個庫，可以簡化開發人員將即時 Web 功能添加到應用程式的過程。即時 Web 功能是指這樣一種功能：當所串連的用戶端變得可用時伺服器代碼可以立即向其推送內容，而不是讓伺服器等待用戶端請求新的資料。這個也就實現訊息的即時推送。我個人理解的實現原理是首先由伺服器定製一個函數用於一個用戶端調用將訊息發送給另一個用戶端。當然用戶端也需要定抽一個函數。因為伺服器需要調用用戶端的這個函數。
下面就說下具體的操作方法吧。
1、環境：win 10+VS2015 社區版
我使用asp.net mvc。首先開啟VS 2015|檔案|建立|項目（SignalRMvc）|asp.net Web應用程式|空模板，MVC，平台大概就是這樣了。
現在說下具體需要包含的檔案吧。
1）、SignalR集線器類。用於寫一個訪求調用客戶段的函數。
2）、OWIN類。用於註冊伺服器的函數。
3）、前台的頁面(包括前台的訊息框的編寫，函數的編寫)當然前台需要一些檔案。
一般VS沒有內建SignalR類，需要我們在開始任務之前去添加這個功能。選擇VS的工具|Nuget包管理器|Nuget包管理器控制台|Install-Package Microsoft.Aspnet.SignalR去安裝SignalR。安裝完成後，1、我們在改項目中建立一個檔案夾為ChatHubs|建立一個SignalR集線器類，並寫上如下代碼：
using Microsoft.AspNet.SignalR;namespace SignalRMvc.ChatHubs{ public class ChatHub : Hub { public void SendMessage(string name,string message) { // Clients.All.hello(); Clients.All.receiveMessage(name, message); //使用者調用用戶端的函數 } }}
2、在ChatHubs檔案夾下建立一個OWIN類。並寫上如下代碼：
using Microsoft.Owin;using Owin;[assembly: OwinStartup(typeof(SignalRMvc.ChatHubs.Startup))]namespace SignalRMvc.ChatHubs{ public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR(); //伺服器的hub註冊 } }}
3、在Controllers建立一個Home控制器。並寫上如下代碼：
using System.Web.Mvc;namespace SignalRMvc.Controllers{ public class HomeController : Controller { // GET: Home public ActionResult ClientChat() { return View(); } }}
4、在控制器的方法上右擊添加視圖(不使用模板，也不使用布局頁)後。並寫上如下代碼:
@{ Layout = null;}<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> @* BootStarp的引入*@ <style> #message_box { height: 400px; overflow-y: scroll; } </style> @* 呈現訊息 *@</head><body> <div class="container"> <div class="row"> <div class="jumbotron"> <ul id="message_box"></ul> </div> 寄件者名稱:<input id="text_name" class="form-control" /><br /> 訊息內容: <textarea id="text_message" class="form-control" rows="3"></textarea> <br /> <button id="btn_send" class="btn btn-block btn-success">Send</button> </div> </div> <script src="~/scripts/jquery-3.1.0.min.js"></script> <script src="~/scripts/jquery.signalR-2.2.1.min.js"></script> @* 上述引入的兩個檔案的順序不以交換，因為下面這個檔案依賴於上面那個檔案 *@ <script src="~/signalr/hubs"></script> <!-- 本地沒有，動態產生 --> <script> $(function () { var $messageBox = $('#message_box'); var $textMessage = $('#text_message'); var $textName = $('#text_name'); //用戶端先與伺服器串連起來，拿到伺服器的代理操作對象 var hubConnection = $.connection.chatHub; //註冊用戶端函數 hubConnection.client.receiveMessage = function (name, message) { $messageBox.append('<li><b>' + name + '</b> say:' + message + '</li>') } //啟動串連到伺服器 $.connection.hub.start().done(function () { $('#btn_send').bind('click', function () { //調用服務端的函數 hubConnection.server.sendMessage($textName.val(), $textMessage.val()); }); }); }); </script></body></html>
如果直接複製使用。要注意前台的代碼引入的檔案的目錄及版本。前台代碼的命名的首字母最好使用小寫，後台代碼的首字母最好使用大寫。因為js預設使用的是駝峰命名法，C Sharp使用帕斯卡命名方式。如果沒有注重這個細節就會很容易出錯。因為後台代碼在執行的時候會動態產生一些JS代碼,JS代碼的預設使用的駝峰命名法。如果你在前台的代碼用了帕斯卡命名方式就很容易出錯了。並且還不好找。我是有過親身經曆的。
下面我們在本地測試下：分別使用FireFox和Chrome來類比兩個用戶端，當然自身的電腦也就服務端。效果圖如下：
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
