我将使用带 Angular SingalR;我的要求是只有一次将连接 ID 作为单例模式获取并在单个应用程序中使用,因为在我的情况下浏览器将第一次加载,以便 clientid 维护 Controller 中的其余 View 。
所以第一个问题是我创建了如下所示的工厂,但是当我使用这个工厂时出现错误:
undefined factory.Uncaught ReferenceError: signalRHubProxy is not defined(…).
我已经在服务器端完成了所有包含索引的 js 文件设置。
在给定的代码中,我的问题是我该怎么做。有示例代码吗?
- 为什么不获取工厂方法。
- 当任何消息激活时,我如何在每个 Controller 上使用 addChatMessage 监听器。
希望一切顺利。
还有一件事,如果我使用这段代码工作正常,但我的场景是我在上面定义的。
如果我在像这样简单的索引页面上。
index.html
$(function () {
$.connection.hub.url = Config._HubConnectionUrl;
$.connection.hub.logging = true;
var chat = $.connection.communicationHub;
chat.client.addChatMessage = function (userId, message) {
debugger
console.log("wajih");
};
$.connection.hub.start().done(function () {
debugger
$("#clientId").text($.connection.hub.id);
});
});
当我发送任何消息时 addmessage 事件触发器, 但上面我想在多个 Controller 上使用以下结构。 这是我的代码。
RealTimeFactory.js Factory:-
'use strict';
var singalR = angular.module('signalRHubProxy', []);
singalR.factory('signalRHubProxy', function ($rootScope) {
function signalRHubProxyFactory(serverUrl, hubName, startOptions, $rootScope) {
var connection = $.hubConnection();
var proxy = connection.createHubProxy(hubName);
connection.start(startOptions).done(function () {
debugger
});
return {
on: function (eventName, callback) {
proxy.on(eventName, function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
},
off: function (eventName, callback) {
proxy.off(eventName, function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
},
invoke: function (methodName, callback) {
proxy.invoke(methodName)
.done(function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});
});
},
connection: connection
};
};
return signalRHubProxyFactory;
});
My Global controller:-
var app = angular.module('sgApp.controllers', ['signalRHubProxy']);
现在我想在我的 Controller 中使用这个工厂,但出现了我上面提到的错误。
ChatController.js
app.controller('ChatCtrl', function ($rootScope, $scope, signalRHubProxy) {
//var clientHubProxy = signalRHubProxy(
// signalRHubProxy.defaultServer, 'communicationHub',
// { logging: true });
//clientHubProxy.on('addChatMessage', function (data) {
// debugger
// var x = clientHubProxy.connection.id;
//});
});
HomeController.js
app.controller('HomeCtrl', function ($rootScope, $scope, signalRHubProxy) {
//var clientHubProxy = signalRHubProxy(
// signalRHubProxy.defaultServer, 'communicationHub',
// { logging: true });
//clientHubProxy.on('addChatMessage', function (data) {
// debugger
// var x = clientHubProxy.connection.id;
//});
});
这是服务器端代码中心:-
public class CommunicationHub : Hub
{
public void SendTo(string userId, string message)
{
Clients.Client(userId).addChatMessage(userId, message);
}
}
最佳答案
'use strict';
var SignalRWPFactory = function ($rootScope, DataService) {
var _this = this;
_this.rootScope = $rootScope;
_this.dataService = DataService;
_this.init = function (myHub, fn) {
var _this = this;
$.connection.hub.url = "http://localhost:5207/signalr";//i think in the startup we had specified this
_this.create(myHub, fn);
_this.update(myHub, fn);
_this.deleteItem(myHub, fn);
$.connection.hub.start();
},
_this.create = function (myHub, fn) {
var _this = this;
myHub.client.language = function (response) {
if (response != "") {
$rootScope.$apply(function () {
fn(response, 'create');
});
}
};
},
_this.update = function (myHub,fn) {
var _this = this;
myHub.client.languageUp = function (response) {
if (response != "") {
$rootScope.$apply(function () {
fn(response, 'update');
});
}
};
},
_this.deleteItem = function (myHub, fn) {
var _this = this;
myHub.client.languageDel = function (response) {
if (response != "") {
$rootScope.$apply(function () {
fn(response, 'deleteItem');
});
}
};
}
return {
init: _this.init,
create: _this.create,
update: _this.update,
deleteItem: _this.deleteItem
};
};
SignalRWPFactory.$inject = ['$rootScope', 'DataService'];
webAdmin.factory('SignalRWPFactory', SignalRWPFactory);
**> here is the usage from my end
>
> in the controller use like this**
// Declare a proxy to reference the hub.
var myHub = $.connection.languageHub;
_this.signalRWPFactory.init(myHub, signalRCallback);
function signalRCallback(data, callType) {
_this.data = _this.dataService.handleSignalRData(_this.data, data, callType); //it will delete the data from data array
// $scope.$apply();
}
_this.data is the array object you can handle create separate service.
**
> here is the data handler method as well
**
handleSignalRData: function (dataArr, data, type) {
var _this = this;
//sometimes its coming as object
if (Object.prototype.toString.call(data) === '[object Array]') {
data = data[0];
}
switch (type) {
case 'create':
dataArr.push(data);
break;
case 'update':
dataArr = _this.update(dataArr, data); //it will update the row
break;
case 'deleteItem':
dataArr = _this.deleteByAttr(dataArr, "id", data.id); //it will update the row
break;
default:
}
return dataArr;
}
关于javascript - 如何在 angularjs 中将 SignalR 与多个 Controller 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32796382/