近期项目需要用到signalr,弄了个入门的简单前后端分离demo
文章介绍一下怎么用signalr实现一个简单的聊天室及后台推送
文章底部有资源地址及gitee地址,感兴趣的可以下载查看,文章能帮助到大家的话请给个赞
添加后台接口
新建一个.net 5 的asp .net core webapi项目
1.右键管理nuget程序包 安装Microsoft.AspNetCore.Signalr
2.在新建项目下添加hubs文件夹>文件夹新建 ChatHub.cs文件
using Microsoft.AspNetCore.SignalR;
using System;
using System.Threading.Tasks;
namespace SignalrWebApi.Hubs
{
public class ChatHub : Hub
{
/// <summary>
/// 接收前端消息,并发送给连接的全部用户
/// </summary>
/// <param name="user"></param>
/// <param name="message"></param>
/// <returns></returns>
public async Task HandMessage(string user, string message)
{
//TO DO 可以加缓存,存储用户信息和对应的连接Id
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
/// <summary>
/// 连接成功
/// </summary>
/// <returns></returns>
public override async Task OnConnectedAsync()
{
await Clients.All.SendAsync("ConnectMessage", Context.ConnectionId);
}
/// <summary>
/// 退出连接
/// </summary>
/// <returns></returns>
public override async Task OnDisconnectedAsync(Exception? exception)
{
//TO DO 可以从缓存,返回对应掉线用户,同时清除改用户缓存
await Clients.All.SendAsync("ConnectMessage", Context.ConnectionId, exception?.Message);
}
}
}
3.Startup.cs 配置
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using Microsoft.OpenApi.Models;
using SignalrDemoApi.Hubs;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace SignalrDemoApi
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers();
services.AddSignalR(); //添加SignalR
//创建项目时勾选openapi支持会自动创建Swagger相关内容
services.AddSwaggerGen(c =>
{
c.SwaggerDoc("v1", new OpenApiInfo { Title = "SignalrDemoApi", Version = "v1" });
});
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseSwagger();
app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "SignalrDemoApi v1"));
}
app.UseRouting();
app.UseCors(option => option.WithOrigins("http://localhost:53649").AllowCredentials().AllowAnyMethod().AllowAnyHeader()); //配置跨域 http://localhost:53649是前端页面地址,注意launchSettings.json中指定
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapHub<ChatHub>("/chatHub"); //配置前端接口
});
}
}
}
后台项目就配置好了
添加页面
1.页面signalr.js下载
创建ASP.NET Core Web 应用程序
在“解决方案资源管理器”中,右键单击项目,然后选择“添加”>“客户端库” 。
“提供程序”,选择“unpkg”>“库”,输入 @microsoft/signalr@latest
选择“选择特定文件”,展开“dist/browser”文件夹,然后选择“signalr.js”和“signalr.min.js”。
将“目标位置”设置为 wwwroot/js/signalr/,然后选择“安装”。
2.页面及js
给项目Index.cshtml页面内容替换成
@page
<div class="container">
<div class="row"> </div>
<div class="row">
<div class="col-2">User</div>
<div class="col-4"><input type="text" id="userInput" /></div>
</div>
<div class="row">
<div class="col-2">Message</div>
<div class="col-4"><input type="text" id="messageInput" /></div>
</div>
<div class="row"> </div>
<div class="row">
<div class="col-6">
<input type="button" id="sendButton" value="Send Message" />
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-6">
<ul id="messagesList"></ul>
</div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>
在 wwwroot/js 文件夹中,创建 chat.js 文件
"use strict";
//http://localhost:15931/chatHub是接口地址,自己注意配置
var connection = new signalR.HubConnectionBuilder().withUrl("http://localhost:15931/chatHub").build();
//Disable send button until connection is established
document.getElementById("sendButton").disabled = true;
connection.on("ReceiveMessage", function (user, message) {
var li = document.createElement("li");
document.getElementById("messagesList").appendChild(li);
// We can assign user-supplied strings to an element's textContent because it
// is not interpreted as markup. If you're assigning in any other way, you
// should be aware of possible script injection concerns.
li.textContent = `${user} 发送消息 ${message}`;
});
connection.on("ConnectMessage", function (Id, message) {
var li = document.createElement("li");
document.getElementById("messagesList").appendChild(li);
// We can assign user-supplied strings to an element's textContent because it
// is not interpreted as markup. If you're assigning in any other way, you
// should be aware of possible script injection concerns.
li.textContent = `连接标识 ${Id} ${message}`;
});
connection.start().then(function () {
document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("HandMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});
给两个项目都启动,就是一个简单的signalr前后端分离Demo了,具体详细大家可以参考微软官方文档或者下载代码自己调试修改
结语
官方文档地址 :https://docs.microsoft.com/zh-cn/aspnet/core/signalr/introduction?view=aspnetcore-5.0
gitee地址 https://gitee.com/gl125/signalr-demo
csdn资源下载 https://download.csdn.net/download/qq_36535245/20360402
.NET QQ技术交流群 681169497