asp.net mvc 實現簡單的實時消息推送

時間 2019-11-20

標籤 asp.net asp mvc 實現簡單實時消息推送欄目 ASP 简体版

原文原文鏈接

由於項目須要，須要在網頁上實現消息的推送。在百度上搜索了一下，發現實現網頁上的消息推送，可使用asp.net 中的SignalR類庫，固然也可使用H5的WebSocket Ajax的輪迴。固然此處咱們使用asp.net 中的SignalR類庫。由於它能夠實現網頁上消息的實時推送。什麼是實時推送呢，我簡單的說一下我我的的理解吧。實時：在同一時間類發生的事情，固然在計算機中並非絕對的實時，由於CPU在同一時間片只能處理一個任務，那麼這個時候疑問又來了？咱們平時使用電腦又上網，又聽音樂是如何實現的呢，由於如今的CPU的計算速度很快。CPU會把處理不一樣的任務的時間片，CPU會把時間片劃到很小，很小，小到咱們人類感知不到。好比在如今這個時間片上，CPU正在處理音樂任務,在下一個時間片的時候,CPU又在處理上網任務。因此我認爲在計算機並無絕對的實時，只是咱們人類感知不到罷了。推送：在此處的推送是指在網頁消息推送。例如：用戶A和B分別在各自的電腦打開打開一個相同的消息推送網頁。假設用戶A如今向用戶B發送消息。就要經歷一個這樣的過程用戶A->Server->用戶B。固然具體的底層實現過程，我就不在些探討了哈。由於這個不是如今所要探討的主題。由於Server有地址通常是固定不變的。因此客戶端向服務器發送消息比較容易，由於目的地址固定。那服務器如何向客戶端發送消息呢，這個就有點難道了由於客戶端的地址不固定的，而且http是無狀態的是不能記住用戶的地址的。因此爲了解決這一個問題。計算機的先輩們用到了幾個方法，一、客戶端"心跳"。每隔一段時間去訪問服務器，看看服務器有沒有任務給其客戶端。Ajax的輪迴就是使用的這個方法。缺點就是實時性不過高。二、服務端和客戶端的長鏈接，本文所要談到的SignalR就是用的這種思想。缺點：服務器的壓力大。css

好了，如今就說一下什麼是SignalR吧。SignalR 是爲 ASP.NET 開發人員提供的一個庫，能夠簡化開發人員將實時 Web 功能添加到應用程序的過程。實時 Web 功能是指這樣一種功能：當所鏈接的客戶端變得可用時服務器代碼能夠當即向其推送內容，而不是讓服務器等待客戶端請求新的數據。這個也就實現消息的實時推送。我我的理解的實現原理是首先由服務器定製一個函數用於一個客戶端調用將消息發送給另外一個客戶端。固然客戶端也須要定抽一個函數。由於服務器須要調用客戶端的這個函數。html

下面就說下具體的操做方法吧。jquery

一、環境：win 10+VS2015 社區版bootstrap

如今說下具體須要包含的文件吧。mvc

一、SignalR集線器類。用於寫一個訪求調用客戶段的函數。app

二、OWIN類。用於註冊服務器的函數。asp.net

三、前臺的頁面(包括前臺的消息框的編寫，函數的編寫)固然前臺須要一些文件。函數

通常VS沒有自帶SignalR類，須要咱們在開始任務以前去添加這個功能。選擇VS的工具|Nuget包管理器|Nuget包管理器控制檯|Install-Package Microsoft.Aspnet.SignalR去安裝SignalR。安裝完成後，一、咱們在改項目中新建一個文件夾爲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);
            //用戶調用客戶端的函數
        }
    }
}

二、在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註冊
        }
    }
}

三、在Controllers新建一個Home控制器。並寫上以下代碼：

using System.Web.Mvc;

namespace SignalRMvc.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult ClientChat()
        {
            return View();
        }
    }
}

四、在控制器的方法上右擊添加視圖(不使用模板，也不使用佈局頁)後。並寫上以下代碼:

@{
    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來模擬兩個客戶端，固然自身的電腦也就服務端。效果圖以下：

固然我是一個菜鳥中的菜鳥哈。確定有許多理解的不對的地方。但願各位大神們指出哈。

補充一下，你們能夠參考asp.net的官網哈。http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc。固然也能夠看一下相關的視頻哈，我看就是傳智播客上的視頻哈，代碼也是跟視頻一步一步走的。不是打廣告哈，只是單純的技術分享。寫篇博客出來就是爲了具體的方法思路整理出來，固然也是爲了寫一下本身對這個東西的理解吧。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。