先日こちらの一連のツイートを見かけました。
なるほど~ 確かにネコちゃんとか文鳥の画像が表示されたら怒りも収まるに違いない。
というわけで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のリポジトリを見た感じ、こことかここら辺でしょうか?
おわり
これで接続が切れても怒られずに済むかも…?
ちなみに文鳥の画像はこちらのフリー素材を利用させていただきました。
素敵な写真ありがとうございます。