Signalr實現消息推送

1、前言

    大多數系統裏面好像都有獲取消息的功能，但這些消息來源都不是實時的，好比你開兩個瀏覽器，用兩個不一樣的帳號登陸，用一個帳號給另一個帳號發送消息，然而並不會實時收到消息，必需要本身手動F5刷新一下頁面纔會顯示本身的消息，這樣感受用戶體驗不太好。以前看了Learning hard關於Signalr的文章，恰好本身項目中有用到獲取實時消息的功能，然而咱們項目中就是用js代碼setinterval方法進行1秒刷新讀取數據的，這樣嚴重給服務器端添加負擔，影響系統性能！因此本身稍微研究了一下，下面是本身的一些理解，若是有不對的地方，請你們加以斧正！

2、實現原理

下面談一下本身對Signalr的理解，Signalr能夠進行遠程分佈式實時通訊，都是使用遠程代理來實現，其中有兩大內部對象，第一個是Persisten Connection，用於客戶端和服務器端的持久鏈接，第二個是Hub（集線器）對象，主要用於信息交互，將服務器端的數據推送(push)至客戶端，大體原理以下：

一、客戶端創建與服務器端的鏈接

二、客戶端調用服務器端的方法

三、服務器端經過客戶端發送的請求，響應數據，再將數據推送至客戶端

3、Signalr實現消息推送

      具體操做實現以下：

      一、建立一個應用程序，我這裏建立的是MVC應用程序

      二、引用相關組件，右鍵引用》選擇管理Nuget程序包

      三、搜索Signalr，如圖所示：

                                 

              點擊安裝，在應用程序的Scripts文件夾裏面會自動生成兩個js文件，如圖所示：

                                  

       四、添加集成器類

                               

       五、註冊signalr/hubs，在Startup.cs裏面添加以下代碼

                              

       六、新建控制器MessageController，而後在控制器裏面新建兩個視圖方法SendMessage和ReceiveMessage，爲了讓效果看起來更直觀，一個頁面用於發送消息，一個頁面用於接收消息，如圖所示：

                             

       七、在咱們剛剛新建的集成器類MyHub類裏面添加代碼：

           (特別說明一下，這裏的InsertMsg方法主要是將客戶端發送的消息信息保存到數據庫裏面，便於消息讀取，爲了快速建立數據庫表，我採用的code first方法來建立的，至於你想用什麼方式建立表，那都是能夠的。)

            

namespace Signalr.Models 
{
    [HubName("MyHub")]
    public class MyHub : Hub
    {
        MessageDbContext _db = new MessageDbContext();
        public void Send(string title, string message)
        {
            this.InsertMsg(title, message);
            // 調用全部客戶端的sendMessage方法
            Clients.All.sendMessage(message);
        }

        private void InsertMsg(string title, string message)
        {
            Message msg = new Message();
            msg.Title = title;
            msg.MsgContent = message;
            _db.Messages.Add(msg);
            _db.SaveChanges();
        }
    }
}

表結構如圖所示：

                       

        八、控制器MessageController後臺代碼

public class MessageController : Controller
    {
      private MessageDbContext _db = new MessageDbContext();
        public ActionResult SendMessage()
        {
            return View();
        }

        public ActionResult ReceiveMessage()
        {
            return View();
        }

        [HttpPost]
        public JsonResult MsgCount()  
        {
            var count = this._db.Messages.Where(p=>p.IsRead==0).Count();
          return Json(new {count=count},JsonRequestBehavior.AllowGet);
        }
    }

 

        九、前端頁面代碼(SendMessage.cshtml)

@{
    ViewBag.Title = "發送消息";
}
<title>發送消息</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
    $(function () {
        // 引用自動生成的集線器代理
        var chat = $.connection.MyHub;
        // 定義服務器端調用的客戶端sendMessage來顯示新消息
        chat.client.sendMessage = function (title, message) {
            // 向頁面發送接收的消息
            sendMsg();
        };
        // 集成器鏈接開始
        $.connection.hub.start().done(function () {
            sendMsg();
            // 服務鏈接完成，給發送按鈕註冊單擊事件
            $('#sendmessage').click(function () {
                // 調用服務器端集線器的Send方法
                chat.server.send($("#title").val(), $('#message').val());
            });
        });
    });

    function sendMsg() {
        var options = {
            url: '/Message/MsgCount',
            type: 'post',
            success: function (data) {
                $("#count").html(data.count);
            }
        };
        $.ajax(options);
    }
</script>


<h2>
    發送消息
</h2>
<div>
    <label>個人消息：</label>
    <span style=" color:red; font-size:30px;" id="count"></span>條
</div>
<p>
    <div>
        標題：
        <input type="text" id="title" />
    </div>
    <br /><br />
    <div>
        內容：
        <textarea id="message" rows="4" cols="30"></textarea>
    </div>
    <br /><br />
    <div>
        <input type="button" id="sendmessage" value="發送" />
    </div>
</p>

         十、前端頁面代碼(ReceiveMessage.cshtml)

@{
    ViewBag.Title = "接受消息";
}
<title>接受消息</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
    $(function () {
        // 引用自動生成的集線器代理
        var chat = $.connection.MyHub;
        // 定義服務器端調用的客戶端sendMessage來顯示新消息
        chat.client.sendMessage = function (title, message) {
            // 向頁面發送接收的消息
            MsgCount();
            var html = "<div>標題：" + title + "消息內容：" + message + "</div>";
            $("#msgcontent").after(html);
        };
        // 集成器鏈接開始
        $.connection.hub.start().done(function () {
            MsgCount();
        });
    });
    function MsgCount() {
        var options = {
            url: '/Message/MsgCount',
            type: 'post',
            async:false,
            data: { title: $("#title").val(), msgcontent: $("#sendmessage").val() },
            success: function (data) {
                $("#count").html(data.count);
            }
        };
        $.ajax(options);
    }
</script>


<h2>
    接收消息
</h2>

<div>
    <label>個人消息：</label>
    <span style=" color: red; font-size: 30px;  margin-right:10px;" id="count"></span>條
    <br />
    <br />
    <div id="msgcontent"></div>
</div>

 

 好了，大功告成，可能你有點疑問的是這個js文件引用地方在哪裏

不防咱們運行頁面，按F12查看一下，它會自動在這裏生成一個js文件，咱們只要在頁面中引用這個路徑便可

4、頁面效果(見證奇蹟的時刻到了，哈哈哈~~~)

      爲了讓頁面效果更爲直觀，我這裏用IE打開SendMessage.cshtml頁面，用Google打開ReceiveMessage.cshtml頁面。

 

權責申明

做者：SportSky 出處： http://www.cnblogs.com/sportsky/本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。若是以爲還有幫助的話，能夠點一下右下角的【推薦】，但願可以持續的爲你們帶來好的技術文章！想跟我一塊兒進步麼？那就【關注】我吧