Ant Design Pro V5 配置连接signalR，实现消息推送

　　前言：之前做一个业务接口的时候，需要处理的时间比较长，超过两份钟iis就自动断了连接，一直寻找iis超时的设置方式，改了几个配置后还是到2分钟就报超时，熬到很晚结果耻辱下播。后来思来想去，发现努力的方向错了，为何iis设置超时时间为2分钟，那肯定是有意为之，超过2分钟的连接便不是一个好的连接。处理时间过长的程序，到程序里应该用异步的处理方式，用户调用接口后直接告诉用户，程序在后台运行请稍等，异步执行处理程序，处理完成后消息推送给用户，这才是合理的做法。消息推送就是后端能调用前端的方法。一搜消息推送，就能看到websocket的介绍，一种全双工的连接通信方式。手上在玩的项目，前端用的ant design pro v5，后端.net6，而.net6用的实现这种全双工的通信方式，使用的是signalR。下面就介绍一下前后端如何配置使用signalR。

后端：1.创建 SignalR 中心

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.SignalR;

namespace Wood.API.Hubs
{
    [Authorize]
    public class MessageHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

 

　　2.Program中配置 SignalR，在对应的位置插入如下代码。

//singalR调用特定用户来发送消息，需要此设置，默认userid是ClaimTypes.NameIdentifier
builder.Services.TryAddSingleton(typeof(IUserIdProvider), typeof(DefaultUserIdProvider));

builder.Services.AddSignalR();

//这边设置了专门的认证服务器来验证登录情况，singalR认证主要是自定义一下OnMessageReceived事件，不支持header所以用地址栏参数获取
var Authority = Appsettings.App(new string[] { "AuthorityConfiguration", "Authority" });
    var ApiName = Appsettings.App(new string[] { "AuthorityConfiguration", "ApiName" });
    var RequireHttpsMetadata = Appsettings.App(new string[] { "AuthorityConfiguration", "RequireHttpsMetadata" });

    builder.Services.AddIdentity<User, Role>(options => configuration.GetSection(nameof(IdentityOptions)).Bind(options))
                .AddEntityFrameworkStores<WoodIdentityDbContext>()
                .AddDefaultTokenProviders();

