1.前端使用npm 导入signalR的包和jquery包
npm install jquery -y
npm install @micosoft/signalr -y
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时通讯</title>
<h1>signalr入门</h1>
</head>
<body>
<input type="button" value="发送" id="btnSend">
</body>
</html>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/@microsoft/signalr/dist/browser/signalr.min.js"></script>
<script>
//创建连接对象
var connection=new signalR.HubConnectionBuilder()
.withUrl("https://localhost:7177/myHub")
.build();
//当连接成功时
connection.start().then(function(){
console.log("客户端连接成功");
})
//接收服务端主动推送过来的消息
connection.on("ReceiveMsg",function(msg){
alert(msg)
})
connection.on("completeOrder",function(msg){
alert(msg)
})
$("#btnSend").click(function(){
//客户端主动调用服务定义的通讯方法
connection.invoke("SendMsg",1,"测试").catch(function(err){
console.log(err)
})
})
</script>
后端--program中注入signalR的服务和跨域服务
csharp
builder.Services.AddSignalR();
//配置跨域
builder.Services.AddCors(opt =>
{
opt.AddPolicy("ws.client", p =>
{
p.AllowCredentials();
p.AllowAnyHeader();
p.AllowAnyMethod();
p.SetIsOriginAllowed(s => true);
});
});
......
app.MapHub<MyHub>("/myHub");
app.UseCors("ws.client");
新建一个hub类
csharp
using Microsoft.AspNetCore.SignalR;
using Microsoft.Extensions.Caching.Memory;
namespace WebApplication1.Hubs
{
public class MyHub : Hub
{
private readonly IMemoryCache _memoryCache;
public MyHub(IMemoryCache memoryCache)
{
_memoryCache = memoryCache;
}
//当客户端成功连接时,会触发的方法
public override Task OnConnectedAsync()
{
var cacheKey = "items_1";
var cacheEntryOptions = new MemoryCacheEntryOptions()
.SetSlidingExpiration(TimeSpan.FromMinutes(30));
_memoryCache.Set(cacheKey, Context.ConnectionId, cacheEntryOptions);
return Task.CompletedTask;
}
//当客户端断开连接时,需要触发的方法
public override Task OnDisconnectedAsync(Exception? exception)
{
_memoryCache.Remove("items_1");
return Task.CompletedTask;
}
public async void SendMsg(long userId, string msg)
{
string sendMsg = $"服务端收到了客户端的消息,参数user={userId},msg={msg}";
//服务端主动推送消息给所有的客户端
//await Clients.All.SendAsync("ReceiveMsg", sendMsg);
//给除了自己以外的所有客户端发送消息
await Clients.Others.SendAsync("ReceiveMsg", sendMsg);
}
}
}
控制器类
csharp
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;
using Microsoft.Extensions.Caching.Memory;
using WebApplication1.Hubs;
namespace WebApplication1.Controllers
{
[ApiController]
[Route("[controller]/[action]")]
public class WeatherForecastController : ControllerBase
{
private readonly IMemoryCache _memoryCache;
private readonly IHubContext<MyHub> _hubContext;
private static readonly string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
private readonly ILogger<WeatherForecastController> _logger;
public WeatherForecastController(ILogger<WeatherForecastController> logger, IMemoryCache memoryCache, IHubContext<MyHub> hubContext)
{
_logger = logger;
_memoryCache = memoryCache;
_hubContext = hubContext;
}
[HttpGet(Name = "GetWeatherForecast")]
public IEnumerable<WeatherForecast> Get()
{
return Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = DateTime.Now.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = Summaries[Random.Shared.Next(Summaries.Length)]
})
.ToArray();
}
[HttpPost]
public void AddOrder()
{
var connectionId = _memoryCache.Get("items_1").ToString();
//服务端向指定客户端发送信息。
_hubContext.Clients.Client(connectionId).SendAsync("completeOrder", "订单完成");
}
}
}