なんかいろいろしてみます

Aug 6, 2021 - 2 minute read - Azure

Azure SignalR Service でチャットを動かしてみる

Azure SignalR Service を利用して,ブラウザ上でチャットのサンプルを動作させます.

SignalR 概要

  • https://docs.microsoft.com/ja-jp/aspnet/core/signalr/introduction?view=aspnetcore-5.0
  • ブラウザなどからリアルタイム通信を行うためのライブラリ
  • 内部的にはWebSocketやポーリングなどを利用して双方向での通信を実現している
  • 利用者は内部の通信処理を意識することなくブラウザにリアルタイム通信機能を追加できる
  • 自前実装には別途サーバー側の実装も必要

Azure SignalR Service 概要

チャットアプリのサンプル実行

Azure SignalR Service 設定

  • Azure ポータルから SignalR Service を作成

  • Service modeServerless にして作成

  • 作成後 KeysConnection string を控えておく

Azure Function 設定

  • Azure ポータルから Function App を作成

Function 作成

開発環境

  • https://docs.microsoft.com/ja-jp/azure/azure-signalr/signalr-quickstart-azure-functions-csharp
  • 上記のプロジェクトをCloneして, C# 用の Function プロジェクトsignalr-service-quickstart-serverless-chat\src\chat\csharp\FunctionApp.sln を Visual Studio で開く

  • Azure 環境にアップロードするため,パッケージのバージョンを更新

  • プロジェクトを右クリックから Manage NuGet Packages... を開き以下を設定

    • Microsoft.NET.Sdk.Function3.0.13 に更新
    • Microsoft.Azure.WebJobs.Extensions.SignalRService1.3.0 に更新
    • Microsoft.Azure.WebJobs.Extensions4.0.1 を追加
    • Microsoft.Azure.WebJobs.Extensions.Http3.0.12 を追加
  • Function.cs 内では SignalR 接続処理を行う negotiate と送受信データを処理する messages が実装されています

サンプルプロジェクトのローカル実行

  • local.settings.sample.jsonlocal.settings.json に名前変更
  • local.settings.jsonAzureSignalRConnectionString に Azure SignalR Service 作成時に控えておいた Connection string を入力
  • 複数のブラウザでアクセスすることでチャット機能を確認できる

サンプルプロジェクトの Azure 実行

  • 作成した Function プロジェクトを Azure にアップロード
  • プロジェクト右クリックから Publish を選択
  • アップロード先に Azure を選択し,アップロードする Azure Function を選択
  • アップロード先の Azure Function を指定できたら, Publish からアップロードを行う

  • アップロードに成功すると Azure ポータルの Azure Function の関数画面に messagenegotiate が確認できる

  • 作成した SignalR Service に接続するために Azure Function に接続文字列を設定する
  • ConfigurationApplication settings から New application setting を行う
  • Name に AzureSignalRConnectionString と Value に SignalR Service 作成時に控えた Connection string を入力
  • 外部からの接続を許可するために CORSEnable Access-Control-Allow-Credentials にチェック
  • https://azure-samples.github.io を設定
  • 複数のブラウザでアクセスすることでチャット機能を確認できる

まとめ

  • まずはブラウザ間でSignalRを利用したチャットアプリが動くことが確認できた.