【Blazor】 SignalRのまとめ

更新日：2024/08/06

Blazor Serverは、SignalRを常時接続を前提としたアプリケーションなので、SignalRにある程度知っておく必要があります。この記事では、Blazor ServerのSignalRについて解説します。

SignalRとは？
SignalRを切断してみる１
SignalRを切断してみる２
SignalRの接続オプションをカスタマイズする
まとめ

SignalRとは？

SignalRは、ブラウザ-Webサーバ間で、リアルタイムで双方向通信を可能にするための仕組みです。

通常ブラウザからWebサーバーへリクエストを送信し、返却されたレスポンスをブラウザ側へ反映するのに対し、

SignalRでは、常時接続されているため、サーバーからブラウザへ直接データを反映することができます。

Blazorでは、このSignalRをASP.NET Core SignalRというライブラリを使って実装しています。詳細は公式ドキュメントから確認することができます。

公式ドキュメントはこちら

SignalRを切断してみる１

ネットワーク環境が悪い場所では、SignalRの接続が切れる可能性があります。 SignalRの接続が切れたときの挙動をテストするには、ローカル環境では再現が難しいです。

そこでコードを実行して疑似的に回線を切断することで、切断時の挙動を再現することができます。

以下サンプルコードになります。

Index.razor


@page "/"
@inject IJSRuntime JSRuntime

<button class="btn btn-primary d-block mb-3" @onclick="ForceCloseConnectionAsync">SignalR切断（再接続の設定がされている場合は、切断後に再接続を試みる）</button>

@code{
    /// <summary>
    ///  SignalRの接続を切断（ただし、再接続の設定がされている場合は、切断後に再接続を試みる）
    /// </summary>
    private async Task ForceCloseConnectionAsync()
    {
        await JSRuntime.InvokeVoidAsync("forceCloseConnection");
    }
}

signalr.js


/*
    SignalRの接続を切断（ただし、再接続の設定がされている場合は、切断後に再接続を試みる）
*/
function forceCloseConnection() {
    Blazor._internal.forceCloseConnection();
};

SignalRを切断するには、javascriptを呼ぶ必要があります。Blazorからjavascriptを呼びだす方法については、以下の記事を参照してください。

JavaScriptを呼び出し方

BlazorでWEB開発は主にHTML, CSS, C#を使用しますが、JavaScriptの利用も避けられない場面がある。JavaScriptをBlazor内で呼び出すためには、IJSRuntimeサービスを利用する。IJSRuntimeを用いることで、C#からJavaScriptの関数を非同期的に実行可能。例として、ボタンクリックでJavaScriptのアラートを表示する方法を説明。BlazorでのJavaScript使用は最小限に留めるべきだが、必要な場面での知識は重要。

更新日：2023/07/19

javascriptでBlazor._internal.forceCloseConnection();が呼び出すと、SignalRを切断することができます。

実際にSignalRを切断してみると以下のようになります。

デフォルトでは、SignalRを切断すると、自動で再接続を試みる仕様になっています。白いモーダル画面は、再接続を試みている画面になります。

このようにして、SignalRの接続が切れた際の挙動をテストすることができます。

SignalRを切断してみる２

前セクションではSignalRを切断すると、自動的に再接続を試みていましたが、切断後に再接続を行わない方法もあります。

以下サンプルコードになります。

Index.razor


@page "/"
@inject IJSRuntime JSRuntime

<button class="btn btn-primary d-block mb-3" @onclick="DisconnectAsync">SignalR切断（再接続の設定がされていても、再接続されない）</button>

@code{
    /// <summary>
    /// SignalRの接続を切断（再接続の設定がされていても、再接続されない）
    /// </summary>
    private async Task DisconnectAsync()
    {
        await JSRuntime.InvokeVoidAsync("disconnect");
    }
}

signalr.js


/*
    SignalRの接続を切断（再接続の設定がされていても、再接続されない）
*/
function disconnect() {
    Blazor.disconnect();
}

