什么是 amplify-pubsub
amplify-pubsub 是一款前端应用程序开发工具，它基于 AWS Amplify 构建，用于实现应用程序间的实时数据传输和事件通知。
使用 amplify-pubsub 可以轻松地构建可伸缩的应用程序，该应用程序使用 Pub/Sub 模式进行通信，具有低延迟和高可用性。基于它开发的应用程序，可以支持实时交互、协作编辑、多人在线游戏等场景。
如何使用 amplify-pubsub
在开始使用 amplify-pubsub 之前，我们需要完成以下几个步骤：
- 创建 AWS Amplify 应用
- 安装 AWS Amplify CLI
- 安装 amplify-pubsub npm 包
1. 创建 AWS Amplify 应用
在 AWS Amplify 控制台创建应用，步骤如下：
- 登录 AWS Amplify 控制台
- 点击 Create app
- 输入应用程序名称和描述，选择应用程序类型，点击 Create app
创建成功后，可以在控制台查看应用程序的详细信息，包括应用 ID、应用程序类型、应用程序访问 URL 等。
2. 安装 AWS Amplify CLI
AWS Amplify CLI 是一款命令行工具，用于创建和管理 AWS Amplify 应用。安装步骤如下：
- 安装 Node.js 和 npm
- 打开命令提示符或终端，输入以下命令：
npm install -g @aws-amplify/cli
3. 安装 amplify-pubsub npm 包
在项目根目录中，打开终端或命令提示符，输入以下命令：
npm install --save amplify-pubsub
使用示例
下面是一个基于 amplify-pubsub 实现实时聊天室的实例，该应用程序使用 Pub/Sub 模式进行通信。
编写前端代码
在 src/index.js 中添加以下代码：
-- -------------------- ---- -------
------ ------- ---- --------------
------ - ------ - ---- --------------
------ --------- ---- ----------------
-----------------------------
----- ------ - --- ---------
----- ---------- - --------------
----- ------------ - -----------------------------------
----- ---------- - ---------------------------------------
----------------------------------------------------------------- -- -- -
----- ------- - -------------------
-- --------- -
------------------------------------ - ------- ---
------------------ - ---
-
---
--------------------------------------------------
----- -- ------ - ---- - -- -- -
----- - ------- - - -----
----- ----------- - ----------------------------
----------------------- - --------
------------------------------------
--
------ ----- -- -------------------- ----------- -- ---- ------ -------
------ -- -- ------------------------- ---- ---- -------
---创建 AWS AppSync API
在 AWS Amplify 控制台中创建一个 AppSync API，步骤如下：
- 在 AWS Amplify 控制台中选择您的应用程序
- 选择“API”选项卡
- 点击“添加 API”按钮
- 选择“AppSync”选项，输入 API 名称和描述，然后点击“创建 API”按钮
- 选择“架构”选项卡，选择“添加模型”，然后定义数据模型，如下所示：
-- -------------------- ---- ------- ---- -------- ------ - --- --- ----- ------- --------- ------------- ----------------- ------------------- - ---- ----------- ------ - --- --- -------- ------- ------- --- ----- -------- ----------------- ------------------- -
- 选择“数据源”选项卡，选择“新增数据源”，选择“None”选项卡，然后点击“创建数据源”按钮
- 选择“设置”选项卡，将“服务访问”设置为“API key”，然后点击“保存变更”按钮
- 选择“查询”选项卡，选择“添加查询”，然后添加以下查询：
-- -------------------- ---- ------- ---- ----- - --------------- ----- -------- -------------- ---------- - ---- -------- - --------------------- ---------------------- -------- ------------------------ ------------------------- ----------- - ----- ------------------- - ----- ------- - ----- ---------------------- - -------- ------- ------- --- -
修改 aws-exports.js
在 src/aws-exports.js 中添加以下代码：
export default {
aws_appsync_graphqlEndpoint: '<AWS AppSync GraphQL Endpoint>',
aws_appsync_region: '<AWS Region>',
aws_appsync_authenticationType: 'API_KEY',
aws_appsync_apiKey: '<AWS AppSync API Key>',
};其中，AWS AppSync GraphQL Endpoint 和 AWS AppSync API Key 可以在 AWS Amplify 控制台的“设置”选项卡中找到。
运行应用程序
在终端或命令提示符中，输入以下命令，运行应用程序：
npm run start
打开浏览器，访问 http://localhost:3000，即可开始实时聊天。
总结
使用 amplify-pubsub 可以轻松地实现前端应用程序间的实时通信和事件通知。通过本文介绍的步骤和示例，您可以了解如何在应用程序中使用 amplify-pubsub，进而构建出更加丰富、实时、协同的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/amplify-pubsub