ex7-3 簡易站內訊息通知AngularJS + Bootstrap版
http://amani.test.ntpc.edu.tw/signalr/ex/ex7-3.html
http://amani.test.ntpc.edu.tw/signalr/ex/ex7-3admin.html
- 下載Bootstrap套件
- 下載 toastr套件
- 下載Animate.css後，儲存至Content資料夾
Server端及Client端流程：同ex7-2
Server端NotifyHub.cs完整程式碼：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using System.Threading.Tasks;
public class NotifyHub : Hub
{
private const string ADMIN_GROUP = "adminGroup";
private const string USER_GROUP = "userGroup";
public static class Users
{
public static Dictionary<string, string> ConnectionIds = new Dictionary<string, string>();
}
//管理者進入
//★Groups.Add是非同步執行，如果要新增至group後，馬上執行getList，要寫成
public async Task AdminConnected()
{
//將管理者加入群組
await Groups.Add(Context.ConnectionId, ADMIN_GROUP);
//顯示user列表
Clients.Group(ADMIN_GROUP).getList(Users.ConnectionIds.Select(u => new { id = u.Key, name = u.Value }).ToList());
}
//新使用者連線
public async Task userConnected(string name)
{
//將目前使用者新增至user清單
Users.ConnectionIds.Add(Context.ConnectionId, name);
//發送給管理者，列出user清單
Clients.Group(ADMIN_GROUP).getList(Users.ConnectionIds.Select(u => new { id = u.Key, name = u.Value }).ToList());
//將user加入群組，並列出notify清單
await Groups.Add(Context.ConnectionId, USER_GROUP);
Clients.Client(Context.ConnectionId).showNotify("Welcome " + name);
}
public void SendNotify(string toId,string message)
{
Clients.Client(toId).showNotify(message);
}
//當使用者斷線時呼叫
public override Task OnDisconnected(bool stopCalled)
{
Users.ConnectionIds.Remove(Context.ConnectionId);
Clients.Group(ADMIN_GROUP).getList(Users.ConnectionIds.Select(u => new { id = u.Key, name = u.Value }).ToList());
return base.OnDisconnected(stopCalled);
}
}
- Client端AngularBootstrapNotify.html完整程式碼：
<html>
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/toastr.min.css" rel="stylesheet" />
<!--參考http://daneden.github.io/animate.css-->
<link href="Content/animate.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="signalR/hubs"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/toastr.min.js"></script>
<script>
var app = angular.module("App", []);
app.controller("NotifyCtrl", ["$rootScope", "$scope", function ($rootScope, $scope) {
var hub = $.connection.notifyHub;
$scope.messages = [];
$scope.name = Math.floor(Math.random() * 10000 + 1) + "用戶";
$.connection.hub.start().done(function () {
hub.server.userConnected($scope.name);
});
hub.client.showNotify = function (msg) {
//載入訊息列表
var d = new Date();
var time = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
$scope.messages.push({ content: msg, date: time });
//通知動畫
$scope.isGetNotify = true;
//更新
$rootScope.$apply();
};
$scope.popUpNotify = function (msg) {
//彈跳訊息視窗
toastr.info(msg.content + '<br>時間:'+msg.date);
};
}]);
</script>
</head>
<body ng-app="App" ng-controller="NotifyCtrl">
<!--上方導覽列-->
<nav class="navbar navbar-inverse" role="navigation" style="margin-bottom:0px;">
<div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> 前台:SignalR</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" ng-click="isGetNotify = false">
<span class="glyphicon glyphicon-envelope" ng-class="{animated:isGetNotify, infinite:isGetNotify, swing:isGetNotify}"></span> 訊息
<span class="label label-danger">{{messages.length}}</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" style="width:250px;">
<!--列出所有訊息-->
<li ng-repeat="msg in messages | orderBy:'-date' | limitTo:5 " ng-click="popUpNotify(msg)">
<a href="#">
<span class="glyphicon glyphicon-envelope"></span>
{{msg.content.substr(0,7)}}
<span ng-show="msg.content.length>7">...</span>
<span class="pull-right">{{msg.date}}</span>
</a>
</li>
<li ng-show="messages.length >5" class="divider"></li>
<li ng-show="messages.length >5"><center>查看更多<span class="glyphicon glyphicon-chevron-right"></span></center></li>
</ul>
</li>
</ul>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> {{name}}<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="glyphicon glyphicon-off"></i> Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<img src="images/sample.png" width="100%"/>
</body>
</html>
- Client端AngularBootstrapAdminNotify.html完整程式碼：
<html>
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/toastr.min.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="signalR/hubs"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/toastr.min.js"></script>
<script>
var app = angular.module("App", []);
app.controller("NotifyAdminCtrl", ["$rootScope", "$scope", function ($rootScope, $scope) {
var hub = $.connection.notifyHub;
$scope.users = [];
$.connection.hub.start().done(function () {
hub.server.adminConnected();
});
hub.client.getList = function (users) {
$scope.users = users;
$rootScope.$apply();//更新
};
$scope.sendNotify = function (id, msg) {
hub.server.sendNotify(id, msg);
};
}]);
</script>
</head>
<body ng-app="App" ng-controller="NotifyAdminCtrl">
<h1>管理端</h1>
<table width="400" border="1">
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td><input type="text" ng-model="user.msg" /></td><!--user.msg動態加入-->
<td><button class="btn btn-primary" ng-click="sendNotify(user.id,user.msg)">發送</button></td>
</tr>
</table>
</body>
</html>