[Blazor] 地热数据采集项目9 Blazor Server 应用程序中进行 HTTP 请求

科控物联

发布于 2022-12-20 14:19:15

3400

发布于 2022-12-20 14:19:15

获取网关信息并显示

{
  "data": [
      {
          "deviceName": "电表1",
          "modbusAddress": "0",
          "variableName": "Ua",
          "value": 239.2
      },
      {
          "deviceName": "电表1",
          "modbusAddress": "2",
          "variableName": "Ub",
          "value": 0
      },
      {
          "deviceName": "电表1",
          "modbusAddress": "4",
          "variableName": "Uc",
          "value": 0
      },
    ..............................//省略其他。。。
    ]
}

编写Service

using Microsoft.Extensions.Logging;
using System;
using System.Linq;
using System.Net.Http;
using System.Threading.Tasks;

namespace BlazorApexCharts.Docs.Services
{
    public interface IElectricMeterService
    {
        public Task<IQueryable<QuickType.Datum>> GetElectricMeterAsync(string deviceName);
    }
    public class ElectricMeterService : IElectricMeterService
    {
        private readonly IHttpClientFactory _httpClientFactory = null!;
        private readonly ILogger<ElectricMeterService> _logger = null!;
        public ElectricMeterService(
          IHttpClientFactory httpClientFactory,
          ILogger<ElectricMeterService> logger)
        {
            (_httpClientFactory, _logger) = (httpClientFactory, logger);
        }

        public async Task<IQueryable<QuickType.Datum>> GetElectricMeterAsync(string  deviceName)
        {
            // Create the client
            using HttpClient httpClient = _httpClientFactory.CreateClient();
            try
            {
          var      result = await httpClient.GetAsync($"http://11.168.1.168:8080/api/plugin/device-data/{deviceName}");
            var    content = await result.Content.ReadAsStringAsync();

           var     api = QuickType.TopLevel.FromJson(content.ToString());
              //  _logger.LogInformation("API:{txt}", content);
                return api?.Data.AsQueryable();
            }
            catch (Exception ex)
            {
                _logger.LogError("Error getting something fun to say: {Error}", ex);
            }
            return null;
        }
    }
}

在测试该应用程序之前，我们需要

在 Startup.cs 文件中注册Service 服务。
还需要调用 AddHttpClient 方法注册 IHttpClientFactory。

public void ConfigureServices(IServiceCollection services)
{
        ......
 services.AddSingleton<IElectricMeterService, ElectricMeterService>();
  services.AddHttpClient();
}

使用：

@inject IElectricMeterService ElectricMeterService
@code {
    private ApexChartOptions<Order> options { get; set; } = new();
    PaginationState pagination = new PaginationState { ItemsPerPage = 20 };
    private static IQueryable<QuickType.Datum> orders ;
    Timer timer;
    QuickType.TopLevel api;
    protected override async Task OnInitializedAsync()
    {
        timer = new System.Threading.Timer(_ =>
    {
        InvokeAsync(ChangeData);
        InvokeAsync(StateHasChanged);
    }, null, 500, 1000);
        var fileName = "电能表实时数据";
        options.Chart = new Chart();
        options.Chart.Toolbar = new Toolbar
            {
                Export = new ExportOptions
                {
                    Csv = new ExportCSV
                    {
                        Filename = fileName,
                        HeaderCategory = "Country",
                    },
                    Png = new ExportPng { Filename = fileName },
                    Svg = new ExportSvg { Filename = fileName }
                }
            };
    }
    async Task ChangeData()
    {
        orders =await ElectricMeterService.GetElectricMeterAsync("电表1");
        //  Console.WriteLine(orders.Count());       
    }
    public void Dispose()
    {
        timer.Dispose();
    }
}

运行效果