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

# でのサーバーレス WebSockets を使用した汎用 pub/sub APIs の作成 AWS AppSync
<a name="aws-appsync-real-time-create-generic-api-serverless-websocket"></a>

**重要**  
2025 年 3 月 13 日以降、 AWS AppSync Events を使用して WebSockets を搭載したリアルタイム PubSub API を構築できます。詳細については、「*AWS AppSync Events デベロッパーガイド*」の「[WebSocket 経由でイベントを公開する](https://docs.aws.amazon.com/appsync/latest/eventapi/publish-websocket.html)」を参照してください。

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

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

## Pub/sub API を作成して設定する
<a name="aws-appsync-real-time-enhanced-filtering-using-pub-sub-apis"></a>

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

1. にサインイン AWS マネジメントコンソール し、[AppSync コンソール](https://console.aws.amazon.com/appsync/)を開きます。

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

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

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

1. [プライベート API](https://docs.aws.amazon.com/appsync/latest/devguide/using-private-apis.html) 機能を有効にすることもできますが、現時点ではオフにしておくことをおすすめします。[**次へ** ]を選択します。

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

1. **[API を作成]** を選択し、数分待ってください。アカウントに新しい事前設定された AWS AppSync pub/sub API が作成されます AWS 。

API は、 AWS AppSync の組み込みローカルリゾルバー (ローカルリゾルバーの使用の詳細については、*AWS AppSync デベロッパーガイド*」の[「チュートリアル: ローカルリゾルバー](https://docs.aws.amazon.com/appsync/latest/devguide/tutorial-local-resolvers-js.html)」を参照) を使用して、複数の一時 pub/sub チャネルと WebSocket 接続を管理します。これにより、チャネル名のみに基づいてサブスクライブされたクライアントに自動的にデータが配信およびフィルタリングされます。API コールは API キーを使用して承認されます。

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

1. まず、ローカルマシンで [NPM](https://www.npmjs.com/get-npm) を使って定型的な React アプリを作成します。

   ```
   $ npx create-react-app mypubsub-app 
   $ cd mypubsub-app
   ```
**注記**  
この例では、[Amplify ライブラリ](https://docs.amplify.aws/lib/)を使用してクライアントをバックエンド API に接続します。ただし、Amplify CLI プロジェクトをローカルで作成する必要はありません。この例では React が最適なクライアントですが、Amplify ライブラリは iOS、Android、Flutter クライアントもサポートしており、これらの異なるランタイムでも同じ機能を提供します。サポートされている Amplify クライアントは、 AWS AppSync GraphQL API バックエンドとやり取りするためのシンプルな抽象化を提供します。これには、AppSync リアルタイム WebSocket プロトコルと完全に互換性がある組み込み WebSocket 機能が含まれます。 [AWS AppSync WebSocket ](https://docs.aws.amazon.com/appsync/latest/devguide/real-time-websocket-client.html)  

   ```
   $ npm install @aws-amplify/api
   ```

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

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

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

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

   ```
   $ npm start
   ```

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

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

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

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

![\[例: Pub/sub API 用 React アプリ\]](http://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/images/pub-sub-react.png)


スキーマ、リゾルバー、オペレーションなど、必要なすべての 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 の実装
<a name="aws-appsync-real-time-enhanced-filtering-existing-apps"></a>

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