在单个页面中管理多个 SignalR 连接

Question

我遇到了间歇性信号器连接问题

有时它失败，有时它没有...

这是设置...

我有一个订单列表，每个订单都有一个唯一的信号器连接。目前，单个页面上有230个订单。建立信令连接的目的是让用户可以看到每个订单的任何实时更新(谁在查看、编辑等(。我决定为每个订单建立一个单独的连接，这样我就不必管理当前正在查看、编辑等的订单。到目前为止，对于已成功连接的订单，更新正确且流畅。

这是我的列表，其中包含另一个用户查看订单的示例(正在显示该用户的照片(

这是我连接到信号器集线器的代码

crimeassure.factory('hubProxy', ['$rootScope', function ($rootScope) {
function hubProxyFactory(hubName) {
var _hubConnection = $.hubConnection();
_hubConnection.logging = true;
var _hubProxy = _hubConnection.createHubProxy(hubName);
return {
on: function (eventName, callback, failCallback) {
_hubProxy.on(eventName, function (result) {
$rootScope.$apply(function () {
if (callback) {
callback(result);
}
});                     
})
},
invoke: function (methodName, data) {
_hubProxy.invoke(methodName, data)
.done(function (result) {
//$rootScope.$apply(function () {
//    if (callback) {
//        callback(result);
//    }
//});
});
},
start: function (successCallback, failCallback) {                  
_hubConnection.start({ transport: 'webSockets' }).done(successCallback).fail(failCallback);
},              
hubConnection: _hubConnection,
};
};
return hubProxyFactory; 

}](;

crimeassure.directive('componentLiveUpdates', function () {
return {
restrict: 'E',
scope: {
componentId: '=',               
},
templateUrl: '/scripts/templates/directive-templates/component-live-updates.html',
controllerAs: 'vm',
bindToController: true,
controller: ["$scope", "$rootScope", "appData", "hubProxy",
function componentLiveUpdates($scope, $rootScope, appData, hubProxy) {
var vm = (this);
var user = appData.getCurrentUser();
vm.componentActivity = [];
var reQueueHub = hubProxy('researcherExpressQueueHub');
var componentActivityChanged = function (component) {
if (component.ActivityValue === 'ComponentModalClose') {
var idx = vm.componentActivity.indexOf(component);
vm.componentActivity.splice(idx, 1);
}
if (component.ActivityValue === 'ComponentModalOpen') {
vm.componentActivity.push(component);
}
}
var successCallback = function () {
console.log('connected to signalR, connection ID =' + reQueueHub.hubConnection.id + '--' + vm.componentId);
reQueueHub.invoke('joinGroup', vm.componentId);
$rootScope.reQueueHubs.push({
ComponentId: vm.componentId,
Hub: reQueueHub
});
}
var failCallback = function (e) {
console.log('Error connecting to signalR = ' + vm.componentId);
console.log(e);
//startHubConnection();
}
var startHubConnection = function () {
reQueueHub.start(successCallback, failCallback);
}
var initialize = function () {
reQueueHub.on('updateComponentActivity', componentActivityChanged);
startHubConnection();
}
initialize();
}],
}
});

这是我的枢纽类

public class ResearcherExpressQueueHub : Hub
{
public void UpdateComponentActivity(ComponentItem item)
{
Clients.Group(item.ComponentId.ToString()).updateComponentActivity(item);
}
public void ComponentModalOpen(ComponentItem item)
{
item.Activity = ComponentActivity.ComponentModalOpen;
Clients.Group(item.ComponentId.ToString()).updateComponentActivity(item);
}
public void ComponentModalClose(ComponentItem item)
{
item.Activity = ComponentActivity.ComponentModalClose;
Clients.Group(item.ComponentId.ToString()).updateComponentActivity(item);
}
public Task JoinGroup(string componentId)
{
return Groups.Add(Context.ConnectionId, componentId);
}
public Task LeaveGroup(string componentId)
{
return Groups.Remove(Context.ConnectionId, componentId);
}
}

所以我的问题是，

1. 为什么我遇到断开连接"WebSocket 在建立连接之前已关闭">

2. 我的方法是否是满足此类要求的最佳方式？

Answer 1

使用信号器的分组机制，而不是为您的用例创建多个连接！

IIS 和浏览器都有限制。某些浏览器限制为 4 或 5 个平行连接。您可以通过打开多个不同的浏览器自行测试。

有关分组的详细信息：

在信号器中使用组非常简单。您可以在此处找到详细信息：https://learn.microsoft.com/en-us/aspnet/signalr/overview/guide-to-the-api/working-with-groups