我有一个ASP.NET Boilerplate v3.6.2项目(.NET Core / Angular),在其中我需要从后端方法调用客户端函数,因此我使用的是ASP.NET Core SignalR implementation。
我遵循了官方文档,所以:
在后端
在我的模块中,我将依赖项添加到AbpAspNetCoreSignalRModule
:
[DependsOn(typeof(AbpAspNetCoreSignalRModule))]
public class MyModule : AbpModule
并将this NuGet软件包添加到模块的项目中。
然后,我扩展了AbpCommonHub
类以利用SignalR Hub的内置实现,并添加了一个SendMessage()
方法来发送消息:
public interface IMySignalRHub : ITransientDependency
{
Task SendMessage(string message);
}
public class MySignalRHub: AbpCommonHub, IMySignalRHub {
protected IHubContext<MySignalRHub> _context;
protected IOnlineClientManager onlineClientManager;
protected IClientInfoProvider clientInfoProvider;
public MySignalRHub(
IHubContext<MySignalRHub> context,
IOnlineClientManager onlineClientManager,
IClientInfoProvider clientInfoProvider)
: base(onlineClientManager, clientInfoProvider) {
AbpSession = NullAbpSession.Instance;
_context = context;
}
public async Task SendMessage(string message) {
await _context.Clients.All.SendAsync("getMessage", string.Format("User {0}: {1}", AbpSession.UserId, message));
}
}
我将'/ signalr'url的映射更改为MySignalRHub
:
public class Startup {
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) {
[...]
# if FEATURE_SIGNALR
app.UseAppBuilder(ConfigureOwinServices);
# elif FEATURE_SIGNALR_ASPNETCORE
app.UseSignalR(routes => {
routes.MapHub<MySignalRHub>("/signalr");
});
# endif
[...]
}
}
然后我使用集线器在服务实现中发送消息:
public class MyAppService: AsyncCrudAppService<MyEntity, MyDto, int, PagedAndSortedResultRequestDto, MyCreateDto, MyDto>, IMyAppService {
private readonly IMySignalRHub _hub;
public MyAppService(IRepository<MyEntity> repository, IMySignalRHub hub) : base(repository) {
_hub = hub;
}
public override Task<MyDto> Create(MyCreateDto input) {
_hub.SendMessage("test string").Wait();
[...]
}
}
在客户端
原始模板中的所有配置和包含项均已存在。当我打开Angular应用程序时,我可以看到以下控制台日志:
DEBUG: Connected to SignalR server!
DEBUG: Registered to the SignalR server!
当我尝试调用将消息发送到客户端的后端服务时,我在控制台中收到此警告:
Warning: No client method with the name 'getMessage' found.
我尝试了official documentation和Internet上找到的许多解决方案,但都没有用。我无法在客户端代码中定义“ getMessage”处理程序。
我尝试过的一些不起作用示例:
实施1:
// This point is reached
abp.event.on('getMessage', userNotification => {
debugger; // Never reaches this point
});
实施2:
// This point is reached
abp.event.on('abp.notifications.received', userNotification => {
debugger; // Never reaches this point
});
实施3:
// This is taken from the official documentation and triggers the error:
// ERROR TypeError: abp.signalr.startConnection is not a function
abp.signalr.startConnection('/signalr', function (connection) {
connection.on('getMessage', function (message) {
console.log('received message: ' + message);
});
});
您是否曾经遇到过这种情况?您在Angular客户端中有一个简单的处理程序定义示例吗?
我尝试了这种替代解决方案,更改了SignalRAspNetCoreHelper
类(基础模板附带的共享类)的实现:
export class SignalRAspNetCoreHelper {
static initSignalR(): void {
var encryptedAuthToken = new UtilsService().getCookieValue(AppConsts.authorization.encrptedAuthTokenName);
abp.signalr = {
autoConnect: true,
connect: undefined,
hubs: undefined,
qs: AppConsts.authorization.encrptedAuthTokenName + "=" + encodeURIComponent(encryptedAuthToken),
remoteServiceBaseUrl: AppConsts.remoteServiceBaseUrl,
startConnection: undefined,
url: '/signalr'
};
jQuery.getScript(AppConsts.appBaseUrl + '/assets/abp/abp.signalr-client.js', () => {
// ADDED THIS
abp.signalr.startConnection(abp.signalr.url, function (connection) {
connection.on('getMessage', function (message) { // Register for incoming messages
console.log('received message: ' + message);
});
});
});
}
}
现在在控制台中,我可以看到两条消息:
Warning: No client method with the name 'getMessage' found.
SignalRAspNetCoreHelper.ts:22 received message: User 2: asd
它正在运行,但不能完全正常。在某个地方,“ getMessage”处理程序不可见。 用ASP.NET Boilerplate在Angular中实现消息处理程序的正确方法是什么?
答案 0 :(得分:2)
设置autoConnect: false
以启动您自己的连接:
abp.signalr = {
autoConnect: false,
// ...
};
更好 ...
请勿扩展AbpCommonHub
。您会发现实时通知停止工作,您需要替换IRealTimeNotifier
,因为SignalRRealTimeNotifier
使用AbpCommonHub
。
您在Angular客户端中有一个简单的处理程序定义示例吗?
使用ASPNet Boilerplate在Angular中实现消息处理程序的正确方法是什么?
遵循文档并创建一个单独的中心。
答案 1 :(得分:1)
您应该使用Clients.Others.SendAsync
或Client.AllExcept.SendAsync
而不是Clients.All.SendAsync
。
Clients.All.SendAsync
设计用于客户端要发送和接收消息的场景(例如聊天室)。因此,所有连接的客户端都应实现connection.on('getMessage',
以便接收通知。如果没有,他们会在收到刚刚推送的通知时发出警告找不到名为'x'的客户端方法。
在您的情况下,我了解您有一种客户端推送通知,另一种客户端接收通知(例如GPS设备将位置发送到跟踪应用程序)。在这种情况下,使用Clients.Others.SendAsync
或Client.AllExcept.SendAsync
将确保推送客户端不会被广播回他们刚刚推送的通知。
答案 2 :(得分:1)
在我使用包"@aspnet/signalr": "1.1.4"
的Angular应用程序中遇到了相同的错误。
此问题的原因是我加入频道后没有调用subscribe方法。
public async getWorkSheetById(worksheetId: string): Promise < Worksheet > {
const worksheet: Worksheet = await this._worksheetService.getWorksheet(worksheetId);
this.displayWorksheet(worksheet);
await this._worksheetEventsService.joinWorksheetChannel(this._loadedWorksheet.id);
return worksheet;
}
因此,要解决此问题,我在加入await this.subscribeToSendMethod(this._loadedWorksheet)
之后调用了subscribe方法
public subscribeToSendMethod(loadedWorksheet: Worksheet): Worksheet {
let newWorksheet: Worksheet;
this._hubConnection.on('Send', (groupId: string, payloadType: string, payload: string, senderUserId: string)=> {
newWorksheet=this._worksheetHandler.handlePayload(payloadType, payload, loadedWorksheet);
this.displayWorksheet(newWorksheet);
}
);
return newWorksheet;
}