Skip to content
Simple React app that broadcasts messages to multiple clients using Serverless GraphQL real-time subscriptions powered by AWS AppSync
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 1550c37 Jan 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
media Initial Commit Jan 2, 2019
public Initial Commit Jan 2, 2019
src Initial Commit Jan 2, 2019
.gitattributes Initial commit Jan 2, 2019
LICENSE.txt Update LICENSE.txt Jan 2, 2019
README.md Update README.md Jan 2, 2019
package.json Initial Commit Jan 2, 2019
packaged.yaml Update packaged.yaml Jan 2, 2019
template.yaml Update template.yaml Jan 2, 2019

README.md

AppSync Broadcaster

Simple app that broadcasts messages to multiple clients using Serverless GraphQL real-time subscriptions powered by AWS AppSync.

The API access is authenticated via API Key valid for 7 days. The demo takes advantage of GraphQL Subscriptions and Local Resolvers so instead of calling a remote data source, the local resolver will just forward the result to all clients subscribed to the call (PubSub). Messages are not saved or persisted anywhere.

Screnshot

Deploy

Click on DEPLOY from the application page to deploy the AWS AppSync backend

React Front-End setup

  1. Clone the repository https://github.com/awsed/appsync-broadcaster-sar

  2. In the DEPLOYMENT STATUS page, click on VIEW CLOUDFORMATION STACK or go to the CloudFormation console, click on the stack aws-serverless-repository-appsync-broadcaster and open the OUTPUTS tab

  3. Edit the file src/App.js and replace the following values according to the CloudFormation Stack Outputs:

    Amplify.configure({
        'aws_appsync_graphqlEndpoint': 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql',
        'aws_appsync_region': 'us-east-1',
        'aws_appsync_authenticationType': 'API_KEY',
        'aws_appsync_apiKey': 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx',
    });
  4. Install the required modules:

    npm install
  5. Execute the application and access it from multiple browsers at http://localhost:3000 :

    npm start
  6. Send a message from one client and get it broadcasted in all browsers. Since AWS AppSync automatically scales, you can have thousands of clients broadcasting messages.

Hosting on S3 or CloudFront

  1. Install the AWS Amplify CLI

    npm install -g @aws-amplify/cli
  2. From the root of the cloned repository folder, create an Amplify project by following the prompts and select REACT as framework of choice:

    amplify init
  3. Execute

    amplify add hosting

    from the project's root folder and follow the prompts to create an S3 bucket (DEV) and/or a CloudFront distribution (PROD). More info on the Amplify CLI docs.

  4. Build, deploy, upload and publish the application with a single command:

    amplify publish

Hosting with the Amplify Console

  1. Fork the repository https://github.com/awsed/appsync-broadcaster-sar to your own GitHub account
  2. Commit the modified src/App.js file with the valid AppSync resources to the forked repository
  3. Connect your repository as per the instructions on https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html
  4. Deploy and access your app (xxxxxxxx.amplifyapp.com)

Access the app from multiple devices or send the S3/CloudFront/AmplifyApp.com link to friends to test Serverless GraphQL real-time subscriptions

For a version deployed end to end with the AWS Amplify CLI using a GraphQL Transformer that will configure a DynamoDB NoSQL table to save the broadcasted messages (this version uses direct PubSub with Local Resolvers, no messages are saved) check my other repo https://github.com/awsed/broadcaster

You can’t perform that action at this time.