本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 在 中建立由無伺服器 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。如需詳細資訊，請參閱《AppSync Events 開發人員指南》中的[透過 WebSocket 發佈](https://docs.aws.amazon.com/appsync/latest/eventapi/publish-websocket.html)事件。 *AWS AppSync *

有些應用程式只需要簡單的 WebSocket APIs其中用戶端會接聽特定的頻道或主題。沒有特定形狀或強烈類型需求的一般 JSON 資料可以推送到以純且簡單的發佈訂閱 (pub/sub) 模式收聽這些頻道之一的用戶端。

Use AWS AppSync 透過在 APIs 後端和用戶端上自動產生 GraphQL 程式碼，在幾分鐘內實作幾乎沒有 GraphQL 知識的簡單 pub/sub WebSocket API。 GraphQL 

## 建立和設定 pub-sub APIs
<a name="aws-appsync-real-time-enhanced-filtering-using-pub-sub-apis"></a>

若要開始使用，請執行下列動作：

1. 登入 AWS 管理主控台 並開啟 [AppSync 主控台](https://console.aws.amazon.com/appsync/)。

   1. 在**儀表板**上，選擇 **Create API (建立 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 後端互動，包括內建 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. 若要測試傳送和接收即時資料，請開啟兩個瀏覽器視窗並存取 {{localhost：3000}}。範例應用程式設定為將一般 JSON 資料傳送至名為{{機器人的}}硬式編碼頻道。

1.  在其中一個瀏覽器視窗中，在文字方塊中輸入下列 JSON Blob，然後按一下**提交**：

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

這兩個瀏覽器執行個體都會訂閱{{機器人}}頻道，並即時接收發佈的資料，顯示在 Web 應用程式底部：

![pub/sub API 的 React 應用程式範例](http://docs.aws.amazon.com/zh_tw/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 APIs
<a name="aws-appsync-real-time-enhanced-filtering-existing-apps"></a>

如果您只需要在現有應用程式中實作即時功能，這個一般 pub/sub API 組態可以輕鬆整合到任何應用程式或 API 技術。雖然使用單一 API 端點與 GraphQL 在單一網路呼叫中安全地存取、操作和合併來自一或多個資料來源的資料，但不需要從頭轉換或重建現有的 REST 型應用程式，以利用 AWS AppSync 的即時功能。例如，您可以在單獨的 API 端點中擁有現有的 CRUD 工作負載，用戶端只會將訊息或事件從現有應用程式傳送到一般 pub/sub API，以用於即時和 pub/sub 目的。