    builder.Services.AddAuthentication(options =>
    {
        options.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
        options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
        options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
        options.DefaultSignInScheme = JwtBearerDefaults.AuthenticationScheme;
        options.DefaultForbidScheme = JwtBearerDefaults.AuthenticationScheme;
    })
        .AddJwtBearer(JwtBearerDefaults.AuthenticationScheme, options =>
        {
            options.Authority = Authority;
            options.RequireHttpsMetadata = Convert.ToBoolean(RequireHttpsMetadata);
            options.Audience = ApiName;
            options.Events = new JwtBearerEvents
            {
                OnMessageReceived = context =>
                {
                    var accessToken = context.Request.Query["access_token"];
                    var path = context.HttpContext.Request.Path;
                    if (!string.IsNullOrEmpty(accessToken) && path.StartsWithSegments("/Hubs/MessageHub"))
                    {
                        context.Token = accessToken;
                    }
                    return Task.CompletedTask;
                }
            };
        });

var app = builder.Build();

app.MapHub<MessageHub>("/Hubs/MessageHub");
app.Run();

 

3.在集线器外部发送消息，比如在controller里调用集线器Hub里面的方法

[ApiController]
[Route("api/[controller]/[action]")]
[Authorize]
public class CableController : Controller
{
       private readonly IHubContext<MessageHub> _messageHub;
       private string _userId = "";
       public CableController(IHubContext<MessageHub> messageHub）
      {
             _messageHub = messageHub;
      }
        [HttpPost]
        public ActionResult generateData(){
            _userId = this.User.FindFirst(ClaimTypes.NameIdentifier).Value;
            generateDataAsync(_userId);
            return Ok(new { code = 200, success = true, msg = "开始运行程序，请稍候..." });
        }
        private async Task<bool> generateDataAsync(string userid)
        {
            bool t = await Task.Run(() =>
            {
                //...运行程序
                   string messageData = "运行成功";             
                _messageHub.Clients.User(userid).SendAsync("ReceiveMessage", messageData); 
                return true;
            });
            return t;
        }
}

前端：1.安装singalR库

执行命令 npm install @microsoft/signalr

 

2.在全局初始数据中初始化连接。网上说在layouts里，可是最新的ant design pro v5里没有layouts, 那就放在app.js的getInitialState里，因为官方文档介绍那边存放的是全局初始数据，不是很笃定是否合理，前端做的不多。

import * as signalR from '@microsoft/signalr';

export async function getInitialState(): Promise<{
  settings?: Partial<LayoutSettings>;
  idetityUser?: Oidc.User;
  currentUser?: API.CurrentUser;
  connection?: any;
  generateBtn?: boolean;
  loading?: boolean;
  fetchIdentityUserInfo?: () => Promise<Oidc.User | undefined>;
  fetchUserInfo?: (options?: { [key: string]: any }) => Promise<API.CurrentUser | undefined>;
  initConnection?: (options?: { [key: string]: any }) => any;
  getGenerateBtn?: () => boolean | undefined;
}> {
  const Mgrs = new Mgr();
  const fetchIdentityUserInfo = async () => {
    const idetityUser = await Mgrs.getUser();
    return idetityUser;
  };
  const fetchUserInfo = async (options?: { [key: string]: any }) => {
    const response = await queryCurrentUser(options);
    const currentUser = response?.data;
    return currentUser;
  };
  const getGenerateBtn = () => {
    const generateBtn = false;
    return generateBtn;
  };
  const initConnection = (option?: { [key: string]: any }) => {
    const protocol = new signalR.JsonHubProtocol();
    const transport = signalR.HttpTransportType.WebSockets;
    const options = {
      skipNegotiation: true,
      transport: transport,
      accessTokenFactory: () => option?.token,
    };
    const connection = new signalR.HubConnectionBuilder()
      .withUrl('/Hubs/MessageHub', options)
      .withHubProtocol(protocol)
      .withAutomaticReconnect()
      .build();

    return connection;
  };
  // 如果不是登录页面，执行
  if (history.location.pathname !== loginPath) {
    const idetityUser = await fetchIdentityUserInfo();
    const currentUser = await fetchUserInfo();

    const generateBtn = getGenerateBtn();
    const connection = initConnection({ token: idetityUser.access_token });
    // 开始连接 调用后台 BeginSendData 方法 成功后双方交互数据
    connection.start().then(() => {
      console.log('开始连接');
    });
    return {
      idetityUser,
      currentUser,
      connection,
      generateBtn,
      fetchUserInfo,
      fetchIdentityUserInfo,
      initConnection,
      getGenerateBtn,
      settings: defaultSettings,
    };
  }
  return {
    fetchIdentityUserInfo,
    fetchUserInfo,
    initConnection,
    settings: defaultSettings,
  };
}

3.在layout中监听服务端发送过来的消息,因为是全局的并且可以setInitialState，改变全局变量。

export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }: any) => {
  // 后台默认触发
  initialState.connection.on('ReceiveMessage', (data: any) => {
    //setBtnState(false);
    setInitialState((s: any) => ({ ...s, generateBtn: false }));
    const currentMSgId = localStorage.getItem('currentMSgId');
    if (data.id && data.id != currentMSgId) {
      if (currentMSgId) {
        notification.close(currentMSgId);
      }

      localStorage.setItem('currentMSgId', data.id);
      notification.success({
        message: data.title,
        description: data.desc,
        placement: 'bottomRight',
        duration: 0,
        key: data.id,
      });
    }
  });

  return {
...
}
}

4.代理配置 通信方式不同于http,websocket的代理配置有些许差异

4.1 本地运行

 

 

4.2 部署在iis运行,需要配置反向代理

iis 反向代理 API以及websocket

 

附上大微软的官方文档：https://learn.microsoft.com/zh-cn/aspnet/core/tutorials/signalr?view=aspnetcore-6.0&tabs=visual-studio