WebSockets でのサーバーレスAPIsによる汎用 pub/sub の作成 AWS AppSync - AWS AppSync
pub-sub の使用 APIs既存のアプリケーションAPIsへの pub-sub の実装

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

WebSockets でのサーバーレスAPIsによる汎用 pub/sub の作成 AWS AppSync

一部のアプリケーションでは、クライアントが特定のチャネルまたはトピックをリッスンする場合にのみ、シンプル WebSocket APIsが必要です。特定の形状や厳密に型付けされた要件がない汎用JSONデータは、これらのチャネルの 1 つを純粋でシンプルなパブリッシュサブスクライブ (pub/sub) パターンでリッスンしているクライアントにプッシュできます。

AWS AppSync を使用して、APIバックエンド側とクライアント側の両方で GraphQL コードを自動的に生成することで、GraphQL の知識がほとんどまたはまったくないシンプルな pub/sub WebSocket APIs を数分で実装します。

pub-sub の作成と設定 APIs

開始するには、次のことを行います。

  1. にサインイン AWS Management Console し、AppSync コンソール を開きます。

    1. ダッシュボード で、「 の作成API」を選択します。

  2. 次の画面で、リアルタイム の作成 APIを選択し、次へ を選択します。

  3. pub/sub のわかりやすい名前を入力しますAPI。

  4. プライベートAPI機能を有効にすることはできますが、現時点ではオフにしておくことをお勧めします。[Next (次へ)] を選択します。

  5. API を使用して、動作中のパブ/サブを自動的に生成することを選択できます WebSockets。今のところこの機能はオフにしておくことをおすすめします。[Next (次へ)] を選択します。

  6. Create API を選択し、数分間待ちます。アカウントに新しい事前設定された AWS AppSync pub/sub APIが作成されます AWS 。

API は、 AWS AppSyncの組み込みローカルリゾルバー (ローカルリゾルバーの使用の詳細については、AWS AppSync 「 デベロッパーガイド」の「チュートリアル: ローカルリゾルバー」を参照してください) を使用して、複数の一時的な pub/sub チャネルと WebSocket 接続を管理します。これにより、チャネル名のみに基づいて、サブスクライブされたクライアントにデータが自動的に配信およびフィルタリングされます。API 呼び出しは APIキーで承認されます。

API がデプロイされると、クライアントコードを生成し、クライアントアプリケーションと統合するための追加のステップがいくつか表示されます。クライアントを素早く統合する方法の例として、このガイドではシンプルな React Web アプリケーションを使用します。

  1. まず、ローカルマシンNPMで を使用してボイラープレート React アプリケーションを作成します。

    $ npx create-react-app mypubsub-app 
$ cd mypubsub-app
    注記

    この例では、Amplify ライブラリを使用してクライアントをバックエンド に接続しますAPI。ただし、Amplify CLIプロジェクトをローカルで作成する必要はありません。この例では React が最適なクライアントですが、Amplify ライブラリは iOS、Android、Flutter クライアントもサポートしており、これらの異なるランタイムでも同じ機能を提供します。サポートされている Amplify クライアントは、AWS AppSync リアルタイム WebSocket プロトコル と完全に互換性のある組み込み WebSocket機能など、数行のコードで AWS AppSync GraphQL APIバックエンドとやり取りするためのシンプルな抽象化を提供します。

    $ npm install @aws-amplify/api

  2. AWS AppSync コンソールで、 を選択しJavaScript、ダウンロードして、API設定の詳細と生成された GraphQL オペレーションコードを含む単一のファイルをダウンロードします。

  3. ダウンロードしたファイルを React プロジェクトの /src フォルダーにコピーします。

  4. 次に、既存のボイラープレート src/App.js ファイルの内容を、コンソールにあるサンプルクライアントコードに置き換えます。

  5. 以下のコマンドを使用して、アプリケーションをローカルで構築し起動します。

    $ npm start

  6. リアルタイムデータの送受信をテストするには、2 つのブラウザウィンドウを開いてアクセスします。localhost:3000。 サンプルアプリケーションは、 という名前のハードコードされたチャネルに汎用JSONデータを送信するように設定されています。robots.

  7. ブラウザウィンドウの 1 つで、テキストボックスに次の BLOB JSON を入力し、送信 をクリックします。

    {
  "robot":"r2d2",
  "planet": "tatooine"
}

両方のブラウザインスタンスが にサブスクライブされている robots は、ウェブアプリケーションの下部に表示される公開済みデータをリアルタイムでチャネルして受信します。

pub/sub の React アプリの例 API

スキーマ、リゾルバー、オペレーションなど、必要なすべての GraphQL APIコードが自動的に生成され、一般的な pub/sub ユースケースが有効になります。バックエンドでは、次のような GraphQL ミューテーションを使用して、 AWS AppSyncのリアルタイムエンドポイントにデータが公開されます。

mutation PublishData {
    publish(data: "{\"msg\": \"hello world!\"}", name: "channel") {
        data
        name
    }
}

サブスクライバーは、関連する GraphQL サブスクリプションを使用して特定の一時チャンネルに送信された公開データにアクセスします。

subscription SubscribeToData {
    subscribe(name:"channel") {
        name
        data
    }
}

既存のアプリケーションAPIsへの pub-sub の実装

既存のアプリケーションにリアルタイム機能を実装する必要がある場合は、この汎用 pub/sub API設定を任意のアプリケーションまたはAPIテクノロジーに簡単に統合できます。単一のAPIエンドポイントを使用して GraphQL を使用した 1 回のネットワークコールで 1 つ以上のデータソースのデータに安全にアクセスし、操作し、組み合わせる利点がありますが、 AWS AppSyncのリアルタイム機能を活用するために、既存の RESTベースのアプリケーションをゼロから変換または再構築する必要はありません。例えば、クライアントが既存のアプリケーションから汎用pub/sub API for real-time and pub/sub目的にのみメッセージまたはイベントを送受信する別のAPIエンドポイントに既存のCRUDワークロードを含めることができます。