How to Use AWS Websocket API with React web application to Work as a Server Sent Event Notifier
A common requirement of a cloud-based web application is to take the inputs from UI, process it in the backend and send it back to UI in real time. There are some scenarios where there will be some events that needs to send some data to front-end without getting any API calls from the front-end.
E.g., an image upload to a S3 bucket that triggers a lambda for the face recognition and the lambda needs to return the result to the front-end in real time.
There could be several options to achieve this.
- SNS / SQS
- Creating a new Node.js server with a websocket connection
Another easy and simple approach could be to use amazon web service websocket API gateway for this. I tried a small application implementing this flow.
Let us dig deeper into the architecture and the steps -
What are we going to do?
Here, we are going to use the Amazon Web Services Websocket API gateways to work as a Server Sent Event notifier. Our goal is to send some event data from the serverless backend (AWS Lambda) to the React Web client in real time.
Following are the basic AWS resources that we need to use for setting up this:
- AWS Lambda
- AWS DynamoDB
- AWS API Gateway
How websocket Works with API Gateway and React?
Like all other API gateways, there will be a call that should be triggered from the client (Here we are using React Application). From the React application, first we will have to connect to the websocket using a URL provided by the API Gateway. Using that connection event, there will be a connectionId that is being created for the React to connect to the websocket. We need to save this connectionId to the dynamoDB table so that we can use this connectionId from the Lambda function to send whatever data we need to send to front end. There are two default routes called connect and disconnect in the API Gateway that can trigger some lambda functions when the websocket connection and disconnection events happen. We will use these events to store and remove the connectionIds from dynamoDB table. We can use the same connectionId for another Lambda function to send data through this websocket connection.
Following is the complete architecture of the above flow: 😊
Let us go through the Code!
From the backend side, we need to write code for websocket_connect, websocket_disconnect and websocket_send_data Lambda functions. Here we are going with Python. Refer below GitHub link for source code:
sidharthvpillai/AWS-Websocket (github.com)
websocket_connect Lambda:
websocket_disconnect Lambda:
websocket_send_data Lambda:
Note: WEBSOCKET_TABLE is an environment variable added in Lambda function with the dynamoDB table name. And we must add a websocket connection url which we can copy from the API gateway.
React Code:
Note: Need to paste the websocket url from API gateway.
Steps for creating the AWS Lambda:
Open AWS Lambda console for creating the Lambda functions. Click on the “Create function” option.
Select the basic information and click on “Create function”:
Create the three Lambdas websocket_connect, websocket_disconnect and websocket_send_data and add the above code and click on “Deploy”.
Steps for creating the AWS DynamoDB table:
Open AWS DynamoDB console and on Tables option click on Create Table:
Enter table name and connectionId field and let all other settings be default:
At the end click on the Create Table:
Now we have to add the dynamoDB table name into the environment variable in lambda functions:
How to add environment variables in Lambda functions:
Open the lambda function and go to the configurations -> environment variables and add the environment variable named WEBSOCKET_TABLE with value websocket_connections (DynamoDB table that we created in the previous step)
Permissions needed for each Lambda:
websocket_connect lambda needs:
- DynamoDB — PutItem Access
websocket_disconnect lambda needs:
- DynamoDB — DeleteItem Access
websocket_send_data lambda needs:
- DynamoDB — Scan Access
- ExecuteAPI — ManageConnections Access
Note: Hope that already know how to add permissions for Lambda functions.
Steps for creating the AWS API Gateway:
- Open the aws console for API Gateways and click on “Create API” option
2. Click on the “Build” option for “Websocket API”
3. Fill the “API name” and default route selection expression can be given. And click “Next”
4. Add $connect route and $disconnect route and click on “Next”
5. Select “Lambda” as integration type for both connect and disconnect routes and select connect and disconnect lambdas as well and click on “Next”
Note: It calls the connect and disconnect lambdas in connection and disconnection events, respectively.
6. Add a “Stage Name” and click “Next”
7. Click “Create and Deploy” after reviewing the details given.
Copy the websocket url for React and use the connection url for sending the notification from websocket_data_send lambda function.
Now everything is ready for testing. You can test the websocket_send_data lambda function and check if the UI receives the data.
Try testing with Postman or Hoppscotch as well.
-Sid
