AngularJS+ASP.NET MVC+SignalR實現消息推送

jopen 11年前發布 | 81K 次閱讀 Web框架 angularjs

背景

OA管理系統中，員工提交申請單，消息實時通知到相關人員及時進行審批，審批之后將結果推送給用戶。

技術選擇

最開始發現的是firebase，于是很興奮的開始倒騰起來。firebase用起來倒是簡單：引用一個js即可，按官網上的教程很快便應用到了項目中。第二天打開項目發現推送功能不好使了，這是為何？最后發現firebase官網打不開了。。。難道firebase被google收了也會被天朝給墻掉？也許是firebase自己掛掉了，總之是用不了了。因為要完全把推送數據存放在 firebase服務器上來實現推送功能，就會有以下幾個需要擔心的問題：

1.數據不安全

2.對firebase依賴性太強

3.firebase收費（免費版太弱）

于是果斷放棄firebase，朋友推薦有個叫SignalR的東東可以試試，這是專門為ASP.NET開發人員準備的一款消息推送類庫，且不依賴別的服務器、免費。

使用方法

1.在nuget中搜索并添加SignalR最新版本

AngularJS+ASP.NET MVC+SignalR實現消息推送

2.在頁面中引用jquery.signalR-2.2.0.min.js文件(依賴jquery)，再添加<script src="/signalr/hubs"></script>用于自動生成signalr的腳本

3.添加MsgHub.cs類，用于處理對應用戶信息和消息推送實現

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

namespace ZmeiOA.Services
{
         [Authorize]
    [HubName("ZmHub")]
    public class MsgHub : Hub
    {/// <summary>
        /// 連接
        /// </summary>
        /// <returns></returns>
        public override System.Threading.Tasks.Task OnConnected()
        {
            Groups.Add(Context.ConnectionId, Context.User.Identity.Name);
            return base.OnConnected();
        }

        /// <summary>
        /// 重新連接
        /// </summary>
        /// <returns></returns>
        public override System.Threading.Tasks.Task OnReconnected()
        {
            Groups.Add(Context.ConnectionId, Context.User.Identity.Name);
            return base.OnReconnected();
        }

        /// <summary>
        /// 斷開連接
        /// </summary>
        /// <param name="stopCalled"></param>
        /// <returns></returns>
        public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled)
        {
            Groups.Remove(Context.ConnectionId, Context.User.Identity.Name);
            return base.OnDisconnected(stopCalled);
        }
    }
}

說明：SignalR的推送消息是基于用戶連接(ConnectionId)的，SignalR會為每個會話自動生成一個 ConnectionId。但是我們的推送是基于用戶的（權限體系），也就是只有登錄之后才注冊到此Hub。在這里我用到的是SignalR中的 Groups，把登錄用戶的ConnectionId與對應的UserId添加到Groups中，推送的時候只要指定Groups的 Name，SignalR便會自動找出其對應的ConnectionId并發送消息（這種方式可能不是最好的，因為每個用戶的UserId都會作為 Groups的Key添加進去，當用戶量很大的時候Groups也會很龐大，但我還沒找到更好的替代方案）。

4.消息推送有兩種形式：a.服務端直接推送；b.客戶端推送。

區別在于，服務端推送是在持久化數據之后便可以直接把消息推送給相關人；而客戶端推送是持久化數據之后，客戶端根據返回值的情況，使用 SignalR的JS方法調用服務端的推送功能。我使用的是服務器端直接推送數據，因為在持久化數據之后就完全可以根據業務通知相關人，如果返回到前臺之后再調用服務端的推送方法只是多此一舉。

如：保存申請單成功之后立刻通知審批人

在Service中獲取Hub的上下文

        /// <summary>
        /// 消息推送上下文
        /// </summary>
        protected static IHubContext ZmHubContext = GlobalHost.ConnectionManager.GetHubContext<MsgHub>();

在保存申請單之后給相關人員推送消息(注意：dynamic方法broadcastTodo就是在客戶端需要接收消息的方法)

