先日こちらの一連のツイートを見かけました。
なるほど～ 確かにネコちゃんとか文鳥の画像が表示されたら怒りも収まるに違いない。
というわけでBlazorのリコネクト画面をカスタマイズしてみます。
カスタマイズ結果
こんな感じになりました。
文鳥めっちゃかわいいですね…✨🐦✨ 📹🐤💕
コネクションロスト(リコネクティング)状態
リコネクト タイムアウト状態
変更前(デフォルト表示)
ちなみに変更前(デフォルト)だとこんな感じの表示です。
どうやるの？
以下の記事によると.NET Core 3.0 Preview 4くらいでカスタマイズの機能が追加されたっぽい？
このあたり。
To customize this UI define an element with components-reconnect-modal as its ID. The client will update this element with one of the following CSS classes based on the state of the connection:
- components-reconnect-show: Show the UI to indicate the connection was lost and the client is attempting to reconnect.
- components-reconnect-hide: The client has an active connection – hide the UI.
- components-reconnect-failed: Reconnection failed. To attempt reconnection again call window.Blazor.reconnect().
Microsoft Docsにも一応変な日本で記述されているっぽい。
カスタマイズした感じから要約すると
components-reconnect-modalという名称のID要素にリコネクト時と再接続試行時の画面を作る。- 正常に接続できている状態なら
components-reconnect-hideで定義したCSSがcomponents-reconnect-modalに適応される。 - コネクションロスト(リコネクティング)状態なら
components-reconnect-showで定義したCSSがcomponents-reconnect-modalに適応される。 - リコネクト タイムアウト状態なら
components-reconnect-failedで定義したCSSがcomponents-reconnect-modalに適応される。
cshtml側の実装
_Host.cshtmlにcomponents-reconnect-modalを追加します。
reconnect-waitのdivがコネクションロスト(リコネクティング)状態の際に表示する画面要素
reconnect-buttonのdivがリコネクト タイムアウト状態の際に表示する画面要素です。
components-reconnect-modalに対して適応するdisplay属性値はcss/reconnect.cssで定義しています。
Reconnectボタンを押下すると、再接続できます。
@page "/" @namespace ReconnectSample.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ReconnectSample</title> <base href="~/" /> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> <link href="css/site.css" rel="stylesheet" /> + <link href="css/reconnect.css" rel="stylesheet" /> </head> <body> + <div id="components-reconnect-modal" class="reconnect-block"> + <div class="inner-block"> + <div class="reconnect-wait"> + <div class="image-block"> + <image src="reconnecting.jpg"></image> + </div> + サーバとの通信が切断されました。只今再接続中です...🐥💬 + </div> + + <div class="reconnect-button"> + <div class="image-block"> + <img class="timeout-image" src="timeout.jpg"></img> + </div> + サーバへの再接続に失敗しました。ボタンを押して再接続してください🐥💦 + <button class="btn btn-primary" value="Reconnect" onclick="Reconnect()">再接続</button> + </div> + </div> + </div> <app> @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered)) </app> <script src="_framework/blazor.server.js"></script> </body> </html>
※このサンプルはレスポンシブ対応とか全くしてないのでご留意ください
※関係ないけどなんで+以外のところがハイライト表示されるんだろう…。
css側の実装
wwwroot/css/reconnect.cssを新規作成します
.reconnect-block { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; display: none; overflow: hidden; background-color: #fff; opacity: 0.8; text-align: center; font-weight: bold; } .inner-block { width: 450px; height: 250px; top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: auto; } .image-block { width: 300px; height: 200px; display: block; margin: auto; text-align: center; } img { max-width: 100%; height: auto; } /* 大事なのはここから↓ */ /* 正常状態はnoneでcomponents-reconnect-modalを表示しない */ .components-reconnect-hide { display: none; } /* コネクションロスト(リコネクティング)状態はcomponents-reconnect-modalをdisplay:blockで表示 */ .components-reconnect-show { display: block; } /* リコネクト タイムアウト状態はcomponents-reconnect-modalをdisplay:blockで表示 */ .components-reconnect-failed { display: block; } .components-reconnect-show .reconnect-wait { display: block; } .components-reconnect-failed .reconnect-wait { display: none; } .components-reconnect-show .reconnect-button { display: none; } .components-reconnect-failed .reconnect-button { display: block; }
参考
画面のカスタマイズはここら辺のBlogでも触れられているっぽい。
あとはGitHubのAspNetCoreのリポジトリを見た感じ、こことかここら辺でしょうか？
おわり
これで接続が切れても怒られずに済むかも…？
ちなみに文鳥の画像はこちらのフリー素材を利用させていただきました。
素敵な写真ありがとうございます。