ASP.NET MVC 迅速集成 SignalR

在现代 Web 应用程序中,实时更新数据是一个常见需求。本文将详细介绍如何在 ASP.NET MVC 项目中使用 SignalR 实现定时任务操作数据库并将数据更新到网页。我们将逐步讲解如何配置 SignalR、创建定时任务、操作数据库以及在前端显示实时数据。

目录

  1. 项目初始化
  2. 安装和配置 SignalR
  3. 创建数据库和模型
  4. 创建 SignalR Hub
  5. 实现定时任务
  6. 前端页面和脚本
  7. 运行和测试

1. 项目初始化

首先,创建一个新的 ASP.NET MVC 项目。

● 打开 Visual Studio,选择 File > New > Project。

● 选择 ASP.NET Web Application,命名项目为 RealTimeDataUpdate。

● 选择 MVC 模板并点击 Create。

2. 安装和配置 SignalR

在项目中安装 SignalR 包,并进行配置。

  • .打开 NuGet 包管理器控制台,运行以下命令:
bash 复制代码
Install-Package Microsoft.AspNet.SignalR
  • .在 Startup.cs 文件中配置 SignalR:
csharp 复制代码
using Microsoft.Owin;
using Owin;

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

3. 创建数据库和模型

创建一个简单的数据库和模型来存储和获取数据。

1. 创建一个名为 DataContext 的类:
csharp 复制代码
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 文件中添加数据库连接字符串:

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

4. 创建 SignalR Hub

创建一个 SignalR Hub 来处理客户端连接和数据更新。

1. 创建一个名为 DataHub 的类:

csharp 复制代码
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. 实现定时任务

使用 System.Threading.Timer 实现定时任务,每隔一段时间从数据库获取数据并通过 SignalR 更新到客户端。

1. 创建一个名为 DataScheduler 的类:

csharp 复制代码
using System;
using System.Threading;

public class DataScheduler
{
    private Timer _timer;

    public void Start()
    {
        _timer = new Timer(UpdateData, null, 0, 5000); // 每5秒执行一次
    }

    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 文件中启动定时任务:

csharp 复制代码
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. 前端页面和脚本

创建一个简单的前端页面来显示实时数据。

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

html 复制代码
@model IEnumerable<RealTimeDataUpdate.Models.SensorData>

@{
    ViewBag.Title = "实时数据监测";
}

<h2>最新温湿度数据</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>

7. 运行和测试

  • 运行项目,确保数据库已创建并有一些初始数据。
  • 打开浏览器,访问你的应用程序,应该可以看到实时更新的温湿度数据。

通过以上步骤,你已经成功在 ASP.NET MVC 项目中使用 SignalR 实现了定时任务操作数据库并实时更新网页数据。

相关推荐
无名之逆18 分钟前
hyperlane:Rust HTTP 服务器开发的不二之选
服务器·开发语言·前端·后端·安全·http·rust
机构师25 分钟前
<iced><rust><GUI>基于rust的GUI库iced的学习(02):svg图片转png
后端·rust
老赵骑摩托28 分钟前
Go语言nil原理深度解析:底层实现与比较规则
开发语言·后端·golang
卑微小文38 分钟前
惊!代理 IP 竟成社交媒体营销破局“神助攻”!
后端
程序员爱钓鱼1 小时前
Go 语言邮件发送完全指南:轻松实现邮件通知功能
后端·go·排序算法
Cloud_.1 小时前
Spring Boot整合Redis
java·spring boot·redis·后端·缓存
海狸鼠1 小时前
几行代码实现MCP服务端/客户端(接入DeepSeek)
前端·后端
37手游后端团队1 小时前
10分钟读懂RAG技术
人工智能·后端
Moment1 小时前
岗位急招,算法实习、音乐生成、全栈、flutter 都有,早十晚六 😍😍😍
前端·后端·面试
金融数据出海2 小时前
使用Spring Boot对接印度股票数据源:实战指南
后端