次の方法で共有

クイックスタート:Visual Studio Code Extensionで開発

Azure Web PubSubは、開発者がWebSocketsや公開・登録パターンを使ってリアルタイムメッセージングウェブアプリケーションを簡単に構築するのに役立ちます。

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

[前提条件]

プロジェクトを複製する

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

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

  3. Git: Clone と入力し、Enter キーを押します。

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

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

    注

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

  5. プロジェクトを複製するフォルダーを選択します。

  6. Visual Studio Codeで「 Open -> Open Folder 」を選択して azure-webpubsub/samples/javascript/chatapp/nativeapi してください。

Azure にサインインする

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

  2. [Azure: サインイン] を選択し、プロンプトに従って認証します。

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

Create an Azure Web PubSub Service

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. 拡張機能のプロンプトに従って、次の値を入力します。

    Prompt 価値
    サブスクリプションの選択 使用する 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 が表示されます。 新しいアイテムを右クリックして「ローカルトンネルをアタッチ」を選択してください

  6. トンネル対応のイベントハンドラを作成するよう通知がポップアップします。 「はい」ボタンをクリックしてください。 次に、拡張の指示に従って次の値を入力します

    Prompt 価値
    選択されたユーザーイベント 全て選択
    選択システムイベント 接続を選択
    入力サーバーポート ここで8080の登場

  7. 拡張機能はローカルトンネルツールを実行するための新しい端末を作成し、ローカルトンネルポータルを開くよう通知します。 「はい」ボタンをクリックするか、「http://localhost:4000"」を開きます。ウェブブラウザで手動でポータルを閲覧できます。

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

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

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

    npm install

  3. アクティビティバーで Azure アイコンを開き、Azure Web PubSubリソース my-wpsを探してください。 その後、リソース項目を右クリックして 「Copy Connection String」を選択します。 接続文字列はクリップボードにコピーされます

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

    node server.js "<connection-string>"

  5. ブラウザで http://localhost:8080/index.html 開いてチャットアプリを試してください。

ヒント

問題がありますか？ Azure Web PubSubリポジトリでイシューを開くことで、GitHubでお知らせください。

  • Last updated on