チュートリアル: SignalR 2 を使用したリアルタイムチャット

[アーティクル]
07/13/2023

このチュートリアルでは、SignalR を使用してリアルタイムチャットアプリケーションを作成する方法について説明します。 SignalR を空の ASP.NET Web アプリケーションに追加し、メッセージを送信および表示する HTML ページを作成します。

このチュートリアルでは、次の作業を行いました。

プロジェクトのセットアップ
サンプルを実行する
コードを確認する

警告

このドキュメントは、SignalR の最新バージョン用ではありません。 SignalR の ASP.NET Coreを見てみましょう。

前提条件

Visual Studio 2017 と ASP.NET および開発ワークロード。

プロジェクトをセットアップする

このセクションでは、Visual Studio 2017 と SignalR 2 を使用して空の ASP.NET Web アプリケーションを作成し、SignalR を追加し、チャットアプリケーションを作成する方法について説明します。

Visual Studio で、ASP.NET Web アプリケーションを作成します。
[ 新しい ASP.NET プロジェクト - SignalRChat ] ウィンドウで、[ 空] を 選択したまま、[ OK] を選択します。
ソリューションエクスプローラーでプロジェクトを右クリックし、[新しい項目の追加>] を選択します。
[ 新しい項目の追加 - SignalRChat] で、[ インストール済みの>Visual C#>Web>SignalR ] を選択し、[ SignalR Hub Class (v2)] を選択します。
クラスに ChatHub という名前を付け、プロジェクトに追加します。

この手順では、 ChatHub.cs クラスファイルを作成し、SignalR をサポートする一連のスクリプトファイルとアセンブリ参照をプロジェクトに追加します。

新しい ChatHub.cs クラスファイルのコードを次のコードに置き換えます。

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

ソリューションエクスプローラーでプロジェクトを右クリックし、[新しい項目の追加>] を選択します。
[ 新しい項目の追加 - SignalRChat ] で、[ インストール済みの>Visual C#>Web ] を選択し、[ OWIN スタートアップクラス] を選択します。
クラスに Startup という名前を付け、プロジェクトに追加します。

Startup クラスの既定のコードを次のコードに置き換えます。

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

ソリューションエクスプローラーで、プロジェクトを右クリックし、[HTML ページの追加]> を選択します。
新しいページ インデックス に名前を付け、[ OK] を選択します。
ソリューションエクスプローラーで、作成した HTML ページを右クリックし、[スタートページとして設定] を選択します。

HTML ページの既定のコードを次のコードに置き換えます。

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Simple Chat</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion">
        </ul>
    </div>
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-3.1.1.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>
    <!--Add script to update the page and send messages.--> 
    <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub. 
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message. 
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.  
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub. 
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment. 
                    $('#message').val('').focus();
                });
            });
        });
    </script>
</body>
</html>

[ソリューションエクスプローラー] で、[スクリプト] を展開します。

jQuery と SignalR のスクリプトライブラリがプロジェクトに表示されます。

重要

パッケージマネージャーは、SignalR スクリプトの新しいバージョンをインストールしている可能性があります。
コードブロック内のスクリプト参照が、プロジェクト内のスクリプトファイルのバージョンに対応していることを確認します。

元のコードブロックからのスクリプト参照:
```


<script src="Scripts/jquery-3.1.1.min.js" ></script>

<script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
```
一致しない場合は、 .html ファイルを更新します。
メニューバーで、[ファイル][すべて保存] の順に>選択します。

サンプルを実行する

ツールバーで [ スクリプトデバッグ ] をオンにし、再生ボタンを選択してデバッグモードでサンプルを実行します。
ブラウザーが開いたら、チャット ID の名前を入力します。
ブラウザーから URL をコピーし、他の 2 つのブラウザーを開き、URL をアドレスバーに貼り付けます。
各ブラウザーで、一意の名前を入力します。
次に、コメントを追加し、[送信] を選択 します。他のブラウザーでこれを繰り返します。コメントはリアルタイムで表示されます。

Note

この単純なチャットアプリケーションでは、サーバー上のディスカッションコンテキストは維持されません。ハブは、現在のすべてのユーザーにコメントをブロードキャストします。後でチャットに参加したユーザーには、参加時から追加されたメッセージが表示されます。

チャットアプリケーションが 3 つの異なるブラウザーでどのように実行されるかを確認します。 Tom、Anand、および Susan がメッセージを送信すると、すべてのブラウザーがリアルタイムで更新されます。
ソリューションエクスプローラーで、実行中のアプリケーションの [スクリプトドキュメント] ノードを調べます。 SignalR ライブラリが実行時に生成する hubs という名前のスクリプトファイルがあります。このファイルは、jQuery スクリプトとサーバー側コードの間の通信を管理します。

