AspNetCore3.0 WebApi+SignalR 实现通信

最新推荐文章于 2024-09-12 08:25:35 发布

LuTan_888

最新推荐文章于 2024-09-12 08:25:35 发布

阅读量3.3k

点赞数 2

分类专栏：代码文章标签： ASP.NET Core 3.0 SignalR

本文链接：https://blog.csdn.net/lutan20/article/details/102945161

版权

代码专栏收录该内容

31 篇文章 0 订阅

订阅专栏

第一步：创建webapi项目
第二部：浏览NuGet 搜索Microsoft.AspNetCore.SignalR安装
在这里插入图片描述
第三步：新建Hub类

public class ChatHub : Hub
    {
        /// <summary>
        /// SendMsg用于前端调用
        /// </summary>
        /// <param name="json">此处我传入的json字符串,可根据自己需求修改</param>
        /// <returns></returns>
        public Task SendMsg(string json)
        {
            JObject jObj = JObject.Parse(json);
            //通过属性名或者索引来访问，仅仅是自己的属性名，而不是所有的
            JToken UserNameToken = jObj["UserName"];
            JToken MessageToken = jObj["Message"];
            //在客户端实现此处的Show方法
            return Clients.All.SendAsync("Show", UserNameToken.ToString()+":"+MessageToken.ToString());
        }
    }

第四部：配置Startup
1.配置ConfigureServices（注意：3.0中跨域不允许“*”，所以必须配置你的web地址）

//跨域
            services.AddCors(options =>
            {
                options.AddPolicy("SignalRCors",
                    policy => policy
                                    .AllowAnyHeader()
                                    .AllowAnyMethod()
                                    .WithOrigins("http://localhost:52000")
                                    .AllowCredentials()); ;
            });
            services.AddSignalR();

2.配置Configure

app.UseCors("SignalRCors");

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();

                endpoints.MapHub<ChatHub>("/chathub");
            });

第五步：html
注意：html必须部署起来部署后的地址填入WithOrigins中

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<input type="text" id="userid" placeholder="Enter user name" />
		<br>
		<input type="text" id="message" placeholder="Enter sned message" />
		<input type="button" id="btnSend" value="Send" />
		<ul id="msglist"></ul>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/signalr.min.js"></script>
		<script>
			$(function() {
				var hubConnection = new signalR.HubConnectionBuilder().withUrl("http://localhost:52000/chatHub").build();
				$("#btnSend").click(function() {
					//新建对象
					var obj = {};
					obj["UserName"] = $('#userid').val();
					obj["Message"] = $('#message').val();
					//调用服务器方法
					hubConnection.invoke('SendMsg', JSON.stringify(obj));
				});

				//服务器回调方法
				hubConnection.on('Show', data => {
					$('#msglist').append($('<li>').text(data));
				});

				hubConnection.start();
			});
		</script>
	</body>
</html>

第六步：signalr.js的由来
1.在“解决方案资源管理器” 中，右键单击项目，然后选择“添加” >“客户端库” 。
2.在“添加客户端库” 对话框中，对于“提供程序” ，选择“unpkg” 。
3.对于“库” ，输入 @microsoft/signalr@latest。
4.选择“选择特定文件” ，展开“dist/browser” 文件夹，然后选择“signalr.js” 和“signalr.min.js”
在这里插入图片描述