在Asp.Net MVC中實現SignalR的廣播與定向推送

首先說明一下這個文章是自己在使用SignalR的時候做個記錄，目的是怕以后忘記了，因為我也不常用，做這樣一個簡單的demo以后用到的時候可以翻翻看。

至於SignalR是個什么玩意呢請您去自行百度一下，這里不過多贅述。

下面直入主題！

場景：

我們有個網站，在登錄界面有個二維碼登錄功能，用戶打開我們的APP點擊掃碼登錄掃描網頁上的二維碼，這個時候我想要在頁面上（網站登錄頁）做點反應，當用戶在APP端掃描完畢之后，網站登錄頁上提示  --用戶掃描已完成，請在手機上確認-- 等字樣。

為了實現這個功能，我第一個想到的就是WebSocket但是考慮到瀏覽器的兼容性，果斷的選擇了SignalR，據說這貨是在客戶端的瀏覽器支持WebSocket的時候就用WebSocket不支持的時候就用long polling

實現流程：

1、用戶打開我們的網站（瀏覽器）在登錄頁面選擇二維碼登錄；

2、用戶打開我們的APP掃描網站登錄頁上面的二維碼（前提是APP處於登錄狀態）；

3、用戶掃描完成之后網站的登錄頁面做相應的提示信息顯示。

 

下面是消息處理中心的實現，也是今天的主角

 

1、首先新建一個 .net MVC的項目MessageHub

 

 

 2、然后添加SignalR的引用，直接NuGet搜索SignalR，有很多版本，我這里直接安裝的是最新版的，你也可以選擇安裝2.2.1或者2.2.0

 3、添加引用完成之后，建議你最好看看這個玩意：

 

4、然后在項目中添加一個文件夾，你可以命名為：SignalR，添加我們的第一個Hub，右鍵、添加、新建項、SignalR集線器類（v2）

 

5、修改類中的代碼，如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace MessageHub.SignalR
{
    public class MyHub1 : Hub
    {
        /// <summary>
        /// 用戶的connectionID與用戶名對照表
        /// </summary>
        private readonly static Dictionary<string, string> connections = new Dictionary<string, string>();

        public void Send(string name, string message)
        {
            message = string.Format("消息:{0} 時間:{1}", message, DateTime.Now.ToString());
            //調用所有客戶端的addNewMessageToPage function  
            Clients.All.addNewMessageToPage(name, message);
        }

        public static void Show(string name, string content)
        {
            IHubContext context = GlobalHost.ConnectionManager.GetHubContext<MyHub1>();

            //廣播，所有連接到服務器的客戶端都會收到該通知
            string message = "服務器廣播的消息：hello";
            context.Clients.All.hello(message);

            //推送到某個用戶
            string toUserId = "";
            if (connections.ContainsKey(name))
            {
                toUserId = connections[name];
                context.Clients.Client(toUserId).SendMessage(content == "" ? "服務器給你推送消息了" : content);
            }
        }
        /// <summary>
        /// 用戶上線函數
        /// </summary>
        /// <param name="name"></param>
        public void SendLogin(string name)
        {
            if (!connections.ContainsKey(name))
            {
                //這里是將用戶id和姓名聯系起來
                connections.Add(name, Context.ConnectionId);
            }
            else
            {
                //每次登陸id會發生變化
                connections[name] = Context.ConnectionId;
            }
        }
    }
}

 

6、在App_Start目錄中添加一個Startup.cs 代碼如下：

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(MessageHub.Startup))]
namespace MessageHub
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

 

7、在HomeController中添加兩個Action Chat、Chat1，chat1就是為了簡單省事的做個服務器定點推送 代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MessageHub.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

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

        public ActionResult Chat1()
        {
            SignalR.MyHub1.Show("c1", "你去干啥？");

            return Content("推送消息給客戶端");
        }
    }
}

8、添加Chat視圖：

@{
    ViewBag.Title = "Chat";
}

<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 {
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
    <!--signalr自動生成的腳本-->
    <script src="~/signalr/hubs"></script>
    <script>

        $(function () {
            //聲明hub代理
            var chat = $.connection.myHub1;
            //創建后端要調用的前端function
            chat.client.addNewMessageToPage = function (name, message) {
                //將信息添加到頁面上
                $('#discussion').append('<li><strong>' + name + '</strong>:' + message + '</li>');
            };
            //對應后端的SendMessage函數，消息接收函數
            chat.client.sendMessage = function (message) {
                $('#discussion').append('<li><strong>' + name + '</strong>:' + message + '</li>');
            };
            chat.client.hello = function (message) {
                $('#discussion').append('<li><strong>服務器廣播的消息：hello</strong></li>');
            }
            //獲取輸入的名稱
            $('#displayname').val(prompt('Enter your name:', ''));
            //將焦點定位在信息輸入框中
            $('#message').focus();
            //開啟鏈接
            $.connection.hub.start().done(function () {
                var username = $('#displayname').val();

                //發送上線信息
                chat.server.sendLogin(username);

                $('#sendmessage').click(function () {
                    //調用后台hub的Send方法
                    chat.server.send($('#displayname').val(), $('#message').val());
                    //清除發送的內容，並將焦點定位到信息框
                    $('#message').val('').focus();
                });
            });
        });
    </script>
}  

 

到此代碼已經貼完了，需要注意的點就是當你做定點推送的時候請去看一下這幾個東西：

用一個名為：c1的登錄

刷新我們的Action：chat1

 

 

 第一次發博客，也是希望自己能夠多做記錄，多做筆記，希望大家多多交流共同進步。

有不懂的歡迎留言

歡迎拍磚~