C#(一沙框架) .net core3.1 SignalR 服务端推送消息至客户端的实现方法，用弹窗插件进行显示，非常美观实用

运行效果：

1、安装Microsoft.AspNetCore.SignalR(安装方法自行百度)

2、引入chat.js、signalr.js(请自行百度下载)

3、新建ChatHub.cs

ChatHub.cs代码：

using Microsoft.AspNetCore.SignalR;

using System.Threading.Tasks;

namespace YiSha.Admin.Web

{

public class ChatHub : Hub

{

public async Task SendMessage(string msg)

{

await Clients.All.SendAsync("ReceiveMessage", msg);

}

}

}

4、服务端后台处理程序，新建MyBackgroundService.cs

MyBackgroundService.cs代码：

usingMicrosoft.Extensions.Hosting;usingSystem;usingSystem.Threading;usingSystem.Threading.Tasks;namespaceYiSha.Admin.Web

{public classPopupMessage : BackgroundService

{protected override asyncTask ExecuteAsync(CancellationToken stoppingToken)

{while (!stoppingToken.IsCancellationRequested)

{try{//需要执行的任务

var pm = new Controllers.HomeController(Controllers.HomeController.HC);//HC为Controller中定义的ChatHub的静态上下文变量//弹窗消息处理

await pm.PopupMessage(DateTime.Now.ToString() + "hahaha");

}catch(Exception ex)

{//LogHelper.Error(ex.Message);

}await Task.Delay(5000, stoppingToken);//等待5秒

}

}

}

}

5、前端页面(整个项目的首页index)

在index.cshtml中引入

在index.cshtml的中添加如下代码：(其中【对接收到的消息进行处理、显示】是弹窗消息插件调用方法，弹窗消息插件的其他细节在本文的最后给与详细介绍)

var connection = new signalR.HubConnectionBuilder().withUrl("/chathub").build();

connection.on("ReceiveMessage", function(data) {var encodedMsg = data.msg;//获取接收到的消息内容

//对接收到的消息进行处理、显示

iziToast.success({

title:'OK',

message: encodedMsg,

position:'bottomRight',

transitionIn:'bounceInUp',//transitionIn: 'flipInX',fadeInDown

transitionOut: 'flipOutX',//iconText: 'star',

onOpen: function(){

console.log('callback abriu! success');

},

onClose:function(){

console.log("callback fechou! success");

},

buttons: [

['Photo', function(instance, toast) {

}],

]

});

iziToast.warning({

title:'Caution',

message:'You forgot important data',

position:'bottomRight',

transitionIn:'bounceInUp',

transitionOut:'flipOutX'});

iziToast.error({

title:'Error',

message:'Illegal operation',

position:'bottomRight',

transitionIn:'bounceInUp'});

});

connection.start().then(function() {//document.getElementById("sendButton").disabled = false;

}).catch(function(err) {returnconsole.error(err.toString());

});

asyncfunctionstart() {try{

await connection.start({ transport: ['webSockets'] });

console.log("connected");

}catch(err) {

console.log(err);

setTimeout(()=> start(), 5000);

}

};

connection.onclose(async ()=>{

start();

});

6、index对应的controller

在index对应的controller中添加如下代码：

#region SignalR

public static IHubContextHC;private IHubContext_hubContext;public HomeController(IHubContexthubContext)

{this._hubContext =hubContext;

HC=hubContext;

}public async Task PopupMessage(stringmessage)

{if (_hubContext == null) return Json(new { code = "0", msg = ""});await _hubContext.Clients.All.SendAsync("ReceiveMessage", new { msg =message });return Json(new { code = "success", msg = "发送成功"});

}#endregion

7、修改startup.cs

在startup.cs的ConfigureServices中添加如下代码：

services.AddSignalR();

services.AddSingleton();

在startup.cs的Configure中添加如下代码：

app.UseEndpoints(endpoints =>{

endpoints.MapHub("/chathub");

});

至此，SignalR的整个处理过程就完成了

下面介绍一下前端消息弹窗插件的实现方法，非常美观实用(下载地址：https://www.jq22.com/jquery-info11777)

1、插件下载及导入项目

2、在index的模板中引入插件CSS

3、在index中引入插件js(参见上面第5步)

4、在index中调用弹窗显示方法(参见上面第5步)

//对接收到的消息进行处理、显示

iziToast.success({

title:'OK',

message: encodedMsg,

position:'bottomRight',

transitionIn:'bounceInUp',//transitionIn: 'flipInX',fadeInDown

transitionOut: 'flipOutX',//iconText: 'star',

onOpen: function(){

console.log('callback abriu! success');

},

onClose:function(){

console.log("callback fechou! success");

},

buttons: [

['Photo', function(instance, toast) {

}],

]

});

iziToast.warning({

title:'Caution',

message:'You forgot important data',

position:'bottomRight',

transitionIn:'bounceInUp',

transitionOut:'flipOutX'});

iziToast.error({

title:'Error',

message:'Illegal operation',

position:'bottomRight',

transitionIn:'bounceInUp'});

此代码已测试成功，如果有问题请反馈，如果觉得对你有帮助请点击【推荐】谢谢！