Easiest way to build real-time web apps? WEBSOCKETS with NestJS
Вставка
- Опубліковано 4 лип 2024
- In this video we take a look at the fundamentals of building a real-time web application, such as a chat application, using websockets with NestJS and socket.io as well as VueJS on the client!
00:00 - Preview
00:20 - Intro
01:45 - New application
02:05 - Dependencies
03:41 - Intro to Websocket Gateway
04:33 - CORS
07:43 - findAllMessages
09:23 - createMessage
13:29 - join / identify
17:13 - typing
20:55 - new VueJS client
34:55 - fix mistake!
36:15 - Working demo
38:05 - Wrap up
I can see you becoming "that nestjs guy". Very easy and straightforward explanation. Thank you.
Thanks! I don’t really plan to be though 😄 there’s so much more to web dev that I’d like to cover but I’m building up to it
I found your channel about a week ago, and I am really enjoying the content you are making. Keep up the good work!
Glad to hear that! Thanks for stopping by to comment!
i love binge watching your tutorials , feels like im working with a senior during my free time .
This is amazing. Thank you for creating this tutorial marius, always a treat to watch your content
Many thanks for NestJS tutorial. Very handy!! I really enjoy learning.
Best explanation of how to make a simple app using websockets. Thank you
Sir, you are a really good teacher. Very calm and crystal clear.
Thank you!
Thank you very much for this content 🤗🤗. With this out now, I think you have covered a lot of stuff in nestjs. Be blessed
Thank you 🙂
I am really happy I found this vid...I'm planning to use WebSocket in nestjs. Thanks for the vid..
Great! Good luck on your project!
@@mariusespejo thank you💪🏿
Great tutorial! Thanks so much 🙏
Nice content, dude!
You are a saint my friend, if I still had hair I would have ripped it all out without understanding websocket
thanks for your tutorial, please realease more content Nestjs like this
😄🙌
Your desktop wallpaper is great!..
thanks from Indonesia, its awesome💯
Hello! 👋
thanks, the tutorial so helpfull. i hope can add an other project like this with reactjs
Thanks a lot. Websocket can reduce the network traffic if sending only new messages as broadcast. I am wondering if the app can make high avaiable (multi k8s pods)
Excellent video.
Can you share the repository of the project you created in the video?
You're great, thanks alot
Great video! Do you have a repo of this?
Also make a complete tutorial on soft delete with nestjs and prisma🙏🏽
Thank you so much for this tutorial🙏🏽🙏🏽
soft delete can implemented just by using deletedAt as null and adding this filter in each query
very nice
where Source code :(
thank this lesson is really good
Glad you think so, thanks!!
Have you thought about having the source code for each video somewhere? Would be super useful 🙌
Yess!
do you recommand dt 770/pro for watching movies?
I haven’t tried movies although for music I think it sounds amazing. It’s meant to be a studio monitor so it lets me hear all the details. I’m not an audio expert at all but that does mean it’s meant to be somewhat “neutral”, and I’m not sure what’s ideal for movies.
For my use case if it’s not obvious I use it to monitor my mic to make sure it’s not recording things it shouldn’t, and to generally hear its quality in realtime as well as in post production
Great Video as always.
Could you make a follow up on this that goes a little more in depth? would be really nice (chatrooms and stuff and maybe with local strategy auth).
Greetings!
Yeah that could be a fun tutorial, will think about it!
Hope can get video for further implementation of this websocket in Nestjs, like updated edit features or multiple room
Yeah I think that would be fun to build! I’ll see if I can plan for that, thanks for the suggestion
Nice video, what vs theme are you using?
Monokai pro on this one I think!
Can you do a video on nest with casl but dynamic permission assign to roles stored in the database?
I’ll consider it, I don’t think there’s really much to it though, just store the rules as JSON and manage it. Casl can initialize an ability from json
thnks for your videos, bro
Yeah man, glad you like it!
In 30:57, won't the setTimeout actually kind of bombard the clients with multiple "isTyping = false"? For each time we're calling the "isTyping = true" event we're creating a new setTimeout and actually de-referencing it afterwards, without killing the original first. (maybe this is covered later in the video, but I wanted to mention it before I forgot, sorry if it is already covered)
Sorry been a while since I wrote the code but I think you’re right, probably ideal to clearTimeout, I think I intended to do that that’s why we have the timeout variable defined. Basically we’re just trying to debounce there. Good eye!
@@mariusespejo I was going to comment the same thing.
I wonder how you are able to explain such things in a very simple way, Keep this up and maybe consider telling us how you approach learning these new things! Thanks Anyways
Thank you, that could be a good video topic for the new year (how to approach learning things)! Will definitely consider it
@@mariusespejo Dying to watch it
You are a monster on nestjs, thank's for the lesson! A video with Kafka os nestjs its will be nice too
Thanks for the idea!
When you are working on REST API you can document your controllers using Swagger but what alternatives do we have while workig on sockets?
There’s a thing called swaggger-socket but that’s only if you were attempting to do REST over websockets, which is probably uncommon. Other than that I’m not sure there’s any common standard for how to structure websockets so there likely isn’t much swagger-like solutions. You could always make your own custom documentation though
@@mariusespejo thanks
MARIUS ISTHE LIONEL MESSI OF NEST JS. thanks for this bro. awesome
I'm torn between sending the real-time data in the payload and just publishing a new "resource" created event and having the clients that are subscribed to that event re-fetch the data for that resource. On one hand, you save having your clients send multiple requests for the resource by including the data in the payload. On the other hand, by forcing them to re-fetch the data, you get to have one source of truth. Thoughts?
I’m sure there are more details to your use case but my gut reaction is that: if you’re already using websocket, meaning you have a persistent connection, why wouldn’t you just send the data directly? You still have one source of truth which is the server who now says “hey all you clients this is now the current data!” And clients could react and update immediately. However your other idea of simply publishing a trigger, it still means that each client still needs to spend additional time to fetch data which sounds like could have been available to them at the same time they got the trigger. However, there is nothing inherently wrong with that approach. If it’s because you’re just trying to reuse APIs, that makes sense to me
@@mariusespejo Hmm, that is a very good point. I just have to make sure that all data transformation occurs upfront within the service's method before returning it. Then it would be as you said with the server being the source of truth. Thanks.
Hello. How do you store connected users on the server in the real applications?
The underlying websocket library you use like socket.io usually will take care of keeping track of which clients are connected. You just need to build a way for your server to identify who the user is on that client, e.g. basically auth. Put those two together and you’ve got your list of connected users.
Hey @Marius thanks a lot for all your Nestjs content I really learned a lot from your channel. I have a request if you don't mind it would be helpful for me and a lot of ppl in the Nests community. I been trying to find a Nestjs React WebRTC video tutorial and surprisingly could find a single one online or youtube! If you could please create one that will be amazing!
Thanks for the suggestion, will keep it in mind!
great work v😍, but i think it's way better if u add the source code.
thanks so much, and how can we authorize connected users?
I have some videos on auth. The fundamentals are all the same, you need a way to identify the user (e.g. perhaps upon connection require a login event, or do login via REST prior to allowing a connection). Once you can identify which user is dispatching an event, then it’s up to you how to do authorization, you can pull the user record and check they have permissions etc. Generally with nest you can utilize guards to do those checks. Few videos about that in the channel
Tell please, what is that font u're using?
I believe I’m using cascadia code at the moment, I’m not sure haven’t changed it in a while
Hello, great video. Can you share the Github link , so I have to study it more easily?
Thanks!
Hey! I’m sorry but the code isn’t on github
@@mariusespejo Okay, thank you anyway :)
I want to create a project like whatsapp, where users choose the user which one I want to talk, and user click on them and send an message, and only that person get notified and receive the message I want to add this type of functionality in my nestjs app how can I implement this? please help
Take a look at socket.io, I believe it has built-in support for rooms
@@mariusespejo can you please make a video in this topic?
Can gateways be protected by using guards?
To some degree yes, here’s an example:
stackoverflow.com/questions/58670553/nestjs-gateway-websocket-how-to-send-jwt-access-token-through-socket-emit
However I don’t think you can add a guard to the entire gateway as a whole, and notice in github open ticket for handleConnection, can’t put a guard on it:
github.com/nestjs/nest/issues/882
Hi can you do socket authorization next? :)
I have a few videos on authorization already, it’s pretty much the same principles. E.g. see the CASL videos that I’ve made
My vue demand v-for key, can i know what it is
if anyone get the error like me, give it a key like this should work
Nice tutorial, unfortunately after refresh page names doesn't appear in my messages.
You can dispatch the current list of messages to a client when they connect, or you can use a separate API call to fetch it initially. Various ways to go about it
Please also makje a tutoril on the topic of Server sent event on nestjs using prisma
Using websockets is already one of the ways to directly push events from the server, what else are you looking for exactly?
@@mariusespejo to learn more as to understand the alternative way too..
I just heard sse is also good fot push event and compare to web socket, sse is good to go - i don't know what is it so I am here to know!
If possible do make a tutorial one🙏🏽
Ah! I actually didn’t even know that was a thing, today I learn from you, thanks! I’ll look into it and maybe form opinions about it first. But at quick glance, it looks like it’s not bidirectional so the use case is limited to communication only coming from server. Also there is a hard limit of 6 connections per browser, unless it’s on HTTP/2 … that sounds pretty limiting. I could see this being useful for push notifications though!
ey mate, do you have the code? I am trying run it but connection refused all the time.
Hey sorry not on github at the moment, I recommend taking a look at the official docs for the most up to date guidance
My issue was related with my M2 chip and my node version. Is already working fine. Thank you for your answer.@@mariusespejo
great men thinks
can you share those code ?
Sorry it’s just in the video for now, you’ll find it’s actually not a lot of code to write
Can we use graphql subscription?
You can! Graphql subscriptions use websockets under the hood. So it’s just a different interface basically but same idea. I have an example of that in my teamseas video if you’re interested
@@mariusespejo yes please i am migrating to fully graphql with graphql-ws
It’s in the channel!
@@mariusespejo Is this the same as Server-Sent Events?
Paul, sorry misunderstood the question. No it’s not the same as server-sent, which is not bidirectional like websockets are
Please, leave github link on project here
Would be cool to paste less code in. Sometimes I was a bit lost on where I should write what and where your code came from. Otherwise great Tutorial, keep at it!
Thanks for feedback. Definitely still trying to find a good balance for things such as pacing and writing vs pasting code
good job, but every video tutorial about programming must have a link to the source code IMHO)
Sure thanks for feedback, I’ll think about it. My content is already designed to be something you can follow along with from start to finish though. There are a lot of people that simply want the code and not to watch and you just won’t get the same value out of the content that way in my opinion.
add repo pls
Hey Marious, Is everything okay? You have been off for so long. :)
Thanks for checking in, everything is good! I am working on a new video, just had a lot on my plate this past month
thanks for your excellent tutorial, but I'm kind of tired of people explaining the same real time chat application example. I cannot find a way to connect to an external webSocket from an exchange for example to retrieve book orders, and there is not a single tutorial on consuming an already existing webSocket. So frustrating.
It’s important to look past the “it’s just another chat app” and actually learn and understand the underlying fundamentals required to engineer a more specific problem, e.g. if you’re putting together your own real-time feature. Your use case however is about integration with a 3rd party. Any external api generally should include usage docs, you should rely on that not tutorials. If it doesn’t have docs… reach out to the devs
Seriously worst possible tutorial you are just creating the entire application without any checkpoints
There are timestamps in the description…? what checkpoints are you looking for?
@@mariusespejo We need to check in between how server is working. Postman testing in between so that people can code along.
As of now we I say I want to code along with you I would just get to know my codes works at the end of the video
Why 1/4 of the screen is your face? We all came here for the code ...
but you’re the only one who has complained so far lol have a great day