Signalr實現消息推送_ZenDei技術網路在線

一、前言大多數系統裡面好像都有獲取消息的功能，但這些消息來源都不是實時的，比如你開兩個瀏覽器，用兩個不同的賬號登錄，用一個賬號給另外一個賬號發送消息，然而並不會實時收到消息，必須要自己手動F5刷新一下頁面才會顯示自己的消息，這樣感覺用戶體驗不太好。之前看了Learning hard關於Signal ...

一、前言

大多數系統裡面好像都有獲取消息的功能，但這些消息來源都不是實時的，比如你開兩個瀏覽器，用兩個不同的賬號登錄，用一個賬號給另外一個賬號發送消息，然而並不會實時收到消息，必須要自己手動F5刷新一下頁面才會顯示自己的消息，這樣感覺用戶體驗不太好。之前看了Learning hard關於Signalr的文章，剛好自己項目中有用到獲取實時消息的功能，然而我們項目中就是用js代碼setinterval方法進行1秒刷新讀取數據的，這樣嚴重給伺服器端添加負擔，影響系統性能！所以自己稍微研究了一下，下麵是自己的一些理解，如果有不對的地方，請大家加以斧正！

二、實現原理

下麵談一下自己對Signalr的理解，Signalr可以進行遠程分散式實時通信，都是使用遠程代理來實現，其中有兩大內部對象，第一個是Persisten Connection，用於客戶端和伺服器端的持久連接，第二個是Hub（集線器）對象，主要用於信息交互，將伺服器端的數據推送(push)至客戶端，大致原理如下：

1、客戶端建立與伺服器端的連接

2、客戶端調用伺服器端的方法

3、伺服器端通過客戶端發送的請求，響應數據，再將數據推送至客戶端

三、Signalr實現消息推送

具體操作實現如下：

1、創建一個應用程式，我這裡創建的是MVC應用程式

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

3、搜索Signalr，如圖所示：

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

4、添加集成器類

5、註冊signalr/hubs，在Startup.cs裡面添加如下代碼

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

7、在我們剛剛新建的集成器類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();
        }
    }
}

表結構如圖所示：

8、控制器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);
        }
    }

9、前端頁面代碼(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>

10、前端頁面代碼(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文件，我們只要在頁面中引用這個路徑即可

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

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

權責申明

作者：SportSky 出處： http://www.cnblogs.com/sportsky/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。如果覺得還有幫助的話，可以點一下右下角的【推薦】，希望能夠持續的為大家帶來好的技術文章！想跟我一起進步麽？那就【關註】我吧