How to build a chat using Lambda + WebSocket + API Gateway? (nodejs)
Вставка
- Опубліковано 7 лип 2024
- ⚡️ Blog post and source code: www.undefinedapps.com/post/la...
In this video we build a real-time chat app (like slack) that uses websockets backed by an AWS lambda function and Amazon API Gateway. The app sends JSON over the websocket to deliver the chat messages and notifications in real time, over a two-way communication line, to all the users of the chat.
0:00 Demo and Description
0:34 Setting Up API Gateway
2:22 Creating the Lambda Function
4:12 Writing the Backend Code (javascript/nodejs)
9:15 Testing the WebSocket Using wscat
14:44 The Chat Client UI Overview (react+hooks)
17:47 Writing the Frontend Code (javascript/typescript)
23:54 Trying What We Built by Connecting to the Chat as 4 Different Users
The client is written in react (with hooks) and uses the WebSocket api that is available in all the modern browsers. The backend is serverless and uses API Gateway + AWS Lambda with javascript/nodejs.
⭐️ Subscribe for more content: newsletter.undefinedapps.com/
#WebSocket #Lambda #ApiGateway #javascript #nodejs - Навчання та стиль
⚡️ NEW VIDEO: How to use versioning and aliases to deploy lambda functions? (/w API Gateway) ua-cam.com/video/OGMaE63YgEU/v-deo.html
What an amazing tutorial. You deserve more than a million subs. Please keep the videos coming
Excellent please do more of these types of tutorials.
this was an excellent tutorial, thank you.
Genius video. Really enjoyed this one. Also very well explained, 10/10 for all of it . My own further request would be that it would be nice to see and edit message feature too :)
so detailed and super helpful for a beginner, THANK YOU SIR
So much useful for my project in 2023. Thankyou
Awesome, I think you deserve thousands of subscribers. Keep up the work brother.
Hey Alex, thanks for this tutorial.
It would be great if you make a complete series on Serverless SASS application with AWS CDK and reactjs
Thank you for this tutorial. This is a great guide to learn WebSocket API in AWS.
Yo what amazing content !!!
Exceptional tutorial. Subbed. 🤩
Excellent tutorial and very well explained in detail.
Very good tutorial. Compact and rich in content.
This is amazing!!! Thanks for sharing with us ))
It was great learning from this video about AWS API
sustained, informative, thank you
Thank you so much! Very helpful.
Very Very well explained.
So helpful man!
Such a great video, thank you very much 👍
Amazing!! Thank you!
Really good walkthrough. You're only 2 subscribers away from 1000, so I'm gonna have to subscribe! :D Almost there!
thankyou for this video it help me alot , if someone looking to understand the basics of aws websocket just watch this video
thanks once again
I've been looking for a good api gateway websocket gateway. Thank you!
Great video, super Like
Excellent
Love you sir.. You are really great.. Thank You so Much...
🤤more more tutorials!
I don't ever comment, but I just wanted to say that I appreciate the pace of your content.
dude i am getting an error Unexpected server response: 502
what should i do
how to solve
Awesome tutorial ALex!!Love from india
i have some problem with implementation can u help?
thank you very much
Thank you
I like you "Bob" (:).
subbed
Solid tutorial...Could you please provide the complete set of working codes? It will be easier to run and check things on local.
Thanks in advance!
I've added a link to the github repo in the description
Thank you for the video, it really helped me! I've facing an issue regarding using only serverless.yml to deploy the application. Locally everything works, but on aws the postToConnection only send if a user has joined. I'm saving the data in mongogb. Is there a huge difference by doing the firsts steps in the video and doing locally?
Great video! How can I make the web app hosted completely on cloud, without having to use the terminal/local host?
Hey man,
Nice and helpful video. Thank you.
I get Forbidden error when sending message from socket client {"message": "Forbidden", "connectionId":"some_ID", "requestId":"some_ID"}
I think I have not missed any step. The request does not appear in lambda logs, so I think API gateway blocks the request for some reason.
Please make a secure video on demand like netflix using mern stack and aws.
New subscriber 😊
One question, what about pricing? Can we use this solution for a high load system?
Very nice! But I was questioning if using Lambda what it's billed to me it's per say 100ms for each client for every message. On the other hand Lambda is taking up and storing my variables with my ids... How does Lambda bills me?
Thank you!
Hello, do you have a tutorial on how to write chat application on google function?
How do you handle error from the lambda fn. Error which can come from not connecting to db.
Please make a video on how to do authentication for websockets
I have a question please , When a user creates a chat room and adds a members for this chatRoom ,How can we generate connectionId for each member to be able to receive connectionId
No link to the React Components for the front end?
what if bob is disconnected and jimmy wants to send message to bob how to handle this situation like in chat application . The problem is connection id is recreated when ever the user is join the chat .
When i send a message i always go in the $default routeKey any advice or code sample ?
i am getting Unexpected server response: 502 when i run wscat(9:38 timeline in the video). how do i solve it?
Could you make a video on aws opensearch
Amazing! Kindly share the github repository of the frontend code.
Thanks! Added the links to the repo in the description
Is there a way to see how much this will cost with aws price calculator?
hi can u pls tell me how to make a chat application using dynamodb and nodejs without using lambda/serverless???? The user wil send u a text message ,u have to store it in dynamodb (you read it later and reply them or live reply)!! is it possible to do this in this way ?? if not please tell me!!! y
Where is the array variable "ids" initialized.
I really really need a urgent help if anyone can pls...
Hey Alex...and other people reading this comment
...can anyone tell me how to open this CLI from lambda function whose prompt will be lambda too....
I'm.not getting how in this video at 9.30 timing the cli opens from the lambda service window....
Pls help urgent
could you teach me how to run the client
I am not getting response from web socket api Connected (press CTRL+C to quit)
> {"action":"setName","name":"bob"}
>
Did you find a solution to this?
Do you mind sharing the repo for the lambda code? I cant seem to get a response back when I use Wscat to test.
Added to the video's description
@@BiteSizeAcademy thank you
hey did you solve this issue?
for now aws lambda doesnt support binary so you need to send as text. I was getting problem on my app because of it
Great Videos. I implemented your way. but my connection returns 500 internal server errors.
Did you find a solution to this? I'm having the 500 error as well
@@studiomonty same
hey, does it work?
The message store in dynamodb ?
same question?
What about ChatClient component? You didn't show us what's inside it. Could you please share that code?
Added to the video's description
@@BiteSizeAcademy I appreciate your quick reply and this is really my luck to have the source code. Started practicing your tutorial. Many many thanks.
I’m getting an unexpected serverr response: 502 :
any solution
Try to check the logs of the lambda function to see what causes the error,
then troubleshoot it: aws.amazon.com/premiumsupport/knowledge-center/lambda-troubleshoot-invoke-error-502-500/
@@BiteSizeAcademy worked
any idea how to store the chat message in dynamodb ( need schema )
why should we use .promise() when we are using async and await
HOW lambda holds the names object ( var names = { }; ) for every request won't it become resetted ???
If anyone is trying this lately, I don't know if something changed in AWS, but I was getting bad gateway from the wscat connection. So I checked cloudwatch and it was giving me this error:
Error: Cannot find module 'aws-sdk'".
So I installed @aws-sdk/client-apigatewaymanagementapi directly and it fixed the issue.
Usage:
import {
ApiGatewayManagementApiClient,
PostToConnectionCommand,
} from '@aws-sdk/client-apigatewaymanagementapi'
const command = new PostToConnectionCommand({
ConnectionId: id,
Data: Buffer.from(JSON.stringify(body)),
})
return await client.send(command)
Can you further elaborate on this?