How to make WebSocket API with Amazon API Gateway

photo of turned on laptop computer
Reading Time: 4 minutes

We’ll learn how to make Websocket API with API Gateway in this blog. Let’s start with a quick overview of APIs.

What is an API?

API stands for Application Programming Interface, and it is a software intermediary that allows two applications to communicate with one another.

What is a WebSocket API?

In API Gateway, a WebSocket API is a set of WebSocket routes that are linked to backend HTTP endpoints, Lambda functions, or other AWS services.

The APIs for WebSockets are bidirectional. Clients can send messages to services, and services can send messages to clients on their own. Because services can push data to clients without requiring clients to make an explicit request, this bidirectional behavior allows for richer client/service interactions. Real-time applications, such as chat applications, collaboration platforms, multiplayer games, and financial trading platforms, frequently use WebSocket APIs.

Now let’s build a Websocket API Gateway.

Prerequisites:

  • AWS Account

Step 1: Create a Lambda function

AWS Lambda is a serverless, event-driven compute service that lets you run code for virtually any type of application or backend service without provisioning or managing servers.

Go to AWS services and click lambda service to create a function to connect it to the API gateway. The user interface for the Lambda function is shown below. Click the Create function button to begin creating the Lambda function.

Click on Create function and create a function from the serverless app repository. Type in WebSockets, and then tick the box.

This shows how to create custom IAM roles and resource policies using the apps.

For this example, we’ll choose simple-WebSockets-chat-app, which is created by the API Gateway team.

Step 2: Deploy the Application

We will deploy this application, which will generate functions such as onConnect, OnDisconnect, and sendMessage.

So the application name is simple-WebSockets-chat-app and the table name simplechat_connections, DynamoDB to store the connection identifiers for each client.

Tick the Checkbox and Deploy the Function.

We can see a DynamoDB table containing the connections, API Gateway Deployments, 3 Lambda functions, onConnect function, OnDisconnect function, and sendMessage function.

Step 3: WebSocket API Gateway

Return to the AWS management console and select API Gateway from the network and content delivery service list.

We’ll see a SimpleChatWebSocket application with the protocol WebSocket.

Open this application. Route Selection Expression is $request.body.action that will contain action key and this will route to specific routes.

Step 4: Testing WebSocket API

Open the Cloud Shell and Install wscat which will help us to test API.

sudo npm install -g wscat

Get the WebSocket URL by going to Stages then Prod.

Next run wscat -c to connect

wscat -c wss://5osuw1gszf.execute-api.us-east-1.amazonaws.com/Prod

When we connect, it runs to the OnConnect Function.

And then to DynamoDB

We can send some messages, So we need to open the JSON message called to action.

The first key will be “action“, next will be “sendmessage” that will route the expression from API Gateway, and then the “data",itself is going to be “hello world!“.

{ "action" : "sendmessage", "data" : "hello world!"}

So when we send this message we send it to the lambda function and this goes back to hello world from the server.

Now open a New Tab and split it into columns and run wscat again and we’ll have a new client connected. Send the message again.

{ "action" : "sendmessage", "data" : "hello world Again!"}

If we go to DynamoDB Console we can see two Connection IDs.

We can also test it again by splitting the columns into three. we will see that the messages are sent and received by all the clients i.e., they can chat.

CONCLUSION

We have learned How to Make a Websocket API Using API Gateway.

To read about creating REST API using API Gateway and more about DevOps.

REFERENCE

AWS Lambda

WebSocket API

Leave a Reply