ASP.NET MVC 迅速集成 SignalR

简介: 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 包管理器控制台,运行以下命令:
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 实现了定时任务操作数据库并实时更新网页数据。

目录
相关文章
|
22天前
|
开发框架 .NET API
Windows Forms应用程序中集成一个ASP.NET API服务
Windows Forms应用程序中集成一个ASP.NET API服务
77 9
|
2月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
35 7
|
3月前
|
jenkins 测试技术 持续交付
解锁.NET项目高效秘籍:从理论迷雾到实践巅峰,持续集成与自动化测试如何悄然改变游戏规则?
【8月更文挑战第28天】在软件开发领域,持续集成(CI)与自动化测试已成为提升效率和质量的关键工具。尤其在.NET项目中,二者的结合能显著提高开发速度并保证软件稳定性。本文将从理论到实践,详细介绍CI与自动化测试的重要性,并以ASP.NET Core Web API项目为例,演示如何使用Jenkins和NUnit实现自动化构建与测试。每次代码提交后,Jenkins自动触发构建流程,通过编译和运行NUnit测试确保代码质量。这种方式不仅节省了时间,还能快速发现并解决问题,推动.NET项目开发迈向更高水平。
45 8
|
3月前
|
Java Spring UED
Spring框架的异常处理秘籍:打造不败之身的应用!
【8月更文挑战第31天】在软件开发中,异常处理对应用的稳定性和健壮性至关重要。Spring框架提供了一套完善的异常处理机制,包括使用`@ExceptionHandler`注解和配置`@ControllerAdvice`。本文将详细介绍这两种方式,并通过示例代码展示其具体应用。`@ExceptionHandler`可用于控制器类中的方法,处理特定异常;而`@ControllerAdvice`则允许定义全局异常处理器,捕获多个控制器中的异常。
46 0
|
3月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
41 0
|
3月前
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?
|
6月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
178 0
|
6月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
75 0
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
162 0
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(三)
[回馈]ASP.NET Core MVC开发实战之商城系统(三)
96 0

相关实验场景

更多