Question

我真的希望有人可以帮助我。我正在尝试构建一个与SQL Server Express signalR连接的实时量表。

这是我的代码

启动课程

using System;
using System.Configuration;
using System.Threading.Tasks;
using Microsoft.Owin;`enter code here`
using Owin;
using Microsoft.AspNet.SignalR;

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

集线器类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using Microsoft.AspNet.SignalR.Hubs;

namespace Real_Time_Gauge
{
    public class GaugeHub : Hub
    {
        Int16 value = 0;
        [HubMethodName("sendNotifications")]
        public string SendNotifications()
        {
            using (var connection = new SqlConnection(ConfigurationManager.ConnectionStrings["GaugeConnection"].ConnectionString))
            {
                string query = "SELECT top 1 [value] FROM [Values]";
                connection.Open();
                using (SqlCommand command = new SqlCommand(query, connection))
                {
                    command.Notification = null;
                    DataTable dt = new DataTable();
                    SqlDependency dependency = new SqlDependency(command);
                    dependency.OnChange += new        `enter code here`
                    OnChangeEventHandler(dependency_OnChange);
                    if (connection.State == ConnectionState.Closed)


                        connection.Open();

                    var reader = command.ExecuteReader();
                    dt.Load(reader);
                    if (dt.Rows.Count > 0)
                    {
                        value = Int16.Parse(dt.Rows[0]["value"].ToString());
                    }
                }
            }
            IHubContext context = GlobalHost.ConnectionManager.GetHubContext<GaugeHub>();
            return context.Clients.All.RecieveNotification(value);
        }
        private void dependency_OnChange(object sender, SqlNotificationEventArgs e)
        {
            if (e.Type == SqlNotificationType.Change)
            {
                GaugeHub nHub = new GaugeHub();
                nHub.SendNotifications();

            }
        }
    }
}

的web.config

<?xml version="1.0"?>


<configuration>
  <connectionStrings>
    <add name="GaugeConnection" connectionString="Server=72NHD02-PC\SQLEXPRESS;Database=SignalR;User Id=**;Password=*******;" providerName="System.Data.SqlClient" />
  </connectionStrings>
    <system.web>
      <compilation debug="true" targetFramework="4.5" />
      <httpRuntime targetFramework="4.5" />
    </system.web>

</configuration>

Html和javascript

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <link href="css/style.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
    <script src="/signalr/hubs"></script>
    <script src="Scripts/gauge.min.js"></script>
    <script src="Scripts/script.js"></script>
    <script src="signalr/hubs"></script>
</head>
<body>

    <input type="text" id="value" />
    <canvas id="gauge"></canvas>

    <script type="text/javascript">
        var gauge = new Gauge({
            renderTo: 'gauge',
            width: document.body.offsetWidth,
            height: document.body.offsetHeight,
            glow: true,
            units: 'KPI',
            title: "Sales",
            minValue: 0,
            maxValue: 100,
            majorTicks: ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
            minorTicks: 10,
            strokeTicks: false,
            highlights: [
                { from: 0, to: 40, color: 'rgb(237, 28,  36)' },
                { from: 40, to: 60, color: 'rgb(242, 101,  34)' },
                { from: 60, to: 70, color: 'rgb(247, 147,  29)' },
                { from: 70, to: 80, color: 'rgb(255, 242, 0)' },
                { from: 80, to: 100, color: 'rgb(0,   144, 58)' }
            ],
            colors: {
                plate: '#222',
                majorTicks: '#f5f5f5',
                minorTicks: '#ddd',
                title: '#fff',
                units: '#ccc',
                numbers: '#eee',
                needle: { start: 'rgba(240, 128, 128, 1)', end: 'rgba(255, 160, 122, .9)' }
            }
        });
        gauge.onready = function () {
            setInterval(function () {
                gauge.setValue($value);
            }, 1000);
        };
        gauge.draw();
        window.onresize = function () {
            gauge.updateConfig({
                width: document.body.offsetWidth,
                height: document.body.offsetHeight
            });
        };
    </script>
</body>
</html>

衡量javascript

/// <reference path="jquery-1.6.4.min.js" />
/// <reference path="jquery.signalR-2.2.0.min.js" />


$(function() {
    // Declare a proxy to reference the hub.
    var notifications = $.connection.notificationHub;
    // Create a function that the hub can call to broadcast messages.
    notifications.client.recieveNotification = function () {
        // Add the message to the page.
        $('#value').text(value);
    };
    // Start the connection.
    $.connection.hub.start().done(function () {
        notifications.server.sendNotifications();
    }).fail(function (e) {
        alert(e);
    });
    //$.connection.hub.start();
});

$value = value;

我的数据库名为SignalR，其值为table id = 1 value = 80。我非常感谢任何帮助，因为我是signalR的新手。

由于

SignalR实时仪表

0 个答案: