次の方法で共有


Azure Web PubSub への WebSocket 接続を開始する

クライアントから Azure Web PubSub サービスへの接続には、標準の WebSocket プロトコルが使用されます。 WebSocket クライアントに対応した言語を使用して、サービスのクライアントを作成できます。 この記事では、さまざまな言語の WebSocket クライアントのサンプルをいくつか確認します。

承認

Web PubSub では、JSON Web Token (JWT) を使用してクライアントの検証と認可を行います。 クライアントでは、サービスへの接続時に、トークンを access_token クエリ パラメーターに配置するか、Authorization ヘッダーに配置することができます。

一般的に、クライアントではまずアプリ サーバーと通信し、サービスの URL とトークンを取得します。 その後、クライアントでは受け取った URL とトークンを使用して、サービスへの WebSocket 接続を開きます。

また、ポータルでは、トークンを使用してクライアント URL を動的に生成するツールも提供します。 このツールは、簡単なテストを行うのに役立ちます。

クライアント URL ジェネレーターの場所を示すスクリーンショット。

Note

トークンを生成するときには、必要なロールのみを含めるようにしてください。

次のセクションでは、このサンプル ワークフローを簡略化するために、ポータルから一時的に生成された URL を使用して、クライアントが接続できるようにします。 その値を表すのに、<Client_URL_From_Portal> を使用します。 生成されるトークンの有効期限は既定で 60 分なので、有効期限が切れた場合は、忘れずに再生成してください。

このサービスでは、シンプルな WebSocket クライアントと、PubSub WebSocket クライアントの 2 種類の WebSocket クライアントがサポートされています。 ここでは、これら 2 種類のクライアントがサービスに接続する方法について説明します。 これらのクライアントの詳細については、「Azure Web PubSub の WebSocket クライアント プロトコル」を参照してください。

依存関係

最新のブラウザーでは、WebSocket API がネイティブでサポートされています。

シンプル WebSocket クライアント

HTML ページの script ブロック内:

<script>
    // Don't forget to replace this <Client_URL_From_Portal> with the value fetched from the portal
    let ws = new WebSocket("<Client_URL_From_Portal>");
    ws.onopen = () => {
        // Do things when the WebSocket connection is established
    };

    ws.onmessage = event => {
        // Do things when messages are received.
    };
</script>

PubSub WebSocket クライアント

HTML ページの script ブロック内:

<script>
    // Don't forget to replace this <Client_URL_From_Portal> with the value fetched from the portal
    let ws = new WebSocket("<Client_URL_From_Portal>", 'json.webpubsub.azure.v1');
    ws.onopen = () => {
        // Do things when the WebSocket connection is established
    };

    ws.onmessage = event => {
        // Do things when messages are received.
    };
</script>

次のステップ

この記事では、ポータルから生成された URL を使用してサービスに接続する方法について説明しました。 実際のアプリケーションで、クライアントからアプリケーション サーバーに通信して URL を取得する方法については、これらのチュートリアルを参照し、サンプルを確認してください。