ToT*_*oTa 5 javascript asp.net signalr angularjs signalr.client
我已经根据路线创建了Angular应用程序.不使用路由,信号器工作正常,但当我使用路由时,信号器只以一种方式工作 - 从客户端到服务器.
<html ng-app="SignalR">
<head>
//Scripts
<script src="~/signalr/hubs"></script>
</head>
<body>
<a href="#/Today">Today</a>
<a href="#/History">History</a>
<div ng-view>
</div>
<script type="text/javascript">
var hubConnetion = undefined;
hubConnetion = $.connection.hubs;
$.connection.hub.start();
var SignalRControllers = angular.module('SignalRControllers', []);
var SignalRApp = angular.module('SignalR', ['ngRoute', 'SignalRControllers']);
SignalRApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/Today', {
templateUrl: '@Url.Action("Today","Home")'
}).
when('/History', {
templateUrl: '@Url.Action("History", "Home")'
})
}]);
</script>
<script src="~/AngularJs/TodayController.js"></script>
</body>
</html>
TodayController.js
SignalRControllers.controller('TodayController', ['$scope', '$http',
function ($scope, $http) {
$scope.sendTask = function () {
hubConnetion.server.sendTask($("#taskName").val());//works
}
$scope.Task = "task1";
hubConnetion.client.getTask= function (Task) {//never invoked
$scope.Task = Task;
}
}]);
Today.html
<div ng-controller="TodayController">
<div>{{Task}}</div>
<input id="taskName" type="text" />
<div ng-click="sendTask()">SendTask</div>
</div>
Hubs.cs
public class Hubs: Hub
{
public void SendTask(string Name)
{
Clients.All.GetTask(Name);
}
}
我不确定,但我认为因为hubConnetion变量被包装在控制器内部,所以signlarR无法找到它.是否有任何角度魔法可以解决这个问题？
我对 SignalR 也相当陌生（也是 Angular 的第一次用户），因此我在 ASP.NET MVC 4 (SignalR 2.2) 中重新创建（并简化）了该项目来解决问题。而且我认为还有不止一个......
1) SignalR 使用 JQuery。在 jQuery（以及几乎所有其他 JS 框架）中，最好在“文档就绪”事件之后执行代码。因此，我将 SignalR 设置包装在 jQuery 文档就绪处理程序中（请参阅下面的代码）。另外，我删除了hubConnetion全局变量，因为全局变量在 jQuery 文档就绪处理程序中包装后很糟糕，变量是该处理程序的本地变量，并且无论如何都无法在控制器代码中访问...
2）恕我直言，主要问题是这个（ SignalR客户端API的一部分）：
通常，您在调用 start 方法建立连接之前注册事件处理程序。如果您想在建立连接后注册一些事件处理程序，您可以这样做，但在调用 start 方法之前必须注册至少一个事件处理程序。原因之一是应用程序中可以有多个集线器，但如果您只使用其中一个集线器，则不会希望在每个集线器上触发 OnConnected 事件。建立连接后，集线器代理上存在的客户端方法会告诉 SignalR 触发 OnConnected 事件。如果在调用 start 方法之前没有注册任何事件处理程序，您将能够调用 Hub 上的方法，但不会调用 Hub 的 OnConnected 方法，也不会从服务器调用任何客户端方法。
您的事件处理程序是在控制器工厂方法中设置的，该方法在连接方法之后调用start()。尝试在调用之前添加临时start()处理程序，如下所示：
$.connection.tasklistHub.client.getTask = function () { };
3）为了确保问题出在 SignalR 而不是 Angular，我打开了服务器端和客户端跟踪。完成上述所有更改后，客户端已成功接收来自服务器的事件：
SignalR: Triggering client hub event 'getTask' on hub 'TasklistHub'
但 Angular 无法使用收到的数据更新 div。解决方案是使用本文$rootScope.$apply中提到的有关 SignalR 和 Angular 一起使用的功能。现在一切都按预期进行。请参阅下面的完整代码。
旁注：我知道这只是示例代码。在任何现实世界的项目中，我都会考虑将 SignalR 集线器包装在客户端上的某种服务中，例如上面提到的文章或使用这个库（看起来非常优雅）
我还收回我之前关于客户端处理程序名称的答案，因为根据同一文档，客户端方法名称匹配不区分大小写......
索引.cshtml
<html lang="en" ng-app="SignalR">
<head>
<meta charset="utf-8" />
<title>SignalR & AngularJS</title>
<script src="~/Scripts/jquery-1.6.4.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
<script src="~/signalr/hubs"></script>
<script src="~/Scripts/angular.js"></script>
<script type="text/javascript">
$(function() {
$.connection.hub.logging = true;
// temporary handler to force SignalR to subscribe to server events
$.connection.tasklistHub.client.getTask = function () { };
$.connection.hub.start().done(function () {
$('#connectionStatus').text('Connected');
console.log('Now connected, connection ID =' + $.connection.hub.id);
});
});
var SignalRControllers = angular.module('SignalRControllers', []);
var SignalRApp = angular.module('SignalR', ['SignalRControllers']);
</script>
<script src="~/Scripts/app/TodayController.js"></script>
</head>
<body>
<div id="body">
<div ng-view>
<div ng-controller="TodayController">
<div id="connectionStatus"></div>
<div>{{Task}}</div>
<input id="taskName" type="text"/>
<input type="button" name="Send Task" value="Send Task" data-ng-click="sendTask()" />
</div>
</div>
</div>
</body>
</html>
TodayController.js
SignalRControllers.controller('TodayController', [
'$scope', '$http', '$rootScope',
function ($scope, $http, $rootScope) {
$scope.sendTask = function() {
$.connection.tasklistHub.server.sendTask($("#taskName").val());
};
$scope.Task = "Empty";
$.connection.tasklistHub.client.getTask = function (task) {
console.log(task);
$rootScope.$apply(function () {
$scope.Task = task;
});
};
}
]
);
| 归档时间： |
|
| 查看次数： |
6637 次 |
| 最近记录： |