Giter VIP home page Giter VIP logo

simplewsapi's Introduction

Simple Serverless Real-Time API (WebSockets)
with AWS AppSync

(No GraphQL knowledge required)


This is an implementation of a simple real-time API based on WebSockets where clients are subscribed to a specific channel and any JSON data can be pushed automatically to clients listening/subscribed to the channel. Clients define the channel they're subscribed to and there can be as many channels as required. Connections, scalability, fan-out and broadcasting are all automatically handled by the API.

The GraphQL API is defined in code where a GraphQL schema and API definition is generated programatically. Client code is also automatically generated. Hand coding GraphQL schema, queries, mutations, subscriptions is not required. If there's no need to leverage the built-in GraphQL strongly typed system, this pattern allows to send any data to connected/subscribed clients as long as it's in a valid JSON format.

Requirements



Deploy the API to the cloud

  1. Clone the project to your local working directory:

    git clone https://github.com/awsed/simpleWSAPI
  2. Change the working directory to:

    cd simpleWSAPI/cdk
  3. Install the project dependencies:

    npm install
  4. Deploy the stack to your default AWS account and region. After deployment, the output of this command shows the GraphQL API endpoint, API ID, and API key. Take note of all the details as they'll be needed to setup the client:

    cdk deploy


Configure the React.js client

  1. Change the working directory to the client folder:

    cd ../client
  2. Install the project dependencies:

    npm install
  3. Open the file src/App.js and update the AppSync API congifuration details based on the output of the previous cdk deploy.

  4. Define a name for your channel, as an optional step.

  5. Generate the necessary code to interact with the API using the Amplify CodeGen with the API ID output of the previous cdk deploy. There's no need to create an Amplify CLI project, however you'll need to download the API schema from the AWS Appsync Console. Select the API WS-API in your account and, in the Schema section, select Export schema. Download and copy the schema file to the root of the /client folder, where you need to execute the following command accepting all defaults:

    amplify add codegen --apiId xxxxxxxxxxxxxxxxxxxxxx
  6. Execute the application and access it from multiple browser tabs/windows at http://localhost:3000 :

    npm start
  7. Send any valid JSON payload from one client and get it broadcasted in all browser windows. Since AWS AppSync automatically scales to demand, you can have thousands of clients broadcasting JSON data. You can also have multiple channels defined in different instances of the clients and confirm only clients subscribed to specific channels receive the JSON data.



Screnshot

simplewsapi's People

Contributors

awsed avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.