From 646cc6312cfd031ac52b892679ff3dc5d5aebef4 Mon Sep 17 00:00:00 2001 From: Ivan Artemiev <29709626+iartemiev@users.noreply.github.com> Date: Wed, 30 Oct 2024 12:49:25 -0400 Subject: [PATCH 1/3] feat: appsync events --- src/directory/directory.mjs | 3 + .../data/connect-event-api/index.mdx | 100 ++++++++++++++++++ 2 files changed, 103 insertions(+) create mode 100644 src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx diff --git a/src/directory/directory.mjs b/src/directory/directory.mjs index 157c7fd514d..d251f16f1be 100644 --- a/src/directory/directory.mjs +++ b/src/directory/directory.mjs @@ -320,6 +320,9 @@ export const directory = { { path: 'src/pages/[platform]/build-a-backend/data/optimistic-ui/index.mdx' }, + { + path: 'src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx' + }, { path: 'src/pages/[platform]/build-a-backend/data/override-resources/index.mdx' }, diff --git a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx new file mode 100644 index 00000000000..f69fda5c084 --- /dev/null +++ b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx @@ -0,0 +1,100 @@ +import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; + +export const meta = { + title: 'Connect to AWS AppSync Events', + description: + 'Connect to AWS AppSync Events', + platforms: [ + 'angular', + 'javascript', + 'nextjs', + 'react', + 'react-native', + 'vue' + ] +}; + +export const getStaticPaths = async () => { + return getCustomStaticPath(meta.platforms); +}; + +export function getStaticProps(context) { + return { + props: { + platform: context.params.platform, + meta + } + }; +} + +This guide walks through how you can connect to AWS AppSync Events using the Amplify library. + +AWS AppSync Events lets you create secure and performant serverless WebSocket APIs that can broadcast real-time event data to millions of subscribers, without you having to manage connections or resource scaling. With AWS AppSync Events, there is no API code required to get started, so you can create production-ready real-time web and mobile experiences in minutes. + +Learn more about AWS AppSync Events by visiting the [Developer Guide](https://docs.aws.amazon.com/appsync/latest/eventapi/event-api-welcome.html). + +## Quickstart +### Connect to an Event API without an existing Amplify application + +Before you begin, you will need: + +- An Event API created via the AWS Console, CDK, CLI, etc. +- Take note of: HTTP endpoint, region, API Key + +```ts +import { useState, useEffect } from 'react'; +import { Amplify } from 'aws-amplify'; +import { events } from 'aws-amplify/data'; + +Amplify.configure({ + API: { + Events: { + endpoint: 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-east-1.amazonaws.com/event', + region: 'us-east-1', + defaultAuthMode: 'apiKey', + apiKey: 'da2-abcdefghijklmnopqrstuvwxyz', + }, + }, +}); + +export default function MyComponent() { + const [events, setEvents] = useState([]); + + useEffect(() => { + let channel; + + const connectAndSubscribe = async () => { + channel = await events.connect('default/channel'); + + channel.subscribe({ + next: (data) => { + console.log('received', data); + setEvents(prev => [data, ...prev]); + }, + error: (err) => console.error('error', err), + }); + } + + connectAndSubscribe(); + + return () => channel && channel.close(); + }, []); + + async function publishEvent() { + await events.post("default/channel", {some: 'data'}); + } + + return ( + + + ); +} +``` + +## Connect an Event API to an existing Amplify application + +Coming Soon From 03e8110927eb033e9d8d4cce2cbe1169770cf73b Mon Sep 17 00:00:00 2001 From: Ivan Artemiev <29709626+iartemiev@users.noreply.github.com> Date: Wed, 30 Oct 2024 13:07:34 -0400 Subject: [PATCH 2/3] Update src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx Co-authored-by: josef --- .../[platform]/build-a-backend/data/connect-event-api/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx index f69fda5c084..59fe4ad34c6 100644 --- a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx @@ -38,7 +38,7 @@ Learn more about AWS AppSync Events by visiting the [Developer Guide](https://do Before you begin, you will need: -- An Event API created via the AWS Console, CDK, CLI, etc. +- An Event API created via the AWS Console - Take note of: HTTP endpoint, region, API Key ```ts From cc12df9924f938622561a464257d9364beba527b Mon Sep 17 00:00:00 2001 From: Ivan Artemiev <29709626+iartemiev@users.noreply.github.com> Date: Wed, 30 Oct 2024 13:26:36 -0400 Subject: [PATCH 3/3] feedback --- .../build-a-backend/data/connect-event-api/index.mdx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx index 59fe4ad34c6..83249a9d33d 100644 --- a/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx +++ b/src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx @@ -29,12 +29,11 @@ export function getStaticProps(context) { This guide walks through how you can connect to AWS AppSync Events using the Amplify library. -AWS AppSync Events lets you create secure and performant serverless WebSocket APIs that can broadcast real-time event data to millions of subscribers, without you having to manage connections or resource scaling. With AWS AppSync Events, there is no API code required to get started, so you can create production-ready real-time web and mobile experiences in minutes. +AWS AppSync Events lets you create secure and performant serverless WebSocket APIs that can broadcast real-time event data to millions of subscribers, without you having to manage connections or resource scaling. With this feature, you can build multi-user features such as a collaborative document editors, chat apps, and live polling systems. Learn more about AWS AppSync Events by visiting the [Developer Guide](https://docs.aws.amazon.com/appsync/latest/eventapi/event-api-welcome.html). -## Quickstart -### Connect to an Event API without an existing Amplify application +## Connect to an Event API without an existing Amplify backend Before you begin, you will need: @@ -95,6 +94,6 @@ export default function MyComponent() { } ``` -## Connect an Event API to an existing Amplify application +## Connect to an Event API with an existing Amplify backend Coming Soon