AngularJS+ASP.NET MVC+SignalR实现消息推送示例

背景

OA管理系统中,员工提交申请单,消息实时通知到相关人员及时进行审批,审批之后将结果推送给用户。

技术选择

最开始发现的是 firebase ,于是很兴奋的开始倒腾起来。 firebase 用 起来倒是简单:引用一个js即可,按官网上的教程很快便应用到了项目中。第二天打开项目发现推送功能不好使了,这是为何?最后发现firebase官网打 不开了。。。难道firebase被google收了也会被天朝给墙掉?也许是firebase自己挂掉了,总之是用不了了。因为要完全把推送数据存放在 firebase服务器上来实现推送功能,就会有以下几个需要担心的问题:

1.数据不安全

2.对firebase依赖性太强

3.firebase收费(免费版太弱)

于是果断放弃firebase,朋友推荐有个叫 SignalR 的东东可以试试,这是专门为ASP.NET开发人员准备的一款消息推送类库,且不依赖别的服务器、免费。

使用方法

1.在nuget中搜索并添加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>
  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不支持)

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不多解释,不明白的可以到官网查阅):

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;
                }
            }
        }
    });
});
桌面通知服务:

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();
                };
            }
        }
    };
});

桌面通知效果:

总结:

用SignalR推送消息总的来说比较简单,只需要简单几步便可实现,而且是selfhost,不必担心对其它服务器的依赖和数据安全问题,感兴趣的朋友可以试试。

时间: 2024-11-02 09:12:55

AngularJS+ASP.NET MVC+SignalR实现消息推送示例的相关文章

AngularJS+ASP.NET MVC+SignalR实现消息推送

原文:AngularJS+ASP.NET MVC+SignalR实现消息推送 背景 OA管理系统中,员工提交申请单,消息实时通知到相关人员及时进行审批,审批之后将结果推送给用户. 技术选择 最开始发现的是firebase,于是很兴奋的开始倒腾起来.firebase用起来倒是简单:引用一个js即可,按官网上的教程很快便应用到了项目中.第二天打开项目发现推送功能不好使了,这是为何?最后发现firebase官网打不开了...难道firebase被google收了也会被天朝给墙掉?也许是firebase

ASP.Net使用SignalR实现消息推送功能预研及Demo

所需环境:SignalR运行在.NET 4.5平台上,这里演示时采用ASP.NET MVC 3: 一.简介 ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信. 二.原理 其实现原理跟WCF或Remoting相似,均为使用远程代理来实现.实现接口有2种分别是 PersistentConnection 和 Hubs,其中PersistentConnection 是实现长时间js轮循的,Hub是用来解决实时信 息交换问题,其利用js

asp.net mvc实现简单的实时消息推送_实用技巧

因为项目需要,需要在网页上实现消息的推送.在百度上搜索了一下,发现实现网页上的消息推送,可以使用asp.net 中的SignalR类库,当然也可以使用H5的WebSocket  Ajax的轮回.当然此处我们使用asp.net 中的SignalR类库.因为它可以实现网页上消息的实时推送.什么是实时推送呢,我简单的说一下我个人的理解吧.实时:在同一时间类发生的事情,当然在计算机中并不是绝对的实时,因为CPU在同一时间片只能处理一个任务,那么这个时候疑问又来了? 我们平时使用电脑又上网,又听音乐是如何

SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)

 SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr 源码:http://pan.baidu.com/s/1dETGYGT 应用情景之一:     没太多连续的时间来研究SignalR,所以我把这篇文章分了三个阶段: 第一

用ASP.NET可以实现类似人人网的消息推送和在线会话吗?

问题描述 类似于人人网,各种应用的消息或者系统消息即时通知用户,这样的功能是怎么设计实现的?此外人人网那个在线会话的功能是怎么实现的?可以在登录过的多个页面中同时都出现? 解决方案 解决方案二:一个是数据库需要设计在就是拿js实现每隔几秒时间发送一次ajax请求查询用于记录用户消息的记录!需要两张表!并且向关联解决方案三:我的初步想法是构造一个通用的消息池,各个应用如果有消息得话就放到消息池中,用户定期查询这个消息池.这个消息池,主要包括两个部分一个是消息的内容,一个是处理这个消息得页面地址不知

消息推送从始至终~目录

认识它 消息推送这个东西从有了互联网就出现了,但直到出现了HTML5的Websocket,这个东西才算真的,更好了得到了解决,因为之前的方式,我们公认为,它对服务器的压力太大了,客户端不断的在做polling工作,直到服务端有了消息,然后将消息获取过来,这种方式,始终是被动式的,并且,通过浏览器发送的请求,在HTML5出现之前都是HTTP方式的,这种一个请求,一个响应的方式不能很好的实现一个长链接的保持,直到出现了websocket,它可以使一个客户端与服务端保持一个长链接,这事实上,也是实现服

html5-Html5怎么实现消息推送?

问题描述 Html5怎么实现消息推送? html5消息推送,要能实现心跳机制,并且服务端可用C#编写. 解决方案 HTML5中的消息通信 解决方案二: C#的话,直接用signalR就好了,到处都有消息推送和即时聊天的例子. signalR的好处是,它在html5上使用websocket,在早期浏览器上自动降级为长轮询,还可以支持各种客户端.服务器端语言.你不用关心底层. 解决方案三: AJAX或者websocket 解决方案四: ajax可以无缝链接,消息推送网上有很多例子的 解决方案五: 有

tigase 消息推送-tigase-server运行报空指针

问题描述 tigase-server运行报空指针 如题通过下载最新版的tigase-server 7.0.1.exe 解压jar 运行安装...启动时报错通过Pandion客户端无法连接,求大神指点!主要是做消息推送 !

分分钟搞定IOS远程消息推送

分分钟搞定IOS远程消息推送 一.引言 IOS中消息的推送有两种方式,分别是本地推送和远程推送,本地推送在http://my.oschina.net/u/2340880/blog/405491这篇博客中有详细的介绍,这里主要讨论远程推送的流程与配置过程. 二.远程推送机制的原理 1.从一张很火的图说起 搜索IOS远程推送,你总能看到一张如下的流程示意图,因为这张图确实很火,所以我也将它引用在此: 这张图示意的很清晰,大致意思是这样:你的应用服务端将消息发送到apple的APNS服务器,APNS服