AWS API Gateway WebSocket API with the Serverless Framework to Fulfill Front-end Real-time Update

Anna Coding
Jan 26, 2020 · 2 min read

Front-end real-time updating is a very common function for various applications e.g. Chat App, Real-time alerts and notifications. Normally, Web application, we use WebSocket to realize this function. But what If you implement your backend with AWS Lambda functions or serverless framework? Probably you already know that AWS provides WebSocket API of API Gateway.

What does WebSocket API do?

In a WebSocket API, the client and the server can both send messages to each other at any time. Backend servers can easily push data to connected users and devices, avoiding the need to implement complex polling mechanisms.

Some common use cases:

  • Chat applications
  • Real-time dashboards such as stock tickers
  • Real-time alerts and notifications

For a brief introduction to WebSocket support in API Gateway, see Use API Gateway to Create WebSocket APIs.

💡In this tutorial, I will show you how to implement AWS WebSocket API with serverless framework. We will implement a broadcast function that if one user updates information, then we will broadcast to other online users in real-time.

💡I assume you already have your serverless project.

Backend WebSocket Function

The backend consists of an API Gateway WebSockets API, Lambda functions, and Dynamodb to save WebSocket connection Id.

In API Gateway you can create a WebSocket API as a stateful frontend for an AWS service (such as Lambda or DynamoDB) or for an HTTP endpoint. The WebSocket API invokes your backend based on the content of the messages it receives from client apps.

Define WebSocket API Message Routing

A route includes a route key, which is the value that is expected once a route selection expression is evaluated.

There are three predefined routes that can be used: $connect, $disconnect, and $default. In addition, you can create custom routes.

  • API Gateway calls the $connect route when a persistent connection between the client and a WebSocket API is being initiated.
  • API Gateway calls the $disconnect route when the client or the server disconnects from the API.
  • API Gateway calls a custom route after the route selection expression is evaluated against the message if a matching route is found; the match determines which integration is invoked.
  • API Gateway calls the $default route if the route selection expression cannot be evaluated against the message or if no matching route is found.

Learn more About WebSocket APIs in API Gateway

Now, let us create WebSocket API and configure the three predefined routes in serverless.yml.

Check the solution in below article link. It is integrated with Github gist codes snippet.

Anna Coding

www.annacoding.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store