ASP.NET MVC 迅速集成 SignalR的过程

 更新时间:2024年09月10日 11:43:10   作者:Echo_Wish  
在ASP.NET MVC项目中集成SignalR可以实现定时任务操作数据库并将数据实时更新到网页,通过创建新项目、配置SignalR、操作数据库、创建SignalR Hub和定时任务,可以实现前端页面的实时数据显示,本文提供了详细的步骤和代码示例,帮助开发者快速实现实时数据更新功能

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

1. 项目初始化

首先,创建一个新的 ASP.NET MVC 项目。
● 打开 Visual Studio,选择 File > New > Project。
● 选择 ASP.NET Web Application,命名项目为 RealTimeDataUpdate。
● 选择 MVC 模板并点击 Create。

2. 安装和配置 SignalR

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

.打开 NuGet 包管理器控制台,运行以下命令:

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. 创建数据库和模型

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

1. 创建一个名为 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 文件中添加数据库连接字符串:

<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 的类:

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 的类:

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

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 文件中添加以下代码:

@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 实现了定时任务操作数据库并实时更新网页数据。

到此这篇关于ASP.NET MVC 迅速集成 SignalR的文章就介绍到这了,更多相关ASP.NET MVC集成 SignalR内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • MVC数据验证详解

    MVC数据验证详解

    这篇文章主要为大家详细介绍了MVC数据验证的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • ASP.NET Core Project.json文件(5)

    ASP.NET Core Project.json文件(5)

    这篇文章主要为大家详细介绍了ASP.NET Core Project.json文件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • asp.net基于Web Service实现远程上传图片的方法

    asp.net基于Web Service实现远程上传图片的方法

    这篇文章主要介绍了asp.net基于Web Service实现远程上传图片的方法,涉及asp.net调用Web Service的文件流操作与文件传输实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • 3分钟快速学会在ASP.NET Core MVC中如何使用Cookie

    3分钟快速学会在ASP.NET Core MVC中如何使用Cookie

    这篇文章主要给大家介绍了关于如何通过3分钟快速学会在ASP.NET Core MVC中使用Cookie的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ASP.NET具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-12-12
  • .Net中的序列化和反序列化详解

    .Net中的序列化和反序列化详解

    这篇文章主要介绍了.Net中的序列化和反序列化详解的相关资料,需要的朋友可以参考下
    2016-04-04
  • Entity Framework Core生成数据库表

    Entity Framework Core生成数据库表

    这篇文章介绍了Entity Framework Core生成数据库表的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • Asp.net Core 如何设置黑白名单(路由限制)

    Asp.net Core 如何设置黑白名单(路由限制)

    本文主要介绍了Asp.net Core 如何设置黑白名单(路由限制),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 在.NET标准库中进行数据验证的方法

    在.NET标准库中进行数据验证的方法

    .NET标准库提供了多种数据验证机制,从基础的类型检查到复杂的业务规则验证,都能满足不同场景的需求,本文将深入探讨.NET标准库中的数据验证技术,帮助开发者构建更可靠的应用程序,感兴趣的朋友一起看看吧
    2025-07-07
  • .NET Framework拦截HTTP请求的实现

    .NET Framework拦截HTTP请求的实现

    本文主要介绍了.NET Framework拦截HTTP请求的实现,主要用于记录 HTTP 信息,调试程序、分析程序性能等方面,具有一定的参考价值,感兴趣的可以了解一下
    2024-03-03
  • asp.net使用FCK编辑器中的分页符实现长文章分页功能

    asp.net使用FCK编辑器中的分页符实现长文章分页功能

    这篇文章主要介绍了asp.net使用FCK编辑器中的分页符实现长文章分页功能,涉及asp.net字符串及分页操作的相关技巧,需要的朋友可以参考下
    2016-06-06

最新评论