Building a Chat App - Intro to WebSockets
Vložit
- čas přidán 9. 07. 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Part One of the Building a Chat App series provides an Intro to Websockets. We'll look at how websockets provide realtime communication by building a monorepo with a Node.js server and a frontend app.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 Source Code: github.com/gitdagray/build-ch...
🔗 Playlist for this Building a Chat App Course: • Building a Chat App
Building a Chat App - Intro to Websockets
(00:00) Intro
(00:10) Welcome
(00:31) Lesson Goal
(00:38) What are WebSockets?
(01:24) Install Node.js & confirm
(02:34) Start the Monorepo
(02:53) Set up server & dependencies
(04:46) Building the WebSockets server
(06:44) Building the frontend app (client)
(13:59) Running the server & client
(15:44) Displaying messages in the server terminal
(17:54) Multiple Client connections
📚 Tutorial References:
🔗 Node.js Official Site: nodejs.org
🔗 MDN WebSockets: developer.mozilla.org/en-US/d...
⚙ Dependencies:
🔗 ws: www.npmjs.com/package/ws
Was this tutorial providing an Introduction to WebSockets helpful? If so, please share. Let me know your thoughts in the comments.
#chat #app #websockets
You are by far the best teacher on youtube .
I don't know how this is possible, but whenever I'm looking for something for my job, Dave Gray posted a video about that thing a few hours before. It's incredible, you are the best.
way to go Dave, i felt left out when you were working on your nextjs series. great one!!
Thank you Dave sir, will be waiting for other videos in this series.
I appreciate you Dave❤ Thanks for all you do…just finished the testing course and another great course is waiting
Whenever my motivation goes down, I just have to watch one of Dave's videos and I immediately want to code again. Thanks :)
Thanks so much Dave, I've been waiting for something like this
Right when I needed this. Thankyou so much, Dave. You tutorials help alot
Again a great series , thanks Dave
Thank u so much Dave really look forward to your whole series of web socket coming out including real use case in React ..
Followed all your awsome react and nextjs courses, however I LOVE the vanilla js approach in this one. Best teach on the web, my dude..
🎉🎉🎉🎉 thank you i was waiting for this from long time
As always Great video Dave . Just watched your Expressjs tutorial : )
Excited about this one 😆😘
It was surprise to me, I have been looking forward to get this course from you thanks
insane, you are so good at teaching, nobody have made me understood this before
Amazing video with zero waste of time, I could follow up with you without any effort. Great series start!!❤👌
Thanks for all the hard work!
I was looking for a channel and resource to learn websocket.
Thanks Dave for creating this
Great video as usual. I only hope we will see this in React app and also with typescript :) Never the less great video!
From last 6 months i was thinking to learn this topic but today because of you i will ko longer protagonist that and learn it. Thank you
Damn you are getting me to learn more about js and node. Thanks!
This topic is unexpected for me. very glad to see
Very nice and clean turorial ❤
Just what I needed
it's very nice tutorial, Thank you dave
Wow wow wow! Superb 🤘
Very nice tutorial sir, this series is going to be awesome, .....and hope to see a react design patterns, best practices tutorial soon.
I like it when you talk vanilla 😁
This will be a great series for sure,
Thanks in advance!
Thank you very much for this video.
Please make more videos about socket advance stuff
Thank You! Very interesting video
Thank you very much.
thank you mr Dave
항상 감사합니다.👍
thank you dave
best explanation
Much needed playlist. If possible, please cover webRtc in this series.
Thanks - WebRTC is more browser to browser vs browser to server but I do want to cover it in the future.
TY!!!
Thank you sir ❤
You are the GOAT
Awesome tutorial! Have always wanted to learn this. Do you mind doing one for using Open API apis? thanks a bunch
Please do make a chat app with react and node(mern) sir it would be helpful, there aren't any proper resources in CZcams as well as udemy, most of them are outdated as well... Excited to work on it with your explanations.
Really thanks, i learn a loot width you, width all your videos (desde argentina)
Actualmente estoy leyendo tus códigos de unos repositorios para aprender a hacer backend
Hi Dave, great video, i have a question what icon theme are using for vscode?
Hey Mr Gray,Thanks for banger tuts loved your next js and testing courses.
Would you consider covering webrtc and redis for caching in the future,they could be separate or even paid courses if do those.Thanks,love from South Africa
thank you for all you do, happy married life.
Hey Dave, thank you so much for this job that you're doing, I appreciate it, please let me ask you a question, do you know why when I hit anter or send button, I do not see my message reflected, I would appreciate your help on this, Thanks in advance.
"When I say I need pizza, everybody should know that I need pizza"
pretty much
Hey Listening you from France ! I followed your tutorials on html CSS and Js before entering a program to learn web development, it helped me a lot ! It really want to thank you !
Do you have any idea on when you gonna release the next episode of this websocket tutorial ?
I usually post on Tuesdays and Fridays
I waited too long for this video from you. At last you started. So, thank you, Dave. Please consider some demands like - difference between express server with socket server, when or how to store or retrieve chat data in/from database with best practices. I know this is a lots of work. Actually when you get more, you demand more😍. And another thing I notice, you never put semicolon in js file after end of statement. Why you do that? Is it just your choice or something else? Again lots of love.💌
Thank you - yes, just preference on this semicolons
what theme dave is using for vs code in this video?
I am making a chat application using socket io and then i see this video pop up in my youtube.
Is this a coincidence or what.
Good for refreshing basic ❤
thanks a lot, sir for this amazing tutorial, I have commented a doubt on the React 9 hours course, and it would be very kind of you, if you please reply to that.
Hey Dave. This is my first time working with WS. I've implemented individual 1 to 1 and group chats, everything works great. But I also wanna implement that part that shows all chats overview (it fetches last message from every chat that that user has from my server), and i thought it would be simple, but kinda stuck on this one. Cannot join user to all groupchats at once to know which one has updated, from ChatOverview component, can i(and even if i could it doesn't cover the scenario where a new chat is created)? Would be great if you could give me some hint. The only thing that comes to mind is to listen to changes in the DB, but idk how efficient it would be...
exactly the project I'm working on and was kinda lost 😂
Do you think the same project could be built with a single nextjs app?
can you please please show a little video of how to use websockets to make a real time google map location tracking like uber
Please cover WebRTC too
how do you run 2 servers of client app? Or you will show it in next tutorial?
I opened a 2nd instance of VS Code and started the client app with live server. However, I think you could just open a new browser tab to load the app in. That's what I'll do going forward.
Hi dave , what are you using as a node version manager ?
I am using nvm and plan to start using fnm instead
nvm but it sounds like I should check your choice out 🚀
sir , how can i simple web socket connect with my android chat application
How can we send file? Like image
How to run 2 instances of a file using live server, the way you did at the end or even two separate instances of same app on different instance of browser?
You can just open to 2 tabs in the same browser which is what I do in the following videos - however, you can open 2 instances of VS Code and then run live server in each which is what I did here.
Thanks went through all 4 videos till now and were really helpful, thanks man!!!
@@DaveGrayTeachesCodethanks, sir!
❤ thank you. Let's write some code together
Pls make tutorials about webrtc 🙏🙏🙏🙏
Sir plz make Full Stack chat App in React native with Socket and Node js
hey dave Will you deploy this project?
Hmm, why this old require syntax instead of ES6 import ?
You can use mjs imports if you want. Nothing wrong with CommonJS require. Go with your preferences.
What about socket io
Mentioned in the video. Note this is the first video of a series.
@@DaveGrayTeachesCode ok..will wait..please consider optimization of socket io server as most of the time browser seems getting slower and slower when getting data from socket server. Also include long polling and ws difference..when to choose which..Thanks in advance
Heyy 2nd like🎉
Why use websocket and not socketio?
Why not watch the video and learn the answer? 😃 I comment on this. Also consider that the first video in the series - indicated with the number 1 - might not cover everything the series will offer.
@@DaveGrayTeachesCode I will follow this series.
I really love your tutorials. but will be more lovely if you can just show your face :)
Let's see if you can persist scroll position alongside load more messages while scrolling towards top. If you do it, you are a better developer, otherwise you are just a CZcamsr. 😅
Реакция тухлее самого видоса
🫡