.net后端使用SignalR定时向前端vue推送消息
详细使用~
SignalR
SignalR 是一个 .NET Core/.NET Framework 的开源实时框架,可以使用 Web Socket、Server Sent Events 和 Long Polling 作为底层传输方式,包含服务端和客户端。
Web Socket 是最高效的传输方式,不过仅支持比较现代的浏览器,如果浏览器或 Web 服务器不支持它的话,就会降级使用 Server Sent Events,实在不行就用 Long Polling。
为什么需要 WebSocket
HTTP 协议:通信只能是客户端发起,做不到服务器主动向客户端推送信息。
Websocket 就是在这样的环境下发明的,想具体了解 WebSocket 可以参考:http://www.ruanyifeng.com/blog/2017/05/websocket.html。
实际应用
1. 服务端
Hub 是 SignalR 的一个组件,它运行在 ASP.NET Core 应用里,所以它是服务器端的一个类。Hub 使用 RPC 接受从客户端发来的消息,也能把消息发送给客户端,所以它就是一个通信用的 Hub。
在 ASP.NET Core 里,自己创建的 Hub 类需要继承于基类Hub,在 Hub 类里面,我们就可以调用所有客户端上的方法了,同样客户端也可以调用 Hub 类里的方法。下面看一下代码:
IChatClient.cs
using System.Threading.Tasks;
namespace SignalRServerAndVueClient.Hubs
{
/// <summary>
/// https://docs.microsoft.com/zh-cn/aspnet/core/signalr/hubs?view=aspnetcore-3.1
/// 强类型中心
/// </summary>
public interface IChatClient
{
Task ReceiveMessage(string user, string message);
Task ReceiveMessage(object message);
Task ReceiveCaller(object message);
}
}
ChatHub.cs
using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;
namespace SignalRServerAndVueClient.Hubs
{
public class ChatHub : Hub<IChatClient>
{
/// <summary>
/// 给所有客户端发送消息
/// </summary>
/// <param name="user">用户</param>
/// <param name="message">消息</param>
/// <returns></returns>
public async Task SendMessage(string user, string message)
{
await Clients.All.ReceiveMessage(user, message);
}
/// <summary>
/// 向调用客户端发送消息
/// </summary>
/// <param name="message"></param>
/// <returns></returns>
public async Task SendMessageCaller(string message)
{
await Clients.Caller.ReceiveCaller( message);
}
/// <summary>
/// 客户端连接服务端
/// </summary>
/// <returns></returns>
public override Task OnConnectedAsync()
{
var id = Context.ConnectionId;
//_logger.Info($"客户端ConnectionId=>【{id}】已连接服务器!");
return base.OnConnectedAsync();
}
/// <summary>
/// 客户端断开连接
/// </summary>
/// <param name="exception"></param>
/// <returns></returns>
public override Task OnDisconnectedAsync(Exception exception)
{
var id = Context.ConnectionId;
//_logger.Info($"客户端ConnectionId=>【{id}】已断开服务器连接!");
return base.OnDisconnectedAsync(exception);
}
}
}
在 Startup.cs 的 Configure 中添加如下代码:
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapHub<ChatHub>("/chathub");
});
注册 SignalR。
再来看一下定时任务。代码实现如下:
HubsQuartzService.cs
using System;
using Quartz;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
namespace SF.BLL.HostedService
{ /// <summary>
///定时任务
/// </summary>
public class HubsQuartzService : IHostedService, IDisposable
{
private readonly ILogger<HubsQuartzService> _logger;
private IScheduler _scheduler;
/// <summary>
/// 定时调用任务接口
/// </summary>
//private ITbBackUpInfoInterface interfaceObj;
/// <summary>
///构造函数
/// </summary>
public HubsQuartzService(ILogger<HubsQuartzService> logger, IScheduler scheduler)
{
_logger = logger;
_scheduler = scheduler;
}
/// <summary>
///启动定时
/// </summary>
public Task StartAsync(CancellationToken cancellationToken)
{
_logger.LogInformation("启动定时job");
IJobDetail jobDetail = JobBuilder.Create<MyJob>().WithIdentity("定时消息推送").Build();
ITrigger trigger = TriggerBuilder.Create()
.WithCronSchedule($"*/10 * * * * ?")
.WithIdentity("定时确认")
.StartNow()
.Build();
_scheduler.ScheduleJob(jobDetail, trigger);
_scheduler.Start();
return Task.CompletedTask;
}
/// <summary>
///结束定时
/// </summary>
public Task StopAsync(CancellationToken cancellationToken)
{
_scheduler.Shutdown();
_logger.LogInformation("关闭定时job");
return Task.CompletedTask;
}
/// <summary>
///排列
/// </summary>
public void Dispose()
{
}
}
}
MyJob.cs
public class MyJob : IJob
{
private readonly IHubContext<ChatHub> _hubContext;
public MyJob(IHubContext<ChatHub> hubContext)
{
_hubContext = hubContext;
}
public Task Execute(IJobExecutionContext context)
{
await _hubContext.Clients.All.SendAsync("ReceiveMessage", "系统通知", $"最新消息{DateTime.Now}");
}
}
在 Startup.cs 的 configureservices 添加如下代码:
services.AddHostedService<HubsQuartzService>();
2. 客户端
首先安装:npm install @microsoft/signalr
然后导入:
import * as signalR from "@aspnet/signalr";
之后在 created 中添加如下代码:
created() {
let thisVue = this;
this.connection = new signalR.HubConnectionBuilder()
.withUrl("http://localhost:52789/chathub", {
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets,
})
.configureLogging(signalR.LogLevel.Information)
.build();
this.connection.on("ReceiveMessage", function (user, message) {
thisVue.messages.push({ user, message });
thisVue.msg = message;
thisVue.$alert(message, '提示', {
confirmButtonText: '确定',
// eslint-disable-next-line no-unused-vars
callback: action => {
/*this.$message({
type: 'info',
message: `action: ${ action }`
});*/
}
});
});
this.connection.start();
},
更多推荐
所有评论(0)