AWS AppSync でのサーバーレス WebSockets を利用した汎用的な Pub/sub API の作成 - AWS AppSync
Pub/sub API を使用する既存のアプリケーションへの pub-sub API の実装

AWS AppSync でのサーバーレス WebSockets を利用した汎用的な Pub/sub API の作成

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

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

Pub/sub API を作成して設定する

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

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

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

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

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

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

  5. WebSockets を使用して、動作する Pub/sub API を自動的に生成するように選択できます。今のところこの機能はオフにしておくことをおすすめします。[次へ ]を選択します。

  6. [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 オペレーションコードを含む 1 つのファイルをダウンロードします。

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

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

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

    $ npm start

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

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

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

どちらのブラウザーインスタンスも robots チャンネルに登録され、ウェブアプリケーションの下部に表示される公開データをリアルタイムで受信します。

例: Pub/sub API 用 React アプリ

スキーマ、リゾルバー、オペレーションなど、必要なすべての 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
    }
}

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

既存のアプリケーションにリアルタイム機能を実装するだけであれば、この汎用的な pub/sub API 構成をあらゆるアプリケーションや API テクノロジーに簡単に統合できます。GraphQL では、単一の API エンドポイントを使用して 1 つのネットワーク呼び出しで 1 つ以上のデータソースのデータに安全にアクセスし、操作し、組み合わせるという利点がありますが、AWS AppSync のリアルタイム機能を活用するために、既存の REST ベースのアプリケーションを一から変換または再構築する必要はありません。例えば、既存の CRUD ワークロードを別の API エンドポイントに配置し、クライアントは既存のアプリケーションから汎用 pub/sub API に対してリアルタイムおよび pub/sub のみを目的としてメッセージまたはイベントを送受信できます。