ex7-2 簡易站內訊息通知AngularJS版
http://amani.test.ntpc.edu.tw/signalr/ex/ex7-2.html
http://amani.test.ntpc.edu.tw/signalr/ex/ex7-2admin.html
- 下載AngularJS套件： 專案名稱右鍵/管理NuGet套件，右上搜尋框輸入「angularjs」後，選「Angular JS」按「安裝」
- 完整Server端及Client端流程如下：
- 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端AngularNotify.html完整程式碼：
<html>
<head>
<title></title>
<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>
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) {
$scope.messages.push(msg);
$rootScope.$apply();//更新
};
}]);
</script>
</head>
<body ng-app="App" ng-controller="NotifyCtrl">
<p>{{name}}</p>
<ul>
<li ng-repeat="msg in messages">{{msg}}</li>
</ul>
</body>
</html>
- Client端AngularNotifyAdmin.html完整程式碼：
<html>
<head>
<title></title>
<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>
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 ng-click="sendNotify(user.id,user.msg)">發送</button></td>
</tr>
</table>
</body>
</html>