public static ApplyForm Save(FormView view)
{        
         //省略業務操作...
         //...
    //通知待辦事項
    ZmHubContext.Clients.Groups(app.AuditorIds.Split(',')).broadcastTodo(app.AuditorIds, new { type = "new", data = app });
    return app;
}

5.在注冊Angular模塊時連接Hub并作為value傳入到模塊中，這樣每個controller都可以使用此連接：

        var zmHub = $.connection.ZmHub;

        var zmApp = angular.module('zmApp', ['ngRoute', 'ngResource', 'ngSanitize', 'ngMessages', 'ngSVGAttributes']).value('zmHub', zmHub);

6.在首頁的controller中接收推送的消息，并提供兩種推送體驗：a.桌面通知；b.頁面內消息。桌面通知很酷，即使是瀏覽器最小化的時候，在桌面右下角也可以收到提示（Chrome和Firefox支持，IE不支持）

zmHub.client.broadcastTodo = function (userIds, obj) {
    //通知下級控制器有待辦事項
    $scope.$broadcast('todoschanged', obj);
    //顯示桌面通知
    if (obj.type == 'new') {
                 //桌面通知標題
        var title = '來自[' + obj.data.ApplicantName + ']的申請單';
        //申請單類型名稱
        var formTypeName = DefaultService.getEnumText(17, obj.data.Type);
        var msg = '[' + formTypeName + ']' + obj.data.Name;
                 //桌面通知方法
        NotifyService.Notify('todos', title, msg);
    }
}

下級控制器的接收方法（關于angularjs的broadcast不多解釋，不明白的可以到官網查閱）：

//接收推送的待辦事項
$scope.$on('todoschanged', function (d, obj) {
    $scope.$apply(function () {
                 //如果是新增數據，在當前列表中添加一條
        if (obj.type == 'new') {
            $scope.todoApps.unshift(obj.data);
        }
        else if (obj.type == 'delete') {//如果是撤銷申請，則把當前列表中那條數據刪除
            for (var j = 0; j < $scope.todoApps.length; j++) {
                if ($scope.todoApps[j].Id == obj.data.Id) {
                    $scope.todoApps.splice(j, 1);
                    break;
                }
            }
        }
    });
});

桌面通知服務：

//桌面通知服務
zmApp.factory('NotifyService', function () {

    return {
        Notify: function (icon, title, msg) {
            // At first, let's check if we have permission for notification
            // If not, let's ask for it
            if (window.Notification && Notification.permission !== "granted") {
                Notification.requestPermission(function (status) {
                    if (Notification.permission !== status) {
                        Notification.permission = status;
                    }
                });
            }
            var iconPath = '/Content/images/icons/' + (icon || 'info') + '.png';
            var options = {
                lang: 'zh-CN',
                body: msg,
                icon: iconPath
            };
            var notify;
            // If the user agreed to get notified
            if (window.Notification && Notification.permission === "granted") {
                notify = new Notification(title, options);
            }
            else if (window.Notification && Notification.permission !== "denied") {
                Notification.requestPermission(function (status) {
                    if (Notification.permission !== status) {
                        Notification.permission = status;
                    }
                    if (status === "granted") {
                        notify = new Notification(title, options);
                    }
                    else {
                        console.log('您禁止了桌面通知，無法推送到您的桌面！');
                    }
                });
            }
            else {
                console.log('您禁止了桌面通知，無法推送到您的桌面！');
            }
            if (notify) {
                notify.onclose = function (evt) {

                };
                //點擊切換到瀏覽器
                notify.onclick = function () {
                    window.focus();
                };
            }
        }
    };
});

桌面通知效果：

AngularJS+ASP.NET MVC+SignalR實現消息推送

總結：

用SignalR推送消息總的來說比較簡單，只需要簡單幾步便可實現，而且是selfhost，不必擔心對其它服務器的依賴和數據安全問題，感興趣的朋友可以試試

來自：http://www.cnblogs.com/usea/p/4282560.html

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1423637939982.html

Web框架 angularjs

AngularJS+ASP.NET MVC+SignalR實現消息推送

相關經驗

相關資訊

相關文檔

目錄