.net core SignalR的基础使用和身份认证

太阳88

于 2024-08-07 10:13:05 发布

阅读量757

点赞数 15

文章标签： .netcore ui xhtml

本文链接：https://blog.csdn.net/qq_56744102/article/details/140976488

版权

SinglR理解：它就相当于路由器的作用；收集客户端的请求，将相应请求对应消息发，根据不同需求发回客户端

基本使用

安装包：Microsoft.AspNetCore.SignalR.StackExchangeRedis
在程序中注入服务：builder.Services.AddSignalR();添加hub类：app.MapHub<ChatRoomHub>("/ChatRoomHub");
创建一个继承hub的类，代码如下

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.SignalR;
using System.Security.Claims;
using static signalRTest.UserManeger;

namespace signalRTest
{
// [Authorize]用于身份验证
    [Authorize]
    public class ChatRoomHub:Hub
    {
        public Task SendPublicMessage(string message)
        {
            string connId = this.Context.ConnectionId;
            string msg = $"{connId} {DateTime.Now}:{message}";
            return Clients.All.SendAsync("ReceivePublicMessage", msg);
        }
        public async Task<string> SendPrivateMessage(string name, string message)
        { 
           User? user=UserManeger.FindByName(name);
           if (user == null) { return "DestUserNotDefind"; }
           string destUserId=user.id.ToString();
            string srcSendUser = this.Context.User!.FindFirst(ClaimTypes.Name)!.Value;
            string time = DateTime.Now.ToString();
            await this.Clients.User(destUserId).SendAsync("ReceivePriveteMessage", srcSendUser, time, message);
            return "ok";
        }
    }
}

（后端工作完成）

前端

<template>
    <input type="text"  v-model="state.userMessage" v-on:keypress="txtMsgOnkeypress"/>
    <div><ul>
        <li v-for="(msg,index) in state.messages" :key="index">{{msg}}</li>
    </ul></div>
</template>
<script>
    import { reactive, onMounted } from 'vue';
    import * as signalR from '@microsoft/signalr';
    let connection;
    export default {name: 'Login',
        setup() {
            const state = reactive({ userMessage: "", messages: [] });
            const txtMsgOnkeypress = async function (e) {
                if (e.keyCode != 13) return;
                //hub类中发消息的方法
                await connection.invoke("SendPublicMessage", state.userMessage);
                state.userMessage = "";
            };
            onMounted(async function () {
                connection = new signalR.HubConnectionBuilder()
                    .withUrl('https://localhost:44337/Hubs/ChatRoomHub')//自己的hub类的路径
                    .withAutomaticReconnect().build();
                await connection.start();
                //发送消息的key
                connection.on('ReceivePublicMessage', msg => {
                    state.messages.push(msg);
                });
            });
            return { state, txtMsgOnkeypress };
        },
    }
</script>

前后端交互属于跨域，所以要启用中间件UseCors();

program.cs配置如下

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.IdentityModel.Tokens;
using signalRTest;
using System.Text;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
//注入jwt；
builder.Services.Configure<JWTOption>(builder.Configuration.GetSection("JWT"));
//将jwt引入到swagger
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddJwtBearer(x =>
{
    var jwtOpt = builder.Configuration.GetSection("JWT").Get<JWTOption>();
    byte[] keyBytes = Encoding.UTF8.GetBytes(jwtOpt.SigningKey);
    var secKey = new SymmetricSecurityKey(keyBytes);
    x.TokenValidationParameters = new()
    {
        ValidateIssuer = false,
        ValidateAudience = false,
        ValidateLifetime = true,
        ValidateIssuerSigningKey = true,
        IssuerSigningKey = secKey
    };
    //从请求头中拿到Token，用于身份验证
    x.Events = new JwtBearerEvents
    {
        OnMessageReceived = context =>
        {
            var accessToken = context.Request.Query["access_token"];
            var path = context.HttpContext.Request.Path;
            if (!string.IsNullOrEmpty(accessToken) &&
                (path.StartsWithSegments("/ChatRoomHub")))
            {
                context.Token = accessToken;
            }
            return Task.CompletedTask;
        }
    };
});
//注入SignalR服务
builder.Services.AddSignalR();
//配置跨域交互
string[] urls = new[] { "http://localhost:3000" };
builder.Services.AddCors(options =>
    options.AddDefaultPolicy(builder => builder.WithOrigins(urls)
        .AllowAnyMethod().AllowAnyHeader().AllowCredentials())
);

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseCors();
app.UseHttpsRedirection();
app.UseAuthentication();
app.UseAuthorization();
//添加我们的hub类
app.MapHub<ChatRoomHub>("/ChatRoomHub");
app.MapControllers();

