肿瘤康复网,内容丰富有趣,生活中的好帮手!
肿瘤康复网 > .net后端使用SignalR定时向前端vue推送消息

.net后端使用SignalR定时向前端vue推送消息

时间:2024-06-12 17:56:49

相关推荐

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 可以参考:/blog//05/websocket.html。

实际应用

1. 服务端

Hub 是 SignalR 的一个组件,它运行在 Core 应用里,所以它是服务器端的一个类。Hub 使用 RPC 接受从客户端发来的消息,也能把消息发送给客户端,所以它就是一个通信用的 Hub。

在 Core 里,自己创建的 Hub 类需要继承于基类Hub,在 Hub 类里面,我们就可以调用所有客户端上的方法了,同样客户端也可以调用 Hub 类里的方法。下面看一下代码:

IChatClient.cs

using System.Threading.Tasks;namespace SignalRServerAndVueClient.Hubs{/// <summary>/// /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 pletedTask;}/// <summary>///结束定时/// </summary>public Task StopAsync(CancellationToken cancellationToken){_scheduler.Shutdown();_logger.LogInformation("关闭定时job");return pletedTask;}/// <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-varscallback: action => {/*this.$message({type: 'info',message: `action: ${ action }`});*/}});});this.connection.start();},

如果觉得《.net后端使用SignalR定时向前端vue推送消息》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。