快捷導(dǎo)航

ASP.NET MVC 迅速集成 SignalR的過(guò)程

更新時(shí)間：2024年09月10日 11:43:10 作者：Echo_Wish

在ASP.NET MVC項(xiàng)目中集成SignalR可以實(shí)現(xiàn)定時(shí)任務(wù)操作數(shù)據(jù)庫(kù)并將數(shù)據(jù)實(shí)時(shí)更新到網(wǎng)頁(yè),通過(guò)創(chuàng)建新項(xiàng)目、配置SignalR、操作數(shù)據(jù)庫(kù)、創(chuàng)建SignalR Hub和定時(shí)任務(wù),可以實(shí)現(xiàn)前端頁(yè)面的實(shí)時(shí)數(shù)據(jù)顯示,本文提供了詳細(xì)的步驟和代碼示例,幫助開發(fā)者快速實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)更新功能

在現(xiàn)代 Web 應(yīng)用程序中，實(shí)時(shí)更新數(shù)據(jù)是一個(gè)常見需求。本文將詳細(xì)介紹如何在 ASP.NET MVC 項(xiàng)目中使用 SignalR 實(shí)現(xiàn)定時(shí)任務(wù)操作數(shù)據(jù)庫(kù)并將數(shù)據(jù)更新到網(wǎng)頁(yè)。我們將逐步講解如何配置 SignalR、創(chuàng)建定時(shí)任務(wù)、操作數(shù)據(jù)庫(kù)以及在前端顯示實(shí)時(shí)數(shù)據(jù)。

1. 項(xiàng)目初始化

首先，創(chuàng)建一個(gè)新的 ASP.NET MVC 項(xiàng)目。
● 打開 Visual Studio，選擇 File > New > Project。
● 選擇 ASP.NET Web Application，命名項(xiàng)目為 RealTimeDataUpdate。
● 選擇 MVC 模板并點(diǎn)擊 Create。

2. 安裝和配置 SignalR

在項(xiàng)目中安裝 SignalR 包，并進(jìn)行配置。

.打開 NuGet 包管理器控制臺(tái)，運(yùn)行以下命令：

Install-Package Microsoft.AspNet.SignalR

.在 Startup.cs 文件中配置 SignalR：

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(RealTimeDataUpdate.Startup))]
namespace RealTimeDataUpdate
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

3. 創(chuàng)建數(shù)據(jù)庫(kù)和模型

創(chuàng)建一個(gè)簡(jiǎn)單的數(shù)據(jù)庫(kù)和模型來(lái)存儲(chǔ)和獲取數(shù)據(jù)。

1. 創(chuàng)建一個(gè)名為 DataContext 的類：

using System.Data.Entity;
public class DataContext : DbContext
{
    public DbSet<SensorData> SensorData { get; set; }
}
public class SensorData
{
    public int Id { get; set; }
    public string Temperature { get; set; }
    public string Humidity { get; set; }
    public DateTime Timestamp { get; set; }
}

2. 在 Web.config 文件中添加數(shù)據(jù)庫(kù)連接字符串：

<connectionStrings>
    <add name="DataContext" connectionString="Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=RealTimeData;Integrated Security=True" providerName="System.Data.SqlClient" />
</connectionStrings>

4. 創(chuàng)建 SignalR Hub

創(chuàng)建一個(gè) SignalR Hub 來(lái)處理客戶端連接和數(shù)據(jù)更新。

1. 創(chuàng)建一個(gè)名為 DataHub 的類：

using Microsoft.AspNet.SignalR;
public class DataHub : Hub
{
    public void SendData(string temperature, string humidity)
    {
        Clients.All.updateData(new { Temperature = temperature, Humidity = humidity, Timestamp = DateTime.Now });
    }
}

5. 實(shí)現(xiàn)定時(shí)任務(wù)

使用 System.Threading.Timer 實(shí)現(xiàn)定時(shí)任務(wù)，每隔一段時(shí)間從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)并通過(guò) SignalR 更新到客戶端。

1. 創(chuàng)建一個(gè)名為 DataScheduler 的類：

using System;
using System.Threading;
public class DataScheduler
{
    private Timer _timer;
    public void Start()
    {
        _timer = new Timer(UpdateData, null, 0, 5000); // 每5秒執(zhí)行一次
    }
    private void UpdateData(object state)
    {
        using (var context = new DataContext())
        {
            var latestData = context.SensorData.OrderByDescending(d => d.Timestamp).FirstOrDefault();
            if (latestData != null)
            {
                var hubContext = GlobalHost.ConnectionManager.GetHubContext<DataHub>();
                hubContext.Clients.All.updateData(new
                {
                    Temperature = latestData.Temperature,
                    Humidity = latestData.Humidity,
                    Timestamp = latestData.Timestamp
                });
            }
        }
    }
}

2. 在 Global.asax 文件中啟動(dòng)定時(shí)任務(wù)：

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
    var scheduler = new DataScheduler();
    scheduler.Start();
}

6. 前端頁(yè)面和腳本

創(chuàng)建一個(gè)簡(jiǎn)單的前端頁(yè)面來(lái)顯示實(shí)時(shí)數(shù)據(jù)。

1. 在 Views/Home/Index.cshtml 文件中添加以下代碼：

@model IEnumerable<RealTimeDataUpdate.Models.SensorData>
@{
    ViewBag.Title = "實(shí)時(shí)數(shù)據(jù)監(jiān)測(cè)";
}
<h2>最新溫濕度數(shù)據(jù)</h2>
<table>
    <tr>
        <th>Temperature</th>
        <th>Humidity</th>
        <th>Timestamp</th>
    </tr>
    <tr>
        <td id="temperature"></td>
        <td id="humidity"></td>
        <td id="timestamp"></td>
    </tr>
</table>
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.4.2.min.js"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var hub = $.connection.dataHub;
        hub.client.updateData = function (data) {
            $('#temperature').text(data.Temperature);
            $('#humidity').text(data.Humidity);
            $('#timestamp').text(data.Timestamp);
        };
        $.connection.hub.start().done(function () {
            console.log("SignalR connected");
        });
    });
</script>