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

Posted 2023-01-17 Python小二

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();

,