十三、Net Core6 SignalR入门（一）-Toy模板网

这篇具有很好参考价值的文章主要介绍了十三、Net Core6 SignalR入门（一）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用 ASP.NET Core SignalR 中的中心 | Microsoft Docs了解如何使用 ASP.NET Core SignalR 中的中心。https://docs.microsoft.com/zh-cn/aspnet/core/signalr/hubs?view=aspnetcore-6.0ASP.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项目

十三、Net Core6 SignalR入门（一）

二、新建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配置文件十三、Net Core6 SignalR入门（一）

接下来了解客户端怎样调用接收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>

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

十三、Net Core6 SignalR入门（一）