十三、Net Core6 SignalR入门（一）

最新推荐文章于 2024-01-23 17:33:07 发布

Yonfly

最新推荐文章于 2024-01-23 17:33:07 发布

阅读量2k

点赞数

分类专栏： .NET CORE API 文章标签： microsoft Signalr

本文链接：https://blog.csdn.net/m0_37894611/article/details/125929054

版权

.NET CORE API 专栏收录该内容

17 篇文章 19 订阅

订阅专栏

使用 ASP.NET Core SignalR 中的中心 | Microsoft Docs了解如何使用 ASP.NET Core SignalR 中的中心。https://docs.microsoft.com/zh-cn/aspnet/core/signalr/hubs?view=aspnetcore-6.0 ASP.NET Core SignalR JavaScript 客户端 | Microsoft DocsASP.NET Core SignalR JavaScript 客户端概述。https://docs.microsoft.com/zh-cn/aspnet/core/signalr/javascript-client?view=aspnetcore-6.0&viewFallbackFrom=aspnetcore-2.2&tabs=visual-studio一、创建Web API项目

二、新建ChatHub.cs类，并写好向所有客户端发送消息的方法

调用依赖于保持活动状态的中心的异步方法时请使用 await。例如，如果在没有 await 的情况下进行调用，则 Clients.All.SendAsync(...) 这类方法会失败，并且中心方法会在 SendAsync 完成之前完成、代码如下

 public class ChatHub : Hub
    {
        /// <summary>
        /// 向所有客户端发送消息
        /// </summary>
        /// <param name="user"></param>
        /// <param name="message"></param>
        /// <returns></returns>
        public async Task SendMessage(string user, string message) => await Clients.All.SendAsync("ReceiveMessage", user, message);
        
    }

注：这里的 ReceiveMessage 字符串参数是提供给前端监听的方法名称，可自定义

三、注册中心所需的SignalR服务和终结点，打开Program.cs，添加两处 ※※※ SignalR ※※※ 代码

和处理跨域，记住跨域不能默认*，需要指定客户端地址，否则跨域问题还是存在

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();


// ※※※ SignalR ※※※ 
builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(
        builder =>
        {
            builder.WithOrigins("http://192.168.5.73:8848")
                .AllowAnyHeader()
                .WithMethods("GET", "POST")
                .AllowCredentials();
        });
});
builder.Services.AddSignalR();
// ※※※ SignalR ※※※ 


var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseAuthorization();

app.MapControllers();

//※※※ SignalR ※※※ 
app.UseCors();
app.MapHub<ChatHub>("/Chat");
// ※※※ SignalR ※※※ 

app.Run();

四、修改launchSettings.json配置文件

接下来了解客户端怎样调用接收SignalR中心方法

一、引入signalr.js

npm init -y
npm install @microsoft/signalr

npm 将包内容安装在 node_modules\@microsoft\signalr\dist\browser 文件夹中。将 signalr.js 文件引用到你的项目。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>

		</style>
	</head>
	<body>
		<div id="content">

		</div>
		<br />
		<input type="text" id="name" /><br />
		<textarea id="msg"></textarea>
		<button onclick="send()">发送</button>
		<script src="signalr.min.js"></script>
		<script>
			getName();//获取随机名字
			
			//连接SignalR中心
			//withUrl 这里要和后端 launchSettings.json---profiles---SignalR---applicationUrl对应，否则无法握手,
			//最后跟上Program.cs配置的名字, app.MapHub<ChatHub>("/Chat");
			const connection = new signalR.HubConnectionBuilder()
				.withUrl("http://192.168.5.73:5196/Chat")
				.build();
			 
			//连接方法，如果连接失败，5s后重新连接
			async function start() {
				try {
					await connection.start();
					console.log("连接成功.");
				} catch (err) {
					console.log(err);
					setTimeout(start, 5000);
				}
			};
			
			//如果连接断开，尝试重新连接
			connection.onclose(async () => {
				await start();
			});

			// 开始连接.
			start();

			const all = (user, message) => {
				try {
					//调用中心的SendMessage方法
					connection.send("SendMessage", user, message);
				} catch (err) {
					console.error(err);
				}
			}

			const send = () => {
				var user = document.getElementById("name").value;
				var msg = document.getElementById("msg").value;
				all(user, msg);
			}
			
			//ReceiveMessage 与后端对应 ，接收中心发来的消息
			connection.on("ReceiveMessage", (user, message) => {
				var son = document.createElement("p");
				son.innerHTML = `${user}: ${message}`;
				document.getElementById("content").appendChild(son);
			});


			function getName() {
				var familyNames = new Array(
					"赵", "钱", "孙", "李", "周", "吴", "郑", "王", "冯", "陈",
					"褚", "卫", "蒋", "沈", "韩", "杨", "朱", "秦", "尤", "许",
					"何", "吕", "施", "张", "孔", "曹", "严", "华", "金", "魏",
					"陶", "姜", "戚", "谢", "邹", "喻", "柏", "水", "窦", "章",
					"云", "苏", "潘", "葛", "奚", "范", "彭", "郎", "鲁", "韦",
					"昌", "马", "苗", "凤", "花", "方", "俞", "任", "袁", "柳",
					"酆", "鲍", "史", "唐", "费", "廉", "岑", "薛", "雷", "贺",
					"倪", "汤", "滕", "殷", "罗", "毕", "郝", "邬", "安", "常",
					"乐", "于", "时", "傅", "皮", "卞", "齐", "康", "伍", "余",
					"元", "卜", "顾", "孟", "平", "黄", "和", "穆", "萧", "尹"
				);
				var givenNames = new Array(
					"子璇", "淼", "国栋", "夫子", "瑞堂", "甜", "敏", "尚", "国贤", "贺祥", "晨涛",
					"昊轩", "易轩", "益辰", "益帆", "益冉", "瑾春", "瑾昆", "春齐", "杨", "文昊",
					"东东", "雄霖", "浩晨", "熙涵", "溶溶", "冰枫", "欣欣", "宜豪", "欣慧", "建政",
					"美欣", "淑慧", "文轩", "文杰", "欣源", "忠林", "榕润", "欣汝", "慧嘉", "新建",
					"建林", "亦菲", "林", "冰洁", "佳欣", "涵涵", "禹辰", "淳美", "泽惠", "伟洋",
					"涵越", "润丽", "翔", "淑华", "晶莹", "凌晶", "苒溪", "雨涵", "嘉怡", "佳毅",
					"子辰", "佳琪", "紫轩", "瑞辰", "昕蕊", "萌", "明远", "欣宜", "泽远", "欣怡",
					"佳怡", "佳惠", "晨茜", "晨璐", "运昊", "汝鑫", "淑君", "晶滢", "润莎", "榕汕",
					"佳钰", "佳玉", "晓庆", "一鸣", "语晨", "添池", "添昊", "雨泽", "雅晗", "雅涵",
					"清妍", "诗悦", "嘉乐", "晨涵", "天赫", "?傲", "佳昊", "天昊", "萌萌", "若萌"
				);

				var i = parseInt(10 * Math.random()) * 10 + parseInt(10 * Math.random());
				var familyName = familyNames[i];

				var j = parseInt(10 * Math.random()) * 10 + parseInt(10 * Math.random());
				var givenName = givenNames[i];

				var name = familyName + givenName;
				document.getElementById("name").value = name;
			}
		</script>
	</body>
</html>

二、运行服务和客户端，开启两个客户端页面，测试成功