SignalR 个人使用案例

#region js
var connection = $.hubConnection();
var myHub = connection.createHubProxy(‘MyHub’);

function initSignalR(tableId) {
$(‘#p’).progressbar(‘setValue’, 0);
var dataStorage = [];
myHub.on(‘SendUI’, function (rows) {
var selector = ‘#’ + tableId + ’ tbody’;
var table = $(selector);
table.empty();
dataStorage = dataStorage.concat(rows.getList);
if (dataStorage.length > 5) {
dataStorage.shift();
}
dataStorage.forEach(function (row, index) {
var tr = $(‘’);
var cellStyle;
if (row.STATUS === “卷算成功”) {
cellStyle = {
‘color’: ‘#1AB1E8’,
‘font-size’: ‘15px’,
‘text-align’: ‘center’
};
} else {
cellStyle = {
‘color’: ‘#FF0000’,
‘font-size’: ‘15px’,
‘text-align’: ‘center’
};
}
Object.keys(row).forEach(function (key) {
var td = $(‘’).text(row[key]).css(cellStyle);
tr.append(td);
});
table.append(tr);
});
$(‘#sum’).text(rows.total);
$(‘#deal’).text(rows.ynum);
var progressPercentage = (rows.ynum / rows.total) * 100; // 这将基于总行数计算，可能不准确
$(‘#p’).progressbar(‘setValue’, Math.min(progressPercentage, 100)); // 确保百分比不超过100%
});
connection.start().done(function () {
console.log(‘SignalR connected.’);
}).fail(function (error) {
console.error(error.toString());
});
}

#endregion

#region 创建SignalR推送后端
var contextd = GlobalHost.ConnectionManager.GetHubContext();
object lockObj = new object();
DataTable ta = new DataTable(“C” + DateTime.Now.ToString(“yyyyMMdd”));
ta.Columns.Add(“CCM01”, typeof(string)); // 主件料號
ta.Columns.Add(“CCM02”, typeof(string)); //標準成本版本
ta.Columns.Add(“STATUS”, typeof(string)); //执行结果

FeedBack reult = new FeedBack();
var rowDict = row.ItemArray.Select((field, index) => new
{
Key = ta.Columns[index].ColumnName,
Value = field
}).ToDictionary(item => item.Key, item => item.Value);
reult.total = totCNT;
reult.ynum = okCNT;
reult.getList = rowDict;
//SendUI方法是dynamic類型,可以自定義,跟MyHub.cs中的方法同名
contextd.Clients.All.SendUI(reult);
#endregion

#region 创建SignalR推送前端

< div data-options=“region:‘east’,iconCls:‘icon-reload’,title:‘處理進度提示’,collapsible:false” style=“width: 500px;”>
< table id=“topBomdt” style=“width: 100%; border-collapse: collapse;”>
< thead>
< tr style=“height: 25px;”>
< th style=“width: 250px; background-color: #6fa4ed; text-align: center;”>主件料號< /th>
< th style=“width: 150px; background-color: #6fa4ed; text-align: center;”>標準成本版本< /th>
< th style=“width: 150px; background-color: #6fa4ed; text-align: center;”>执行结果< /th>
< /tr>
< /thead>
< tbody>
< /tbody>
< /table>
< div id=“p” class=“easyui-progressbar” data-options=“value:0” style=“width:100%;”>< /div>
< p id=“messages” style=“width: 100%; line-height:30px;”>总数：< span id=“sum”>< /span> 已处理：< span id=“deal”>< /span>< /p>
< /div>
#endregion

public class MyHub : Hub
{
    /// <summary>
    /// 【Test】调用所有客户端的 sendMessage 方法
    /// </summary>
    /// <param name="message"></param>
    public void Send(string message)
    {
        Clients.All.sendMessage(message);
    }

    /// <summary>
    /// 獲取DataTable中的每一行,返回到前端JS處理
    /// </summary>
    /// <param name="rows"></param>
    public void SendDataTableRows(List<Dictionary<string, object>> rows)
    {
        //SendUI方法是dynamic類型,可以自定義,跟後端寫入的方法同名
        //案例:CcmCcnAjax.ashx?a=15
        Clients.All.SendUI(rows);
    }
}


public class Startup : PersistentConnection
{
    protected override Task OnConnected(IRequest request, string connectionId)
    {
        return Connection.Send(connectionId, "Welcome!");
    }

    protected override Task OnReceived(IRequest request, string connectionId, string data)
    {
        return Connection.Broadcast(data);
    }

    public void Configuration(IAppBuilder app)
    {
        // Any connection or hub wire up and configuration should go here
        app.MapSignalR();
    }
}