How to build a chat using Lambda + WebSocket + API Gateway? (nodejs)

Подписаться 4,6 тыс.

Просмотров 48 тыс.

50% 1

⚡️ 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

Хобби

Опубликовано:

4 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 85

@BiteSizeAcademy 2 года назад

⚡️ NEW VIDEO: How to use versioning and aliases to deploy lambda functions? (/w API Gateway) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-OGMaE63YgEU.html

@archidvignesh5368 Год назад

What an amazing tutorial. You deserve more than a million subs. Please keep the videos coming

@JJLabajo 3 года назад

Awesome, I think you deserve thousands of subscribers. Keep up the work brother.

@momulla5639 2 года назад

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 :)

@khandoor7228 3 года назад

Excellent please do more of these types of tutorials.

@DecypherMedia 2 года назад

this was an excellent tutorial, thank you.

@sadev0 3 года назад

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

@TuanTran-zc5ei Год назад

Thank you for this tutorial. This is a great guide to learn WebSocket API in AWS.

@user-yn8vs6uc5n Год назад

So much useful for my project in 2023. Thankyou

@jesusmuhammad8220 2 года назад

so detailed and super helpful for a beginner, THANK YOU SIR

@parkerschlank1713 Год назад

Exceptional tutorial. Subbed. 🤩

@tamer5639 2 года назад

Really good walkthrough. You're only 2 subscribers away from 1000, so I'm gonna have to subscribe! :D Almost there!

@abdulbasitrana2743 7 месяцев назад

Excellent tutorial and very well explained in detail.

@seanknowles9985 3 года назад

Yo what amazing content !!!

@taufinews5736 Год назад

Very good tutorial. Compact and rich in content.

@petrovandrey9735 Год назад

This is amazing!!! Thanks for sharing with us ))

@kidsAdventuresvlogs Год назад

It was great learning from this video about AWS API

@alexgolubev1182 Год назад

sustained, informative, thank you

@abhisharma1471 7 месяцев назад

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

@stevenlin0719 2 года назад

Thank you so much! Very helpful.

@guillaume5623 2 года назад

Such a great video, thank you very much 👍

@sourabhk2373 2 года назад

Very Very well explained.

@Cedielagekohaha 2 года назад

So helpful man!

@PaulPetersVids 2 года назад

I've been looking for a good api gateway websocket gateway. Thank you!

@nahomberhe9640 2 года назад

Amazing!! Thank you!

@garyboss583 Год назад

Great video, super Like

@tnmyk_ 2 года назад

Great video! How can I make the web app hosted completely on cloud, without having to use the terminal/local host?

@adkap990 Год назад

Love you sir.. You are really great.. Thank You so Much...

@edilsonfb 2 года назад

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?

@arshdeepkumar2586 2 года назад

Excellent

@Duckzzzzzzzzzz 9 месяцев назад

I don't ever comment, but I just wanted to say that I appreciate the pace of your content.

@dhrubdas2975 3 месяца назад

dude i am getting an error Unexpected server response: 502 what should i do how to solve

@eruiluvatar6178 2 года назад

One question, what about pricing? Can we use this solution for a high load system?

@geekthegeek730 2 года назад

🤤more more tutorials!

@likithravva2246 8 месяцев назад

Awesome tutorial ALex!!Love from india

@sampatil5474 4 месяца назад

i have some problem with implementation can u help?

@chengyiliu2277 2 года назад

Hello, do you have a tutorial on how to write chat application on google function?

@fedelecavaliere5249 2 года назад

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!

@sekhniashvili 2 года назад

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.

@user-tr6tp5qy7y 2 года назад

thank you very much

@evanserickson 2 года назад

No link to the React Components for the front end?

@alibarznji2000 2 года назад

I like you "Bob" (:). subbed

@swethareddy8550 2 года назад

Thank you

@kunalghosh1117 2 года назад

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!

@BiteSizeAcademy 2 года назад

I've added a link to the github repo in the description

@jixster1566 2 года назад

Please make a video on how to do authentication for websockets

@okeyshourovroy2769 2 года назад

Please make a secure video on demand like netflix using mern stack and aws. New subscriber 😊

@AbhishekKumar-wx3dh 5 месяцев назад

How do you handle error from the lambda fn. Error which can come from not connecting to db.

@CATAPASMARENT 2 года назад

When i send a message i always go in the $default routeKey any advice or code sample ?

@user-ow4wj6sr9h 11 месяцев назад

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

@shaheerahmed5234 2 года назад

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 .

@user-yn8vs6uc5n Год назад

Could you make a video on aws opensearch

@user-kw7fj2gc8z 3 месяца назад

Is there a way to see how much this will cost with aws price calculator?

@bhavanishankar5204 2 года назад

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

@gideonwekesa_ 2 года назад

Amazing! Kindly share the github repository of the frontend code.

@BiteSizeAcademy 2 года назад

Thanks! Added the links to the repo in the description

@smritieligar2518 Месяц назад

i am getting Unexpected server response: 502 when i run wscat(9:38 timeline in the video). how do i solve it?

@duongucthang2191 Год назад

could you teach me how to run the client

@isohumulone 6 месяцев назад

Where is the array variable "ids" initialized.

@anhadparashar710 2 года назад

hey, does it work?

@shitalkhoje4946 Год назад

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

@headmaster499 2 года назад

Do you mind sharing the repo for the lambda code? I cant seem to get a response back when I use Wscat to test.

@BiteSizeAcademy 2 года назад

Added to the video's description

@headmaster499 2 года назад

@@BiteSizeAcademy thank you

@anhadparashar710 2 года назад

hey did you solve this issue?

@cenullum 2 года назад

for now aws lambda doesnt support binary so you need to send as text. I was getting problem on my app because of it

@oldyoung 2 года назад

The message store in dynamodb ?

@amra1610 2 года назад

same question?

@user-wy6vm9nv3z 4 месяца назад

I am not getting response from web socket api Connected (press CTRL+C to quit) > {"action":"setName","name":"bob"} >

@KenyK47 3 месяца назад

Did you find a solution to this?

@kazinayem2011 2 года назад

What about ChatClient component? You didn't show us what's inside it. Could you please share that code?

@BiteSizeAcademy 2 года назад

Added to the video's description

@kazinayem2011 2 года назад

@@BiteSizeAcademy I appreciate your quick reply and this is really my luck to have the source code. Started practicing your tutorial. Many many thanks.

@jshossen 2 года назад

Great Videos. I implemented your way. but my connection returns 500 internal server errors.

@studiomonty Год назад

Did you find a solution to this? I'm having the 500 error as well

@emmy0021 Год назад

@@studiomonty same

@mcdoggy520 2 года назад

I’m getting an unexpected serverr response: 502 :

@peppyday 2 года назад

any solution

@BiteSizeAcademy 2 года назад

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/

@peppyday 2 года назад

@@BiteSizeAcademy worked

@peppyday 2 года назад

any idea how to store the chat message in dynamodb ( need schema )

@Siscerto Год назад

why should we use .promise() when we are using async and await

@Jagadish47 Год назад

HOW lambda holds the names object ( var names = { }; ) for every request won't it become resetted ???

@DuffMan 5 месяцев назад

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)