app.Run();

（基本使用结束）

SignalR的身份认证（我做的时候不方便连数据库，所以自己写usermanerg类代替）

安装Microsoft.AspNetCore.Authentication.JwtBearer(jwt)、Microsoft.AspNetCore.Identity.EntityFrameworkCore
在hub类加上[Authorize]

在appsettings.json配置jwt密钥、超时，添加jwoption类

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "JWT": {
    "SigningKey": "fasdfad&9045dafz222#fadpio@02328hdahihiasuighcaui",
    "ExpireSeconds": "86400"
  }   
}

namespace signalRTest
{
    public class JWTOption
    {
        public string SigningKey {  get; set; }
        public int ExpireSeconds {  get; set; }
    }
}

我的usermanager类

using System.Runtime.CompilerServices;

namespace signalRTest
{
    public class UserManeger
    {
        public static User? FindByName(string name)
        {
            return GetAll().SingleOrDefault(u => u.name == name);
        }
        public static User? FindById(int id) 
        {
            return GetAll().SingleOrDefault(u => u.id == id);
        }
        public static List<User> GetAll()
        {
            List<User> users = new List<User>();
            users.Add(new User(1, "yzk", "123456"));
            users.Add(new User(2, "siruis", "123456"));
            users.Add(new User(3, "jack", "123456"));
            users.Add(new User(4, "lili", "123456"));
            return users;
        }
        public record class User(int id, string name, string password) { }

    }
}

前端代码：

<template>
	<fieldset>
		<legend>登录</legend>
		<div>
			<div>
				用户名：<input type="text" v-model="state.loginData.UserName" />
			</div>
			<div>
				密 码：<input type="password" v-model="state.loginData.PassWord" />
			</div>
			<div>
				<input type="button" value="登录" v-on:click="loginClick" />
			</div>
		</div>
	</fieldset>
	公屏：<input type="text" v-model="state.userMessage" v-on:keypress="txtMsgOnkeypress" />
	<div>
		私聊给：<input type="text" v-model="state.privateMsg.destUserName" />
		信息：<input type="text" v-model="state.privateMsg.message" v-on:keypress="txtPrivareMsgOnkeypress" />
	</div>
	<div>
		<ul>
			<li v-for="(msg,index) in state.messages" :key="index">{{msg}}</li>
		</ul>
	</div>
</template>
<script>
	import {
		reactive,
		onMounted
	} from 'vue';
	import * as signalR from '@microsoft/signalr';
	import axios from 'axios';
	let connection;
	export default {
		name: 'SignalR',
		setup() {
			const state = reactive({
				userMessage: "",
				messages: [],
				accessTocken:"",
				loginData:{UserName:"",PassWord:""},
				privateMsg:{destUserName:"",message:""}
			});
			 const startConn = async function () {
			                const transport = signalR.HttpTransportType.WebSockets;
			                const options = { skipNegotiation: true, transport: transport };
			                options.accessTokenFactory = () => state.accessTocken;
			                connection = new signalR.HubConnectionBuilder()
			                    .withUrl('https://localhost:7229/ChatRoomHub', options)
			                    .withAutomaticReconnect().build();
			                try {
			                    await connection.start();
			                } catch (err) {
			                    alert(err);
			                    return;
			                }
			                connection.on('ReceivePublicMessage', msg => {
			                    state.messages.push(msg);
			                });
			                connection.on('ReceivePriveteMessage', (srcUser,time,msg) => {
			                    state.messages.push(srcUser+"在"+time+"发来私信:"+msg);
			                });
			                connection.on('UserAdded', userName => {
			                    state.messages.push("系统消息：欢迎" + userName+"加入我们!");
			                });
			                alert("登陆成功可以聊天了");
			            };
			const loginClick = async function(){
				const req=await axios.post('https://localhost:7229/api/UserLong/Longin',state.loginData);
				state.accessTocken=req.data;
				startConn();
			};
			const txtMsgOnkeypress = async function(e) {
				if (e.keyCode != 13) return;
				await connection.invoke("SendPublicMessage", state.userMessage);
				state.userMessage = "";
			};
			const txtPrivareMsgOnkeypress =async function (e) {
				if(e.keyCode!=13)return;
				var destUserName=state.privateMsg.destUserName;
				var msg=state.privateMsg.message;
				try{
					const ret=await connection.invoke("SendPrivateMessage",destUserName,msg);
					
					if(ret!="ok"){alert(ret)};
				}catch(err){
					alert(err);
					return;
				}
				state.privateMsg.message=""
			}
			return {
				state,
				txtMsgOnkeypress,
				loginClick,
				txtPrivareMsgOnkeypress
			};
		},
	}
</script>