AngularJS+ASP.NET MVC+SignalR實現(xiàn)消息推送
2018-07-20 來源：編程學(xué)習(xí)網(wǎng)
背景
OA管理系統(tǒng)中，員工提交申請單，消息實時通知到相關(guān)人員及時進行審批，審批之后將結(jié)果推送給用戶。
技術(shù)選擇
最開始發(fā)現(xiàn)的是firebase，于是很興奮的開始倒騰起來。firebase用起來倒是簡單：引用一個js即可，按官網(wǎng)上的教程很快便應(yīng)用到了項目中。第二天打開項目發(fā)現(xiàn)推送功能不好使了，這是為何？最后發(fā)現(xiàn)firebase官網(wǎng)打不開了。。。難道firebase被google收了也會被天朝給墻掉？也許是firebase自己掛掉了，總之是用不了了。因為要完全把推送數(shù)據(jù)存放在firebase服務(wù)器上來實現(xiàn)推送功能，就會有以下幾個需要擔(dān)心的問題：
1.數(shù)據(jù)不安全
2.對firebase依賴性太強
3.firebase收費（免費版太弱）
于是果斷放棄firebase，朋友推薦有個叫SignalR的東東可以試試，這是專門為ASP.NET開發(fā)人員準(zhǔn)備的一款消息推送類庫，且不依賴別的服務(wù)器、免費。
使用方法
1.在nuget中搜索并添加SignalR最新版本
2.在頁面中引用jquery.signalR-2.2.0.min.js文件(依賴jquery)，再添加<script src=”/signalr/hubs”></script>用于自動生成signalr的腳本
3.添加MsgHub.cs類，用于處理對應(yīng)用戶信息和消息推送實現(xiàn)
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。但是我們的推送是基于用戶的（權(quán)限體系），也就是只有登錄之后才注冊到此Hub。在這里我用到的是SignalR中的Groups，把登錄用戶的ConnectionId與對應(yīng)的UserId添加到Groups中，推送的時候只要指定Groups的Name，SignalR便會自動找出其對應(yīng)的ConnectionId并發(fā)送消息（這種方式可能不是最好的，因為每個用戶的UserId都會作為Groups的Key添加進去，當(dāng)用戶量很大的時候Groups也會很龐大，但我還沒找到更好的替代方案）。
4.消息推送有兩種形式：a.服務(wù)端直接推送；b.客戶端推送。
區(qū)別在于，服務(wù)端推送是在持久化數(shù)據(jù)之后便可以直接把消息推送給相關(guān)人；而客戶端推送是持久化數(shù)據(jù)之后，客戶端根據(jù)返回值的情況，使用SignalR的JS方法調(diào)用服務(wù)端的推送功能。我使用的是服務(wù)器端直接推送數(shù)據(jù)，因為在持久化數(shù)據(jù)之后就完全可以根據(jù)業(yè)務(wù)通知相關(guān)人，如果返回到前臺之后再調(diào)用服務(wù)端的推送方法只是多此一舉。
如：保存申請單成功之后立刻通知審批人
在Service中獲取Hub的上下文
/// <summary> /// 消息推送上下文 /// </summary> protected static IHubContext ZmHubContext = GlobalHost.ConnectionManager.GetHubContext<MsgHub>();
在保存申請單之后給相關(guān)人員推送消息(注意：dynamic方法broadcastTodo就是在客戶端需要接收消息的方法)
public static ApplyForm Save(FormView view)
{
//省略業(yè)務(wù)操作...
//...
//通知待辦事項
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.頁面內(nèi)消息。桌面通知很酷，即使是瀏覽器最小化的時候，在桌面右下角也可以收到提示（Chrome和Firefox支持，IE不支持）
zmHub.client.broadcastTodo = function (userIds, obj) {
//通知下級控制器有待辦事項
$scope.$broadcast('todoschanged', obj);
//顯示桌面通知
if (obj.type == 'new') {
//桌面通知標(biāo)題
var title = '來自[' + obj.data.ApplicantName + ']的申請單';
//申請單類型名稱
var formTypeName = DefaultService.getEnumText(17, obj.data.Type);
var msg = '[' + formTypeName + ']' + obj.data.Name;
//桌面通知方法
NotifyService.Notify('todos', title, msg);
}
}
下級控制器的接收方法（關(guān)于angularjs的broadcast不多解釋，不明白的可以到官網(wǎng)查閱）：
//接收推送的待辦事項
$scope.$on('todoschanged', function (d, obj) {
$scope.$apply(function () {
//如果是新增數(shù)據(jù)，在當(dāng)前列表中添加一條
if (obj.type == 'new') {
$scope.todoApps.unshift(obj.data);
}
else if (obj.type == 'delete') {//如果是撤銷申請，則把當(dāng)前列表中那條數(shù)據(jù)刪除
for (var j = 0; j < $scope.todoApps.length; j++) {
if ($scope.todoApps[j].Id == obj.data.Id) {
$scope.todoApps.splice(j, 1);
break;
}
}
}
});
});
桌面通知服務(wù)：
//桌面通知服務(wù)
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();
};
}
}
};
});
桌面通知效果：
總結(jié)：
用SignalR推送消息總的來說比較簡單，只需要簡單幾步便可實現(xiàn)，而且是selfhost，不必?fù)?dān)心對其它服務(wù)器的依賴和數(shù)據(jù)安全問題，感興趣的朋友可以試試
標(biāo)簽： Google 安全 服務(wù)器 服務(wù)器端 腳本 權(quán)限 搜索
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
