Blazorアプリケーションのサーバー切断メッセージをカスタマイズする

Blazorアプリケーションのサーバー切断メッセージをカスタマイズするコードを紹介します。

概要

こちらの記事では、Blazorアプリケーションでアプリケーションプールを停止すると、サーバーとの切断メッセージが表示される動作について紹介しました。また、こちらの記事では、サーバーとの切断メッセージを非表示にするコードを紹介しました。
この記事では、サーバーとの切断メッセージをカスタマイズするコードを紹介します。

プログラム

事前準備

ASP.NET Coreアプリケーションのプロジェクトを作成し、Blazorアプリケーションに必要なファイルを準備します。詳しくはこちらの記事を参照してください。

コード

以下のコードを記述します。

Program.cs

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
var app = builder.Build();

app.UseStaticFiles();
app.UseRouting();

app.UseEndpoints(endpoints => {
  endpoints.MapBlazorHub();
  endpoints.MapFallbackToPage("/_Host");
});

app.Run();

App.razor

<Router AppAssembly="@typeof(Program).Assembly">
  <Found Context="routeData">
    <RouteView RouteData="@routeData" />
  </Found>
  <NotFound>
    <LayoutView>
      <p>Sorry, there's nothing at this address.</p>
    </LayoutView>
  </NotFound>
</Router>

_Imports.razor

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop

Pages/_Host.cshtml

@page
@namespace CustomizeDisconnectMessage.Pages

<!DOCTYPE html>
<html lang="ja">
<head>
    <base href="~/" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="components-reconnect-modal">

      <div class="showFrame">
        サーバーとの接続が切断されました。ネットワークの接続を確認してください。
        または、サービスのメンテナンス中です。
        (再接続しています:
        <span id="components-reconnect-current-attempt"></span> /
        <span id="components-reconnect-max-retries"></span>)
      </div>
      <div class="failedFrame">
        サーバーと接続できませんでした。しばらく時間を空けてからアクセスしてください。
      </div>
      <div class="rejectedFrame">
      再接続に失敗しました。ページを<a href="javascript:window.location.reload(true);">再読み込み</a>してください。
    </div>

  </div>

    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

index.razor

@page "/"

@code {
  string value1;
  string value2;
  string ResultText;

  void ButtonClick()
  {
    int iv1;
    int iv2;
    try
    {
      iv1 = Convert.ToInt32(value1);
    }
    catch (FormatException e) {
      iv1 = 0;      
    }

    try
    {
      iv2 = Convert.ToInt32(value2);
    }
    catch (FormatException e) {
      iv2 = 0;
    }

    int iv3 = iv1 + iv2;
    ResultText = "計:" + iv3.ToString();
  }
}

<h3>切断メッセージのカスタマイズデモ</h3>

<input id="text1" type="text" @bind="@value1" />
<br />
<input id="text2" type="text" @bind="@value2" /><br />
<hr/>
<button @onclick="ButtonClick">Button1</button>

<div>@ResultText</div>

wwwroot/style.css

#components-reconnect-modal {
  display: none;
}

  #components-reconnect-modal.components-reconnect-show,
  #components-reconnect-modal.components-reconnect-failed,
  #components-reconnect-modal.components-reconnect-rejected {
    display: block;
  }
    #components-reconnect-modal.components-reconnect-show > div {
      display: none;
    }

    #components-reconnect-modal.components-reconnect-show > div.showFrame {
      background-color:#ffee92;
      display: block;
    }

    #components-reconnect-modal.components-reconnect-failed > div {
      display: none;
    }

      #components-reconnect-modal.components-reconnect-failed > div.failedFrame {
        background-color: #ffa7a7;
        display: block;
      }

    #components-reconnect-modal.components-reconnect-rejected > div {
      display: none;
    }
      #components-reconnect-modal.components-reconnect-rejected > div.rejectedFrame {
        background-color: #ffa7a7;
        display: block;
    }

解説

_Host.cshtml の<div id="components-reconnect-modal">タグにサーバー切断時のエラーメッセージのコンテンツを記述します。
showFrameにサーバーとの切断がされ、リトライしている際のコンテンツを記述します。 components-reconnect-current-attemptが現在の接続試行回数が設定されるidです。 components-reconnect-max-retriesはリトライ回数の上限の値が設定されます。

failedFrameはリトライ回数サーバーと接続を試みて、上限まで失敗した後のメッセージとなります。

rejectedFrameはリトライ途中でアプリケーションプールや接続が復帰したものの、セッション情報が失われたため、再度ページを読み込む必要がある場合のメッセージです。

  <div id="components-reconnect-modal">

      <div class="showFrame">
        サーバーとの接続が切断されました。ネットワークの接続を確認してください。
        または、サービスのメンテナンス中です。
        (再接続しています:
        <span id="components-reconnect-current-attempt"></span> /
        <span id="components-reconnect-max-retries"></span>)
      </div>
      <div class="failedFrame">
        サーバーと接続できませんでした。しばらく時間を空けてからアクセスしてください。
      </div>
      <div class="rejectedFrame">
      再接続に失敗しました。ページを<a href="javascript:window.location.reload(true);">再読み込み</a>してください。
    </div>

  </div>

CSSでは、components-reconnect-modal タグに対して次のクラスが状況によって追加されます。

クラス名	設定されるタイミング
components-reconnect-show	接続が失われた場合に設定されるクラス名です。
components-reconnect-hide	サーバーへのアクティブな接続が再確立された場合に設定さるクラスです。
components-reconnect-failed	再接続に失敗した場合に設定されるクラスです。リトライ回数の接続試行後に接続できない場合に設定されます。
components-reconnect-rejected	再接続が拒否された場合に表示されます。

#components-reconnect-modalでは、CSSではクラスが設定された場合にdisplay:block;の設定で画面にエラーメッセージを表示します。
クラスが何も設定されていない状態では、display:none;の設定にして非表示にします。

#components-reconnect-modal {
  display: none;
}

  #components-reconnect-modal.components-reconnect-show,
  #components-reconnect-modal.components-reconnect-failed,
  #components-reconnect-modal.components-reconnect-rejected {
    display: block;
  }

設定されるクラスの違いにより、表示する枠を変化させるコードです。
#components-reconnect-modal.(クラス名) > div は display: none;の設定にしてすべて非表示にします。
#components-reconnect-modal.(クラス名) > div.****Frame の設定により、 (クラス名)が設定された場合の内部のdiv枠の ****Frameクラスのみをdisplay: block;の設定で画面に表示します。

#components-reconnect-modal {
    #components-reconnect-modal.components-reconnect-show > div {
      display: none;
    }

    #components-reconnect-modal.components-reconnect-show > div.showFrame {
      background-color:#ffee92;
      display: block;
    }

    #components-reconnect-modal.components-reconnect-failed > div {
      display: none;
    }

      #components-reconnect-modal.components-reconnect-failed > div.failedFrame {
        background-color: #ffa7a7;
        display: block;
      }

    #components-reconnect-modal.components-reconnect-rejected > div {
      display: none;
    }
      #components-reconnect-modal.components-reconnect-rejected > div.rejectedFrame {
        background-color: #ffa7a7;
        display: block;
    }

実行結果

プロジェクトを実行します。Blazorアプリケーションのページにアクセスします。下図のページが表示されます。

動作も確認できました。

サーバー側でアプリケーションプールを停止します。すぐにWebブラウザが下図の画面に変わります。デフォルトでは全画面でオーバーレイ表示されていたメッセージですが、ページ上部に_Host.cshtmlページの<div class="showFrame">タグに記述した、文言で表示される動作になりました。