前セクションと異なるのは、javascriptでBlazor.disconnect();が呼ばれている事です。この関数の場合は、SignalRを切断する点は同じですが、切断後に再接続を試みません。

実際にSignalRを切断してみると以下のようになります。

ボタンを押下すると、SignalRは切断されますが、再接続を試みる白いモーダルは表示されません。

SignalRが切断されている状態なので、Blazorを操作しようとすると、当然ですがエラーになります。

SignalRの接続オプションをカスタマイズする

Blazorでは、アプリケーションを開始した際に、デフォルト設定でSignalRが自動的に接続されます。

これを自動接続するのではなく、javascriptから明示的にSignalRを接続することで、オプションを設定することができます。

まず、SignalRの自動接続を無効にします。以下サンプルコードになります。

_Layout.cshtml


@using Microsoft.AspNetCore.Components.Web
@namespace Blazor_SignalR.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" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="Blazor_SignalR.styles.css" rel="stylesheet" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    @* 以下scriptタグにautostart=falseの属性を付与する *@
    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script src="js/signalr.js"></script>
</body>
</html>

_framework/blazor.server.jsへautostart="false"を付与することで、SignalRが自動接続されなくなります。

続いて、SignalRを接続するコードを書いていきます。以下サンプルコードになります。

_Layout.cshtml


/* 
    Blazorを手動で開始（SignalRを接続する）
    事前に_Layout.cshtml の以下の箇所を修正する必要あり（autostart="false" 属性を追加）
    <script src="_framework/blazor.server.js"></script> → <script src="_framework/blazor.server.js" autostart="false"></script>
*/
Blazor.start({
    reconnectionOptions: {
        maxRetries: 3,                      // SignalRが切れた場合、再接続の最大試行回数
        retryIntervalMilliseconds: 2000,    // どのくらい感覚を空けて再接続を試みるか（単位:ミリ秒）
    }
});

Blazor.startメソッドを実行することで、SignalRを接続することができます。また、引数を設定することで、SignalRが切断された際のオプションを設定することができます。

maxRetriesは、再接続を最大何回までチャレンジするかを指定できます。今回は最大３回に設定しています。

retryIntervalMillisecondsは、どのくらい間隔で再接続チャレンジを行うかを指定できます。今回は2000ミリ秒に設定しています。

SignalRを切断してみると、以下のような画面になります。

画像の赤枠部分には、コードで指定した再接続の最大試行回数が表示されるため、３になっています。ちなみにデフォルトは８です。

まとめ

今回はSignalRについて解説しました。案件によっては、SignalRのカスタマイズが必要になる場合もありますので、参考にしてみてください。

ブログ内の記事で書かれているサンプルコードは、GitHubから確認する事ができます。是非参考にしてみてください。

記事のサンプルコードはこちらから

この本では、Blazorの基本から高度なテクニックまで、実際のプロジェクトに役立つ知識を網羅しています。初心者から経験者まで、Blazorを扱うすべての開発者にとっての必読書です。この記事の執筆者も参考にした「Blazor入門」で、あなたのBlazorスキルを飛躍的に向上させませんか？

Blazor入門ブラウザで動作するC#を使ったシングルページアプリケーション開発／増田智明【3000円以上送料無料】

合わせて読みたい

@をエスケープする方法

Blazorにおいて、＠記号は予約文字として扱われるため、文字列として表示する際にはエスケープが必要です。＠をエスケープして表示するためには、＠を２回連続して書くことで実現できます。この技術は、一般的なケースではあまり使用されないかもしれませんが、知っておくと便利な場面もあるでしょう。

更新日：2023/07/20

コンポーネントについて

Blazorは.NET CoreベースのSPA作成フレームワークで、C#とHTMLを使用。この記事はBlazorとRazorコンポーネントの基本を紹介。Blazorアプリは[コンポーネント駆動]で、再利用可能な部品（.razor拡張子）から構成。コンポーネント名は大文字始まりが必要。また、HTMLとC#を組み合わせて、イベントハンドリングやデータバインディングが行える。

更新日：2023/09/06

前の記事へ次の記事へ