WTM(ASP.NET Core)使用SignalR，后台网页接收实时消息通知

在很多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协议

WTM(ASP.NET Core)使用SignalR，后台网页接收实时消息通知

一、服务端

二、客户端

三、部署

猜你喜欢