Blazor Client-Sideアプリで作る稼働監視サイト

今回はBlazor Client-Sideアプリ(Blazor WebAssembly)で、WEBサイトの稼働を監視させてみたいと思います

C#でサイトの監視を考える

Webサーバーなどの稼働監視をC#で実装する場合、いくつかの方法があると思います。
まず、コンソールアプリをC#で作ってみます。

Timer + HttpClient を組み合わせて作ってみましょう。
Webサーバーに対して、リクエストを開始した時間から、応答時間までを計り、3000ミリ以上かかった場合、タイムアウトとするプログラムを考えてみます。

main.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using System.Timers;
using System.Net.Http;

namespace cli_url
{
    class Program
    {
        static void Main(string[] args)
        {
            var http = new HttpClient();

            // タイムアウトの設定
            http.Timeout = TimeSpan.FromMilliseconds(3000);

            // サーバーリストの読み込み
            var servers = new string[] { "http://localhost:8081", "http://localhost:8082", "http://localhost:8083", "http://localhost:8084" };

            // タイマーの定義
            var timer = new System.Timers.Timer();
            timer.Interval = 5000; // 5秒おきに実行

            // タイマーで実施する処理
            timer.Elapsed += async (s, e) =>
            {
                foreach (var server in servers)
                {
                    var dt1 = DateTime.Now; // 開始時間
                    var dt2 = DateTime.Now; // 終了時間

                    try
                    {
                        // Getする
                        await http.GetAsync(server);
                    }
                    catch { }
                    // 終了時間を記録
                    dt2 = DateTime.Now;

                    // 応答時間を計算
                    var restime = (dt2 - dt1).TotalMilliseconds;
                    if (restime < 3000)
                    {
                        // 3000ミリ秒以内はOK
                        Console.WriteLine("{0} is OK res = {1}", server, restime);
                    }
                    else
                    {
                        // 3000ミリ以上はタイムアウトとする
                        Console.WriteLine("{0} is Timeout.", server);
                    }

                }

            };

            // タイマーの開始
            timer.Enabled = true;

            Console.ReadKey();
        }
    }
}

##実行画面

Blazorで、同じ実装をしてみる。

簡単なサイト監視が実装できたところで、Blazor WebAssemblyで実装してみましょう。
Blazor WebAssembly で初めからあるFetchData.razorページを改造し、コンソールプログラムと同じ実装をしてみます。

FetchData.razor

@page "/fetchdata"
@inject HttpClient Http

<h1>Server List</h1>

@if (servers == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>SiteName</th>
                <th>URL</th>
                <th>Response</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var server in servers)
            {
                <tr>
                    <td style="background-color: @(server.TimeOut == false ?  "lime" : "red")" >@server.Name</td>
                    <td>@server.URL</td>
                    <td>@server.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private ServerConfig[] servers;


    protected override async Task OnInitializedAsync()
    {
        // タイムアウトの設定
        Http.Timeout = TimeSpan.FromMilliseconds(3000);

        // サーバーリストの読み込み
        servers = await Http.GetFromJsonAsync<ServerConfig[]>("sample-data/servers.json");

        // タイマーの定義
        var timer = new System.Timers.Timer();
        timer.Interval = 5000; // 5秒おきに実行

        // タイマーで実施する処理
        timer.Elapsed += async (s, e) =>
        {
            foreach(var server in servers)
            {
                var dt1 = DateTime.Now; // 開始時間
                var dt2 = DateTime.Now; // 終了時間

                try
                {
                    // Getする
                    await Http.GetAsync(server.URL);
                }
                catch { }
                // 終了時間を記録
                dt2 = DateTime.Now;

                // 応答時間を計算
                var restime = (dt2 - dt1).TotalMilliseconds;
                if (restime < 3000)
                {
                    // 3000ミリ秒以内はOK
                    server.TimeOut = false;
                }
                else
                {
                    // 3000ミリ以上はタイムアウトとする
                    server.TimeOut = true;
                }

                server.Summary = restime.ToString();
            }

            // 画面更新
            this.StateHasChanged();
        };

        // タイマーの開始
        timer.Enabled = true;
    }

    public class ServerConfig
    {
        public string Name { get; set; }

        public string URL { get; set; }

        public string Summary { get; set; } 

        public bool TimeOut { get; set; }
    }
}

Blazor でもコンソールアプリケーションとほぼ同等のコーディングで、実装を行うことができました。ブラウザ内で行える処理に限られますが、割とベタなコードでも十分動作するコードをC#で書くことができます。
動きのあるプログラムでも、JavaScriptを使わずにコーディングができるので、C#コーダーにとっては、見栄えのいいWebアプリケーションを作るにはBlazorは良い選択肢になるのではないでしょうか！！これからも、Blazorの進化に期待したいと思います

参考サイト

け日記　C# HttpClientでタイムアウトを設定する