コードを調べる

SignalRChat アプリケーションは、2 つの基本的な SignalR 開発タスクを示しています。ハブを作成する方法を示します。サーバーは、そのハブをメイン調整オブジェクトとして使用します。ハブは SignalR jQuery ライブラリを使用してメッセージの送受信を行います。

ChatHub.cs の SignalR Hubs

上記のコードサンプルでは、クラスは ChatHub クラスから Microsoft.AspNet.SignalR.Hub 派生しています。クラスからの Hub 派生は、SignalR アプリケーションを構築するのに便利な方法です。ハブクラスにパブリックメソッドを作成し、Web ページ内のスクリプトから呼び出すことで、これらのメソッドを使用できます。

チャットコードでは、クライアントはメソッドを ChatHub.Send 呼び出して新しいメッセージを送信します。ハブはを呼び出 Clients.All.broadcastMessageして、すべてのクライアントにメッセージを送信します。

メソッドは Send 、いくつかのハブの概念を示しています。

クライアントが呼び出すことができるように、ハブでパブリックメソッドを宣言します。
動的プロパティを Microsoft.AspNet.SignalR.Hub.Clients 使用して、このハブに接続されているすべてのクライアントと通信します。

クライアントで関数 (関数など) を broadcastMessage 呼び出して、クライアントを更新します。

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        // Call the broadcastMessage method to update clients.
        Clients.All.broadcastMessage(name, message);
    }
}

index.htmlの SignalR と jQuery

コードサンプルの index.html ページは、SignalR jQuery ライブラリを使用して SignalR ハブと通信する方法を示しています。このコードでは、多くの重要なタスクが実行されます。ハブを参照するプロキシを宣言し、サーバーがクライアントにコンテンツをプッシュするために呼び出すことができる関数を宣言し、ハブにメッセージを送信するための接続を開始します。

var chat = $.connection.chatHub;

Note

JavaScript では、サーバークラスとそのメンバーへの参照は camelCase である必要があります。このコードサンプルでは、JavaScript の C# ChatHub クラスをとして chatHub参照しています。

このコードブロックでは、スクリプトにコールバック関数を作成します。

chat.client.broadcastMessage = function (name, message) {
        // Html encode display name and message. 
        var encodedName = $('<div />').text(name).html();
        var encodedMsg = $('<div />').text(message).html();
        // Add the message to the page. 
        $('#discussion').append('<li><strong>' + encodedName
            + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    };

サーバー上のハブクラスは、この関数を呼び出して、各クライアントにコンテンツの更新をプッシュします。コンテンツを表示する前に HTML エンコードする 2 行は省略可能であり、スクリプトの挿入を防ぐ適切な方法を示します。

このコードでは、ハブとの接続を開きます。

$.connection.hub.start().done(function () {
        $('#sendmessage').click(function () {
            // Call the Send method on the hub. 
            chat.server.send($('#displayname').val(), $('#message').val());
            // Clear text box and reset focus for next comment. 
            $('#message').val('').focus();
        });
    });

Note

この方法により、イベントハンドラーが実行される前に、コードによって接続が確立されます。

このコードは、接続を開始し、HTML ページの [送信 ] ボタンでクリックイベントを処理する関数を渡します。

コードを取得する

完了したプロジェクトのダウンロード

その他のリソース

SignalR の詳細については、次のリソースを参照してください。

次のステップ

このチュートリアルでは、次のことを行います。

プロジェクトのセットアップ
サンプルを実行しました
コードを調べた

SignalR と MVC 5 の使用方法については、次の記事に進んでください。

SignalR 2 と MVC 5

チュートリアル: SignalR 2 を使用したリアルタイムチャット

前提条件

プロジェクトをセットアップする

サンプルを実行する

コードを調べる

ChatHub.cs の SignalR Hubs

index.htmlの SignalR と jQuery

コードを取得する

その他のリソース

次のステップ

フィードバック

フィードバック

その他のリソース

チュートリアル: SignalR 2 を使用したリアルタイム チャット

前提条件

プロジェクトをセットアップする

サンプルを実行する

コードを調べる

ChatHub.cs の SignalR Hubs

index.htmlの SignalR と jQuery

コードを取得する

その他のリソース

次のステップ

フィードバック

フィードバック

その他のリソース

チュートリアル: SignalR 2 を使用したリアルタイムチャット