feat: appsync events (#8059)

Author: iartemiev

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'
                 },

src/pages/[platform]/build-a-backend/data/connect-event-api/index.mdx

@@ -0,0 +1,99 @@
+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 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).
+
+## Connect to an Event API without an existing Amplify backend
+
+Before you begin, you will need:
+
+- An Event API created via the AWS Console
+- 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<any[]>([]);
+
+  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 (
+    <button onClick={publishEvent}>Publish Event</button>
+    <ul>
+      {events.map((event) => (
+        <li>{JSON.stringify(event)}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+## Connect to an Event API with an existing Amplify backend
+
+Coming Soon