.Net Core MVC 使用SignalR+Layui框架Table实现多人在线填报

1.添加SignalR包

dotnet add package Microsoft.AspNetCore.SignalR

2.在Program.cs中配置SignalR

我的是.net 6，没有配置startup，我的Hub是建在Utils文件夹中，大家可根据需要修改

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSignalR();
builder.Services.AddSignalR().AddHubOptions<EditHub>(options =>
{
    // 配置日志级别
    options.EnableDetailedErrors = true;
});
builder.Services.AddSingleton<EditHub>();

var app = builder.Build();
app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<EditHub>("/Utils/editHub");
});

3.添加Hub类

参数可根据需要增删。

 public class EditHub:Hub
 {
     public async Task SendMessage(string name,string value)
     {
         if (Clients != null)
             await Clients.All.SendAsync("ReceiveMessage", name, value);//第一个参数：调用的客户端函数名，第二个参数：客户端函数的参数
     }
 }

4.前端

我使用的是Layui的框架里面使用它自带的单元格编辑事件进行监听,除了引用SignalR还需要引用layui.js，jquery.min.js，layui.css

<script src="/js/signalr.min.js"></script>
<div>
<table class="layui-table" id="table" lay-filter="table"></table>
</div>
<script type="text/javascript">
var table;
var connection = new signalR.HubConnectionBuilder().withUrl("/utils/editHub").configureLogging(signalR.LogLevel.Information).build();
connection.on("ReceiveMessage", function (name, value) {
    // 更新表格视图
    console.log(name + " says " + value);
    var part = value.split(":");
    console.log('part:'+part[0]);
    if(part[0]=='edit')
    {
        var reasonCell = document.querySelector('tr[data-index="'+part[1]+'"] td[data-field="reason"] .layui-table-cell');

        // 更新单元格内容
        reasonCell.textContent = part[2];
    }
});
function sendMessage(name, value) {
    connection.invoke("SendMessage", name, value).catch(err => console.error(err.toString()));
}

connection.start().catch(err => console.error(err.toString()));
layui.use('table', function () {
    table = layui.table;
    var util = layui.util;;
    renderTable();
    var $ = layui.$, active = {
        reload: function () {

            //执行重载
            table.reload('table', {
                done: function (res, curr, count) {
                    console.log(curr)
                    $('.btn-operate').on('click', function () {
                        var type = $(this).data('type');
                        console.log(type)
                        active[type] ? active[type].call(this) : '';
                    });
                }
            });
        },
    };
        //监听单元格编辑
    table.on('edit(table)', function (obj) {
        var value = obj.value //得到修改后的值
            , data = obj.data //得到所在行所有键值
            , field = obj.field; //得到字段
        console.log(data);
        $.post("/home/savechangeinfo", { json: JSON.stringify(data) }, function (res) {
            if (res.data) {
                var user = '@Model.Item2.MachineName';
                var message = 'edit:'+obj.tr.data('index')+":"+value;
                sendMessage(user, message)
            }
        });
    });

    // $(document).ready(function () {
    //     var type = $(this).data('type');
    //     console.log(type)
    //     active[type] ? active[type].call(this) : '';
    // });
});

function renderTable() {
    table.render({
        elem: '#table',
        url: '/home/editlist?ip=@Model.Item2.Ip',
        cols: [
            [
                { field: 'ip', title: 'IP', width: 120 },
                { field: 'machine', title: '设备名', width: 129 },
                { field: 'lx', title: '异常类型', width: '50%' },
                { field: 'time', title: '异常时间', width: 165 },
                { field: 'reason', title: '异常原因', width: '50%', edit: 'text' },
            ]
        ],
        escape: true,

        id: 'table',
        height: 'full'
    });

}
</script>