クイックスタート: Web PubSub for Socket.IO をアプリに組み込む

このクイックスタートでは、Web PubSub for Socket.IO リソースを作成し、それを Socket.IO アプリにすばやく組み込んで開発を簡略化し、デプロイを高速化して、複雑さを排除してスケーラビリティを実現する方法を示します。

このクイックスタートに示されているコードは CommonJS にあります。 ECMAScript モジュールを使用する場合は、Azure Web PubSub を使用した Socket.IO のチャット デモを参照してください。

重要

この記事に示す生の接続文字列は、デモンストレーションのみを目的としています。

接続文字列には、アプリケーションが Azure Web PubSub サービスにアクセスするために必要な認可情報が含まれています。 接続文字列内のアクセス キーは、サービスのルート パスワードに似ています。 運用環境では、常にアクセス キーを保護してください。 Azure Key Vault を使ってキーの管理とローテーションを安全に行い、WebPubSubServiceClient を使って接続をセキュリティ保護します。

アクセス キーを他のユーザーに配布したり、ハードコーディングしたり、他のユーザーがアクセスできるプレーンテキストで保存したりしないでください。 キーが侵害された可能性があると思われる場合は、キーをローテーションしてください。

前提条件

• アクティブなサブスクリプションが含まれる Azure アカウント。 アカウントがない場合は、無料アカウントを作成できます。
• Socket.IO ライブラリに関するある程度の知識。

Web PubSub for Socket.IO リソースを作成する

Web PubSub for Socket.IO を作成するには、次のワンクリック ボタンを使用して作成するか、以下のアクションに従って Azure portal で検索できます。

• 次のボタンを使用して、Azure で Web PubSub for Socket.IO リソースを作成する

  

• Azure portal 検索バーから検索する

  1. Azure ポータルにアクセスします。

  2. 検索バーで socket.io を検索し、[Web PubSub for Socket.IO] を選択します。

     

• マーケットプレースからインストールする

  1. Azure ポータルにアクセスします。

  2. Azure portal の左上にある [リソースの作成] ボタンを選択します。 検索ボックスに「socket.io」と入力し、Enter キーを押します。 検索結果で Web PubSub for Socket.IO を選択します。

     

  3. ポップアップで [作成] をクリックします。

     

Socket.IO ライブラリと Web PubSub for Socket.IO を使用したメッセージ送信

次の手順では、Socket.IO プロジェクトを作成し、Web PubSub for Socket.IO と統合します。

Node プロジェクトを初期化し、必要なパッケージをインストールする

mkdir quickstart
cd quickstart
npm init
npm install @azure/web-pubsub-socket.io socket.io-client

サーバー コードを記述する

server.js ファイルを作成し、次のコードを追加して Socket.IO サーバーを作成し、Web PubSub for Socket.IO と統合します。

この記事では、デモ目的でのみ生の接続文字列が表示されます。 運用環境では、常にアクセス キーを保護してください。 Azure Key Vault を使ってキーの管理とローテーションを安全に行い、WebPubSubServiceClient を使って接続を保護します。

/*server.js*/
const { Server } = require("socket.io");
const { useAzureSocketIO } = require("@azure/web-pubsub-socket.io");

let io = new Server(3000);

// Use the following line to integrate with Web PubSub for Socket.IO
useAzureSocketIO(io, {
    hub: "Hub", // The hub name can be any valid string.
    connectionString: process.argv[2]
});

io.on("connection", (socket) => {
    // Sends a message to the client
    socket.emit("hello", "world");

    // Receives a message from the client
    socket.on("howdy", (arg) => {
        console.log(arg);   // Prints "stranger"
    })
});

クライアント コードを記述する

client.js ファイルを作成し、次のコードを追加してクライアントを Web PubSub for Socket.IO と接続します。

/*client.js*/
const io = require("socket.io-client");

const socket = io("<web-pubsub-socketio-endpoint>", {
    path: "/clients/socketio/hubs/Hub",
});

// Receives a message from the server
socket.on("hello", (arg) => {
    console.log(arg);
});

// Sends a message to the server
socket.emit("howdy", "stranger")

Web PubSub for Socket.IO を使用する場合、クライアントをサービスに接続するには <web-pubsub-socketio-endpoint> と path が必要です。 <web-pubsub-socketio-endpoint> と path は Azure portal で確認できます。

1. Web PubSub for Socket.IO のキー ブレードに移動します

2. ハブ名を入力し、クライアント エンドポイントとクライアント パスをコピーします

   

アプリを実行する

1. サーバー アプリを実行します。

   node server.js "<connection-string>"
   

   <connection-string> は、Web PubSub for Socket.IO リソースにアクセスするためのエンドポイントとキーを含む接続文字列です。 接続文字列は、Azure portal でも確認できます

   

2. 別のターミナルでクライアント アプリを実行します。

   node client.js