英語で読む

次の方法で共有

クイック スタート: Visual Studio Code 拡張機能を使用した開発

  • [アーティクル]

Azure Web PubSub は、開発者が WebSocket とパブリッシュ/サブスクライブ パターンを使用してリアルタイム メッセージング Web アプリケーションを簡単に構築するのに役立ちます。

このチュートリアルでは、Visual Studio Code を使用して、Azure Web PubSub を使用してチャット アプリケーションを作成します。

前提条件

プロジェクトの複製

  1. 新しい Visual Studio Code ウィンドウを開きます。

  2. F1 キーを押してコマンド パレットを開きます。

  3. 「Git: Clone」と入力して Enter キーを押してください。

  4. サンプル プロジェクトを複製するには、次の URL を入力してください。

    git 
    https://github.com/Azure/azure-webpubsub.git

    注意

    このチュートリアルでは JavaScript プロジェクトを使いますが、手順は言語に依存しません。

  5. プロジェクトを複製するフォルダーを選択してください。

  6. Visual Studio Code で [開く] -> [フォルダーを開く] azure-webpubsub/samples/javascript/chatapp/nativeapi を選択します。

Azure へのサインイン

  1. F1 キーを押してコマンド パレットを開きます。

  2. [Azure: サインイン] を選び、画面の指示に従って認証を行います。

  3. サインインしたら、Visual Studio Code に戻ります。

Azure Web PubSub サービスを作成する

Visual Studio Code 用の Azure Web PubSub 拡張機能を使用すると、ユーザーは Azure Web PubSub サービスとその開発者ツール (Azure Web PubSub ローカル トンネル ツールなど ) をすばやく作成、管理、利用できます。 このシナリオでは、新しい Azure Web PubSub Service リソースを作成し、アプリケーションをホストするように構成します。 Web PubSub 拡張機能をインストールすると、Visual Studio Code の Azure コントロール パネルでその機能にアクセスできます。

  1. F1 キーを押してコマンド パレットを開き、Azure Web PubSub: Create Web PubSub Service コマンドを実行します。

  2. 拡張機能でダイアログが表示されたら、次の値を入力してください。

    プロンプト 値
    サブスクリプションの選択 使用する Azure サブスクリプションを選択します。
    リソース グループの選択 使用する Azure リソース グループを選択します。
    サービスの名前を入力します 「my-wps」と入力します。
    場所を選択します。 近くの Azure リージョンを選択してください。
    料金レベルを選択します 使用する価格レベルを選択します。
    ユニット数を選択する 使用するユニット数を選択します。

    [Azure アクティビティ ログ] パネルが開き、デプロイの進行状況が表示されます。 このプロセスが完了するには数分かかることがあります。

  3. このプロセスが完了すると、Visual Studio Code に通知が表示されます。

ハブ設定を作成する

  1. Visual Studio Code の左側にあるアクティビティ バーで Azure アイコンを開きます。

    注意

    アクティビティ バーが非表示の場合、拡張機能にアクセスすることはできません。 [外観>の表示] の [アクティビティ バーの表示>] をクリックしてアクティビティ バーを表示する

  2. リソース ツリーで、作成した Azure Web PubSub リソース my-wps を見つけてクリックして展開します

  3. 項目ハブ 設定を右クリックし、[ハブ設定の作成] を選択します。

  4. ハブ名として入力 sample_chat し、ハブ設定を作成します。 追加のイベント ハンドラーを作成するかどうかは関係ありません。 完了として表示される進行状況の通知を待ちます

  5. 項目ハブ 設定の下に、新しいサブ項目ハブ sample_chatが表示されます。 新しい項目を右クリックし、[Attach Local Tunnel]\(ローカル トンネルのアタッチ\) を選択します

  6. トンネルが有効なイベント ハンドラーを作成するように通知が表示されます。 [はい] ボタンをクリックします。 次に、拡張機能のプロンプトに従って次の値を入力します。

    プロンプト Value
    ユーザー イベントの選択 すべて選択
    システム イベントの選択 [接続済み] を選択 する
    入力サーバー ポート 「8080」と入力 します

  7. 拡張機能によって、ローカル トンネル ツールを実行する新しいターミナルが作成され、ローカル トンネル ポータルを開くよう通知が表示されます。 [はい] ボタンをクリックするか、"; をhttp://localhost:4000"開きます。Web ブラウザーで手動でポータルを表示します。

サーバー アプリケーションを実行する

  1. 作業ディレクトリが azure-webpubsub/samples/javascript/chatapp/nativeapi

  2. Node.js の依存関係をインストールする

    Bash 
    npm install

  3. アクティビティ バーで Azure アイコンを開き、Azure Web PubSub リソースmy-wpsを見つけます。 次に、リソース項目を右クリックし、[接続文字列のコピー] を選択 します。 接続文字列がクリップボードにコピーされます

  4. コピーした接続文字列でサーバー アプリケーションを実行する

    Bash 
    node server.js "<connection-string>"

  5. ブラウザーで開 http://localhost:8080/index.html き、チャット アプリケーションを試します。

ヒント

問題がある場合は、 Azure Web PubSub リポジトリで問題を開いて、GitHub でお知らせください。