【Net6集成SignalR并实现身份认证】

后端代码

1.ChatHub.cs

[Authorize]
public class ChatHub : Hub
{
    public override async Task OnConnectedAsync()
    {
        await Groups.AddToGroupAsync(Context.ConnectionId, "TestGroup");

        await Clients.Caller.SendAsync("InitNotification", new string []{ "TestNotification"});
    }

    public async Task SendNotificationAsync(string notificationDemo, string group)
    {
        await Clients.Group(group).SendAsync("ReceiveNotification", notificationDemo);
    }
}

2.JwtSignalRExtensions.cs

public static class JwtSignalRExtensions
{
    private const string ACCESS_TOKEN_STRING_KEY = "access_token";

    public static void UseJwtSignalRAuthentication(this IApplicationBuilder app)
    {
        app.Use(async (context, next) =>
        {
            if (string.IsNullOrWhiteSpace(context.Request.Headers["Authorization"]))
            {
                try
                {
                    if (context.Request.QueryString.HasValue)
                    {
                        var token = context.Request.Query[ACCESS_TOKEN_STRING_KEY];
                        if (!string.IsNullOrWhiteSpace(token))
                        {
                            context.Request.Headers.Add("Authorization", new[] { $"Bearer {token}" });
                        }
                    }
                }
                catch
                {
                }
            }
            await next.Invoke();
        });
    }
}

3.Startup.cs

services.AddSignalR();

app.UseJwtSignalRAuthentication();
app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<SnrasHub>("/chatHub", options =>
    {
        options.Transports = HttpTransportType.WebSockets | HttpTransportType.LongPolling;
    });
});

前端代码

1.安装

npm install --save @microsoft/signalr

2.代码

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

const snrasHub = new signalR.HubConnectionBuilder()
  .withUrl(this.CommonURL.baseURL + "/chatHub", {
    accessTokenFactory: () => this.$keycloak.token
  })
  .build();
snrasHub.on('initNotification', (data) => {
  console.log("initNotification", data)
});
snrasHub.on('receiveNotification', (data) => {
  console.log("receiveNotification", data)
});
snrasHub.onreconnected = () => {
  snrasHub.invoke("sendNotification", "World")
};
snrasHub.start();