经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
在Volo.Abp微服务中使用SignalR
来源:cnblogs  作者:林晓lx  时间:2023/8/4 9:02:23  对本文有异议

假设需要通过SignalR发送消息通知,并在前端接收消息通知的功能

创建SignalR服务

在项目中引用

  1. abp add-package Volo.Abp.AspNetCore.SignalR

在Module文件中添加对模块依赖

  1. [DependsOn(
  2. ...
  3. typeof(AbpAspNetCoreSignalRModule)
  4. )]
  5. public class IdentityApplicationModule : AbpModule

创建接口INotificationHub

  1. public interface INotificationHub
  2. {
  3. // 发送消息
  4. Task ReceiveTextMessageAsync(SendNotificationDto input);
  5. }

也可以不创建接口,AbpHub类,定义了泛型和非泛型的类型。

创建NotificationHub类,继承AbpHub
可以直接继承Microsoft.AspNetCore.SignalR.Hub,但是这样就不能使用已注入的属性,如 CurrentUser

  1. /// <summary>
  2. /// SignalR消息Hub
  3. /// </summary>
  4. [HubRoute("signalr/Identity/notification")]
  5. [Authorize]
  6. [DisableAuditing]
  7. public class NotificationHub : AbpHub<INotificationHub>
  8. {
  9. }

发送SignalR消息

在需要调用的地方注入IHubContext,并初始化

  1. private readonly IHubContext<NotificationHub, INotificationHub> _hubContext;
  2. public NotificationAppService(IHubContext<NotificationHub, INotificationHub> hubContext)
  3. {
  4. _hubContext = hubContext;
  5. }

使用下面的方式发送给指定用户或者所有用户

  1. public async Task SendMessageToUsersAsync(List<string> userIds, SendNotificationDto sendNotificationDto)
  2. {
  3. await _hubContext.Clients
  4. .Users(userIds.AsReadOnly().ToList())
  5. .ReceiveTextMessageAsync(sendNotificationDto);
  6. }
  7. public async Task SendMessageToAllAsync(SendNotificationDto sendNotificationDto)
  8. {
  9. await _hubContext.Clients.All.ReceiveBroadCastMessageAsync(sendNotificationDto);
  10. }

配置Ocelet网关

为/signalr/identity/路由创建转发规则

当SignalR开始连接时,首先发送协商协议请求,协商协议返回availableTransports告诉客户端支持哪些协议,以及connetcionId和connectionToken,这两个值会在后续的连接中使用。

在这里插入图片描述

在当前路由配置下,请求地址是:/signalr/identity/negotiate,此http请求会通过网关转发到IdentityServer。

在Gateway项目的appsettings.json中配置网关转发规则,如下:

  1. "Routes": [
  2. {
  3. "DownstreamPathTemplate": "/signalr/identity/{everything}",
  4. "DownstreamScheme": "http",
  5. "DownstreamHostAndPorts": [
  6. {
  7. "Host": "localhost",
  8. "Port": 44368
  9. }
  10. ],
  11. "UpstreamPathTemplate": "/signalr/identity/{everything}",
  12. "UpstreamHttpMethod": [ "Put", "Delete", "Get", "Post" ]
  13. },
  14. ...

除此之外还要配置ws协议的转发规则,SignalR首先尝试建立WebSocket连接,WebSocket是 SignalR的最佳传输方式,配置如下:

  1. {
  2. "DownstreamPathTemplate": "/signalr/identity/{everything}",
  3. "DownstreamScheme": "ws",
  4. "Priority": 1,
  5. "DownstreamHostAndPorts": [
  6. {
  7. "Host": "localhost",
  8. "Port": 44368
  9. }
  10. ],
  11. "UpstreamPathTemplate": "/signalr/identity/{everything}",
  12. "UpstreamHttpMethod": [ "Put", "Delete", "Get", "Post" ]
  13. },

尽量使用kestrel运行网关程序,IIS7.0之前不支持websocket,若使用IIS请确保Websocket功能已经打开。
在UseOcelot()之前添加UseWebSockets(),以便网关能接收ws或wss协议的请求。若不加这个网关会在转发时返回499错误码。

  1. app.UseWebSockets();
  2. app.UseOcelot().Wait();

创建SignalR客户端

客户端安装取决于你的UI框架/客户端类型。若使用Asp.NetCore MVC或Razor,请参考abp官方文档
这里补充其他UI框架的使用方法。在webpackage项目中添加对SignalR的依赖

  1. yarn add @microsoft/signalr

创建一个hubConnection
在main.js中添加如下代码

  1. const hubConnection: signalR.HubConnection = new signalR.HubConnectionBuilder()
  2. .withUrl(baseURL + requestUrl, {
  3. headers: header,
  4. accessTokenFactory: () => getAccessToken(),
  5. transport: signalR.HttpTransportType.WebSockets,
  6. logMessageContent: true,
  7. logger: signalR.LogLevel.Information,
  8. })
  9. .withAutomaticReconnect()
  10. .withHubProtocol(new signalR.JsonHubProtocol())
  11. .build();

accessTokenFactory回调用于获取access_token的,会在每次请求时调用以保证获取最新的access_token。

连接服务

在需要使用的地方调用hubConnection方法

  1. hubConnection.start() //开始连接
  2. hubConnection.stop() //停止连接

订阅消息

  1. hubConnection.on("ReceiveTextMessage", (newMsg) => {
  2. console.info("new msg recived!", newMsg)
  3. });

身份验证

WebSockets不支持自定义Header,所以不能使用Authorization,需要使用access_token参数传递令牌

客户端

在客户端中配置getAccessToken,如下:

  1. const getAccessToken: Function = (): string => {
  2. var token = UserModule.token !== undefined ? UserModule.token : "";
  3. return token;
  4. }

UserModule.token是当前登录用户的token,需要在登录成功后保存到UserModule中。

服务端

在服务端中,若已经使用了IdentityServer,则需要在Startup中配置IdentityServerAuthentication,配置如下:

  1. context.Services.AddAuthentication("Bearer")
  2. .AddIdentityServerAuthentication(options =>
  3. {
  4. options.Authority = configuration["AuthServer:Authority"];
  5. options.ApiName = configuration["AuthServer:ApiName"];
  6. options.RequireHttpsMetadata = Convert.ToBoolean(configuration["AuthServer:RequireHttpsMetadata"]);
  7. options.TokenRetriever = (request) =>
  8. {
  9. var path = request.Path;
  10. if (path.StartsWithSegments("/signalr"))
  11. {
  12. var accessToken = request.Query["access_token"].FirstOrDefault();
  13. if (!accessToken.IsNullOrWhiteSpace())
  14. {
  15. return accessToken;
  16. }
  17. }
  18. return TokenRetrieval.FromAuthorizationHeader().Invoke(request);
  19. };
  20. });

如果你适用IISExpress运行项目,注意此时SignalR的url参数可能过长而报告404.15 - Query String Too Long,IIS默认限制是2048,需要在C:\Windows\System32\inetsrv\config\applicationHost.config中配置maxQueryString规则,如下:

  1. <configuration>
  2. <system.webServer>
  3. <security>
  4. <requestFiltering>
  5. <requestLimits maxQueryString="4096" />
  6. </requestFiltering>
  7. </security>
  8. </system.webServer>
  9. </configuration>

原文链接:https://www.cnblogs.com/jevonsflash/p/17604044.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号