在很多web项目中都存在这样的需求,用户执行某个操作或者数据库CURD,同时后台页面接收消息并弹窗提示当前操作系统的管理员。
我们这里采用微软的SignalR实时 web 功能使服务器端代码可以立即将内容推送到客户端。基础知识和安装请参照微软官方文档。我们今天的重点是WTM框架加入SignalR
一、服务端
在WTM项目中的Program.cs配置SignalR。
1、webBuilder.ConfigureServices方法中添加
x.AddSignalR();
2、webBuilder.Configure方法中添加
x.UseEndpoints(endpoints =>
{
endpoints.MapHub<ChatHub>("/chathub");
});
3、创建 SignalR 中心
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
namespace SignalRChat.Hubs
{
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
}
4、修改_Layout.cshtml布局文件,文件位于Views/Shared目录下
将按照微软官方文档获取的signalr.js引入到文件中,然后编写SignalR连接和消息接收处理代码
<body>
<div id="LAY_app"></div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="/jquery.min.js"></script>
<script src="/jquery.cookie.js"></script>
<script src="/layui/layui.js"></script>
<script src="/_js/[email protected]"></script>
<script>
var DONOTUSE_IGNOREHASH = false;
var DONOTUSE_COOKIEPRE = '@ViewData["DONOTUSE_COOKIEPRE"]';
var DONOTUSE_WINDOWGUID = '@Guid.NewGuid().ToString().Replace("-", "")';
layui.config({
base: '/layuiadmin/'
, version: '@DateTime.Now.Ticks'
});
//创建连接
const connection = new signalR.HubConnectionBuilder()
.withUrl("/chathub")
.configureLogging(signalR.LogLevel.Information)
.build();
async function start() {
try {
await connection.start();
console.log("SignalR Connected.");
} catch (err) {
console.log(err);
setTimeout(start, 5000);
}
};
connection.onclose(start);
start();
//接收数据并弹窗
connection.on("ReceiveMessage", function (user, message) {
layui.use('layer', function(){
var layer = layui.layer;
layer.msg(user+'||'+message, { time: 5000, icon: 6 });
});
console.log(message);
});
</script>
@RenderBody()
</body>
二、客户端
1、安装 SignalR .net 客户端包Microsoft.AspNetCore.SignalR.Client
2、在需要发送数据的后台方法中添加如下代码,就可以完成想后台服务器的数据发送
try
{
HubConnection connection = new HubConnectionBuilder()
.WithUrl(signalrUrl)
.Build();
await connection.StartAsync();
await connection.InvokeAsync("SendMessage",
$"{user.UserType.UserTypeName}客户端", $"{DateTime.Now}数据发送");
}
catch (Exception)
{
}
这样就完成了客户端的一些操作实时向服务器推送消息。SignalR除了支持.NET外,还支持java和js。编写实时应用非常的方便。只需要很少的代码就能时间服务器和客户端的实时通信,让程序员更专注的写代码。
三、部署
部署到iis必须在Windows功能勾选websocket协议