This is why you'll need polling in your web applications
HTML-код
- Опубликовано: 9 фев 2025
- give Hosna a follow: / @hqasmei
-- my courses --
📘 T3 Stack Tutorial: 1017897100294....
-- my products --
📖 ProjectPlannerAI: projectplanner...
🤖 IconGeneratorAI: icongeneratora...
-- useful links --
💬 Discord: / discord
🔔 Newsletter: newsletter.web...
📁 GitHub: github.com/web...
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody
Underrated. A lot of times we get videos on concepts that are too advanced or too tutorial-like. Concepts at this level are relatable for intermediate engineers trying to build stuff but aren't aware of solutions like these. Also SST looks pretty cool, gotta try that out!
I totally agree, a course about this topics
Server-sent events can be a really nice alternative to polling and websockets. It is a long-lived connection, but it is one-way communication only and the protocol is so simple you don't need a library for it. On the backend it usually looks like a regular HTTP endpoint handler, but instead of ending the response immediately, it keeps it open and keeps writing to it over time.
Very useful tips as always and at the right time 😅 Thanks 😊
Thank you!!
MAN this channel keeps me so up to date with the best practices and topics. Keep them coming!
i work for a sportsbetting company where we get a ton of dynamic updates constantly.
we use an enterprise platform horizontally scalable web sockets. it’s cool stuff
These are my favourite videos. I know you're doing a tailwind course but if you ever wanted to do a Kent Dodd's style infra/handling bigger codebases course I'd be interested
Very nice content! Suprisingly, I have a project of mine with a similar design, where I'm also using sqs, dead-letter queues, lambdas and polling. The only thing I would suggest is to use step functions as well. They can help organizing your backend logic having a retry/catch all mechanism across the whole backend. It will make it easier to sync the changes with the db.
I think this is a perfect use case to build an event driven architecture with a WebSocket per client.
I personally find web sockets a step towards extra complexity, especially when deploying to a serverless environment. I don’t think there is enough live updates going on in my application to warrant websockets
What about server sent events instead of websockets? They're pure http
Websockets are really simple and also possible in serverless environments. People seeing this video now think polling is the right solution while that’s only the case in some circumstances.
I thought of web sockets also. It's definitely possible, have seen it seamlessly implemented between a react based app and lambdas in AWS. I guess it's just a question of why you'd do it here. If the AI prompt API has progress metrics where you could show the user how far through it's processed (like 59%.. 60%.. etc.) then I feel like it would make intuitive sense for the person using it
This is a gold content I was looking for
Am I going crazy or do you have some new side project running every video? How do you manage 😫
I jump around from projects a lot 😂 my goal is to try and focus on one or two this year
@@WebDevCodyproject adhd at it's finest😂
I'm beginner web dev, I found it hard to know which features my app needs. This will be really helpful
how do you develop UI fast? I am strugging to remember all the material/ui components.
I was wondering what the pros/cons of using web sockets instead, thanks for mentioning them at the end lol
Hi there, Cody. I have been watching your videos for quite some time, and I really love them. They are straight-to-the-point and easy to understand. Could you make a video on database modelling, like how many entities will be there in production and what type of database would you use for each of the entities? (like some entities might be sql based and some might be nosql based)
that might make for a good video, I'd just need to think of a good project to model the entities for
Isn’t there a problem with this approach where if you have 2 sessions, dashboard will not be synced because only the one that created request is polling?
Yes, I’m not covering for that scenario.
Amazing guy, thanks for your good works
Very useful app for new ideas , I like this very much I'll use this for my new side projects ideas. Thank you for sharing this with us , keep going strong like always
Nice vid! Would server side events also be a nice alternative? That way the server only sends the request back when it's ready, and no useless requests. Can be a lot more advanced and more overhead to setup but could potentially be a better alternative?
It would be nice to hear your option on this.
Nice project though, i'm 100% going to check it out
SSE are great for continuously updating the UI, such as indicating the current number of users viewing something. In this case, if the server sent the current progress (e.g. ETA), SSE would make sense. But since that doesn't apply here, polling is the way to go.
In fact, if you know that the processing might take an average of 3 minutes, you could skip polling entirely for the first 2 and a half minutes. This way, you can avoid unnecessary requests.
those could work as well, but depending on how you deploy next, it's probably running on a serverless runtime which means you will have a timeout. In order for SSE to work, you have to maintain a connection which means the lambda will for a while until it's done. At that point I'd rather just use websockets personally.
@@WebDevCody ah I see. I’ve never used next or serverless websites so I’ve never had to think about that. I do want to move to server less one day though. Thanks for the reply
@WebDevCody sounds like a serverless skill issue.
You could even set up long polling so the service lets the UI know when something changes and the UI doesn't have to short poll (conuously ask) the service if it's changed.@@lucas-barake
Super useful, super insightful
How about SSE? Wouldn't be better than web sockets?
Hello. Should events from DLQ come back to normal queue after being checked and probably fixed?
May there be an approach, where failed event should "block" queue until it gets fixed?
MIND BLOWN 💡
hey but why don't just emit a server event whenever the task is done. Client can subscribe to the events with the specific id (plan id here)
Trying to do a similar architecture, just planning to use AWS Lambda for consuming the SQS queue
SSEs can be useful here as well. Cool video
Hi cody, can you make a video about SST, something like the convex tutorial u did?
Cody you may find it a lot easier to encapsulate your service into a docker container as a lambda custom runtime
I’ve done that once, it helps a lot when you need binaries installed on the container. I do think it adds to the cold start time
@@WebDevCody true indeed but a cold start may not matter much in a long running job scenario
Thanks for the video! I just have a question about your revalidatePath, wouldn't that bust the cache for all users? Or does nextjs handle it per user?
I think it’s for all users
this is great!!
the website looks so good. I want to learn how you are generating prompts for icon/ svg generation and getting similar websites info etc. Can i contribute in it too? not sure how much i can help but would love to learn AI related things a lot
We just use dalle for the images. Sorry this is a private project
@@WebDevCody No worries mate. Will check out Dalle apis. Have a great day 👍
Isn't this the case with *any* project that uses a database but has multiple people interacting with the data?
IE: 2 employees accessing user data. If you aren't polling you're incredibly likely to have stale data. Not sure if this is a misunderstanding on my part, but I don't think I've ever seen it properly addressed.
That problem doesn’t have a simple solution. If someone else modifies the data you are currently modifying, how do you handle that conflict? Warn the user? Automatically overwrite their changes? Only overwrite changes the user isn’t currently focusing on? Only overwrite inputs they haven’t already touched? Should a lock be placed on the data to prevent other users from changing it until the first user is done?
@@WebDevCody yeah i guess i was suggesting that from my naive perspective polling feels like the only decent way to do it - push changes others have made to those looking at stale data.
it was a question as much as anything else (that granted i forgot to ask XD). i've just never really seen anyone tackle it on yt which seems weird given how important it is. would love a video on the topic!
Great video! What will you do with the dead letter queue, are there any best practices for this? Invoke the lambda again or maybe invoke another lambda that sets plan status to error? Thanks!
Probably just mark the plan as failed honestly
What happens, when the status is still pending, and I refresh the page, in this case the ui will loose the id on which it was polling, how will it poll than?
is it like, when the ui reloads, the /list api will return the object with pending and a referanceId for client to start polling again?
When the new page loads, it fetched all the plans, then the effect reruns and finds the pending ones again and puts it in a list, then the other effect runs and creates the interval.
I have a question: we can also use sockets, right?...any specific reason why you selected long polling? 🤔
sockets require a lot of extra work to setup a dedicated web socket server; I'm deploying on serverless which won't support websockets.
@@WebDevCody okay... That makes sense 🧐... Thank you ❤️
1: the project is really amazing
2: great video content and explanation
Hey will you upload tutorial for this project.
Great video
Instead of polling or web sockets. Would a reactive database like Convex be a better solution? @Cody
yes, convex makes this all a hell of a lot easier, but convex works using websockets, but you don't have to think about it which is nice
@@WebDevCody Thanks for the insight, I didn't realize they used websockets under the hood
Any specific reason to choose SQS Queue? I mean why not kafka?
Kafka isn’t serverless. You pay per hour of your instance being run. Sqs is pay per use. So if I only send 10 messages a day, I’m only charged a fraction of a micro cent to use it
i've designed a system 90% replica of this one.Theres one issue, let say user triggered create Plan, now before 3 mins user logouts, now he logins again, that polingIds array is also set to defaulat(empty[]),
So theres no way to check what condition is my plan creation process in.
Idts theres a way to work with this unless u add a pollingIDs.userId array to DB
Or do any kind of sse(server side emits)
Well when the user first loads his dashboard, it fetched all his plans (which have their status). The effect I showed does a filter by status pending and sets the polling id. So even if the user logs out, it’ll all repopulate and start polling again.
What approaches can we use to make sure that both inserting the initial plan in the database and sending the message to SQS complete successfully? If for some reason the inserting in the database succeeds but after that the SQS send fails the plan will not get processed by the second lambda and it will stay in pending status
Well with the design I outlined, just consume from the dead letter queue and mark the plan as failed.
@@WebDevCody But if the initial send to SQS fails in step 4 the message won't end up in the DLQ right?
Thank you
did you use multiple custom gpt actions for this?
Yes we just invoke gtp with different prompts
Bro what theme do you use in VScode ?
Bearded theme stained blue
Is this Chrome? If yes, which theme extension do you use?
I don’t use a theme I don’t think, but yes it’s chrome
How do you handle jobs if they exceed the 15min timeouts for lambda?
find ways to split it up into smaller pieces and process in steps (step functions). I don't think I've ever found a job that can't be split up into smaller processes. I guess if you REALLY can't use lambda, you'd need a dedicated ec2 or docker container to process events
Would this be a good case for server sent events?
Yes those would work as well if wasn’t deploying to a serverless environment
Hey nice video! If I might ask, I see some aws concepts here (dead letter queue) and am wondering, if you pick that up through a certificate or just by reading related articles when searching for async solutions? 😅
learned about it from work, probably read about it as well, no I don't have any certificates
@@WebDevCody oh I see thanks for that!
I’m planning stuff to do this year and torn between building cool stuff like you do or get a certificate in devops or something to get more opportunities hopefully. Both are of course super time consuming. I already have a day job
I think I’ll go with building stuff. Certificates are cool but I found out that I only used like 10% of what they teach (I had the common aws sa associate one) 🥲
@@congminhluu5068I think a studying for a certificate is good to get exposed to things, but I'd rather learn the things I actually need when I need them instead of learning everything aws has to offer.
Using React Query with its refetchInterval might be also an alternative here I guess.
hey what's your vcode theme?
Bearded theme stained blue
I think socket will be best for this
Can Server Side Events be a good solution instead of pooling?
yeah that works as well, but usually needs a long lived connection (which next.js + serverless isn't a great option for IMO)
would we able to use webhooks here?
no because you can't have a server callback to a client (other than using SSE)
In this example why wouldn’t you just use a websocket?
Because it ads extra complexity
Useful app and useful KT
Best RUclipsr
First! 👸🏿 Also good job and I love you ❤
Gold videos!
I personally prefer this solution to websockets most of the time. Websockets add complexity and a lot of noise, and for simple cases like this, I find them a bit overwhelming. I did not see what cadence you are using for the polling. Anyway, great job, and the diagram was really clear and well-explained.
a banger
if app has a back end, it's bad design
Not sure what you mean, but every app has a backend 😂
@@WebDevCody lol. no. many html/js apps let you download them and open offline. you can literally run GPU powered 3d engines in browser, use virtually all mobile sensors on device, without needing to install anything other than browser
cool
There was no point in this video where something was explained that could not be done event driven. I feel like you made this video as a cope tbh.
I’m just explaining one option to listen to data changes, I’m not sure what you’re trying to say
Gotcha, do you have a video on event driven?@@WebDevCody