Build a Real Time Chat App With Node.js And Socket.io

[@smallzebra19]

He doesn't time pass, but goes straight to the point.

[@circulardep]

Real-time sockets are so awesome. I love how it's all built around the publish and subscribe pattern too. So easy to follow along. Awesome tutorial, thanks!

[@theartlegend3772]

I'm gonna go make Twitter now

[@jugadtechnologies4171]

Don't

[@pigio9033]

Jugad Technologies do

[@jimhalpert9803]

I'm gonna make discord now guys

[@jugadtechnologies4171]

@@pigio9033 He'll fail

[@haydencordeiro]

@@jugadtechnologies4171 lol

[@erensarikaya8767]

perfect. no much talk, no blabla, only what you need to know

[@WebDevSimplified]

Thanks. I'm glad you enjoyed it.

[@raeedchat4113]

We used this tutorial and now we've come such a long way! Thank you web dev simplified!

[@jeyzzz696]

thank you for having tutorials that does not go beyond 20mins. more power to you man

[@WebDevSimplified]

I try to keep the videos as short as possible since I hate long videos.

[@lordofdawn6871]

@@WebDevSimplifiedMe too

[@MaNiMaBaLLa]

This is perfect for what I needed for my website. I'm definitely gonna put this to use. You da man.

[@WebDevSimplified]

I'm glad I could help.

[@samishafi6535]

@Shlok Jain haha you dont need to download just use npm i socket.io on terminal

[@_.sunnyraj._]

@Shlok Jain Gawar

[@mathewsjoy8464]

@@WebDevSimplified how did you get the local host at the start?

[@plamam7]

@@mathewsjoy8464 vs code live server

[@AustinBeaufort]

This is exactly what I needed man, thanks! I've been trying to use arduino with johnny-five and web sockets for a while to be able to change the color of an rgb led from my phone, and this has helped a ton in seeing how web sockets work. Awesome content!

[@patrickc.6183]

That intro was great! I love your sense of humor in these videos :).

[@maverick4636]

FINALLY! A good tutorial that ACTUALLY is what i was looking for! thankyou soo much!

[@SahilSharma-gu2kx]

kzbin.info/www/bejne/i4OwhGBmbcp2d5o

[@KeskilChnProgram]

Has that code worked?

[@maverick4636]

@@KeskilChnProgram i cant remember, i think it ended up with quite a few issues

[@KeskilChnProgram]

@@maverick4636 did you fix that issues?

[@arifkasim3241]

Succinct, lucid and a calm, soothing explanation. You are an ideal tutor. Enjoyed the video very much.

[@elenakout]

excellent as always!! You are the best company on afternoons that I want a break and to just have fun with a project and learning new things!!

[@WebDevSimplified]

Thank you! I'm really glad I can make your afternoons and learning something to look forward to.

[@aaronj6571]

cant believe i faced click bait on other videos like THIS..... THANKS A LOT..subed

[@talibelm5792]

I have made my first Javascript& Node.js project 😊 Thank you very much!

[@kevinsetazate4502]

Thank you bro!!! this is what i'm looking for, no templating engines or frontend frameworks just native.

[@nithinkjoy2158]

i am very new to javascript... i didnt understand anything.. but i believe that after 6 months i will be clearly able to understand it... thank you

[@God5147]

I'm just learning node and express...etc because of my future, then I got a good page finally so I'm really thankful for this opportunity

[@scottmcmahon7209]

I've said it before and I'll say it again, you're a very smart young man :)

[@chandrashekhargundu7612]

great sir in my life

[@sudonick2161]

This guy makes node js look so easy..

[@surajvijay1937]

"and that is going to be easy" - Quote of this video

[@PandaciteYT]

This is exactly what i was looking for!

[@emr3364]

Normal people: social distancing Developers: socket io chat

[@zehrayilmaz9660]

looool reletableee

[@tanayraj2991]

Best video to understand the basic of socket.io library 💖

[@andylib]

This is amazing, what I'd be interested to see is a live ticker application e.g. for a football game

[@matstacy6830]

what is a live ticker?

[@NoName-ui5ou]

Mat Stacy basically a description of a live football (or any other sports) game. So fe when someone scores you‘ll get a message like „X scored. Current score: 2:1“ or smth like that

[@pavanvarmapinnamaraju5147]

I need answers for the following questions, can you please answer this (1) Did you observe how it became INSTANT messaging? Is browser client making so many frequent calls to backend to get instant messages? If so, it will be a huge traffic onto the backend server with heavy load. Is this what happening? I am verifying whether you understood the concept, Pavan. (2) Did you try having two different groups having the chat at the same with total isolation from each other? That means you and Varma can have one. On the same server, at the same time, me and another person can have the chatting too. (3) And it should be persisted in database so that it can be always visible when they come back some other day and continue chatting.

[@myworldbox]

Priceless content Applause from Hong Kong student XDDDD

[@Tsukasa1929]

Hey nice channel, I like the way you explain programming and how clear you manage the information, will you extend this topic using a different app, not a chat, mb a real time post update or a new DM receive??

[@WebDevSimplified]

Thank you! I do want to expand upon the idea of web sockets and real-time communication since I think it is fun to work with an really useful. I right now do not have any project ideas for such a project, but I am sure I will come up with one eventually.

[@afonsonzango]

@@WebDevSimplified You used the port 3000, what If I wanna deploy this aplication? It won't be in localhost, so, what do I do?

[@MegaNightdude]

That is so awesome! God bless you, man!

[@A68AGaming]

thanks so much for the tutorial, i always had a lot of trouble doing the networking stuff and this helped me a lot!

[@realdlmgang3486]

Guys this man is a legend thank u

[@ansuman4233]

This was very helpful to start with the basics! I have subscribed to this channel and would go through the rest of the content. Thank you :)

[@mathewsjoby6455]

Wow! That was awesome and I loved it! Hoping for more amazing content!!! 🤓🤓

[@JCDZK]

Short videos ftw. Cheers buddy, subscribed

[@francescoanastasio2021]

This worked for me, my client asked to implement a chatroom as minor feature within the app, I didn’t want to invest too much time in this. With a few more adjustments I implemented also rich text and sending pictures. The most boring part was implementing within the front end, I wanted a bubble layout (like WhatsApp) and with tailwind css it’s not immediate to achieve.

[@dpaul3447]

Your Intro's are pretty cool...👍👍

[@guygontar6106]

That's really nice and well explained! You got it straight to the point. My only question is - do you run this over Express server? you browse localhost:5000 yet the IO variable gets the 3000 port as a parameter. This is something you didn't explain.

[@selimyurekli6481]

5500 port is for live server. He ran client in live server.

[@poornipriya6198]

I am newbie to node..can anyone just explain how tat Live 5500 port created and code for tat not shown here rite..by the way rest of the code r just awesome 👏

[@klznpch7512]

thanks for teaching me how to use disconnect :)

[@saitejagatadi9711]

You have explained in a superb way bro.. Keep doing these amazing videos...

[@ParrotPentester]

Best Intro EVER!

[@migueldomingos4570]

Loved the intro

[@lolglolblol]

This is great for my school project. I think I now have a better idea of how to do it thanks!

[@danielmadison4451]

Hey Kyle what a great video. I have a running Apache server and a Mysql server running from scratch. Now I want to hook up my Database to this chat server. Then I will have 3 ports all doing something important. LOL I love a challenge.

[@avineakduwal1518]

Thanks a lot.... Really searching for short sweet to the point vdo...

[@karunakarsarabu]

i watch all your videos. i searched the net for a language that fits me all over the year at free. finally i find yours. i learnt express.js ejs and rest api by following your videos of course reactjs

[@mhdyousuf3392]

I always wondered how chatting works... Awesome content and thanks a lot!

[@WebDevSimplified]

You're welcome!

[@thinkhub1003]

Great thing is, you've done it in under 20mins.

[@akshhay]

Bruh, what the heck you doin in this computer stuff!!! Go get Hollywood contracts!! You look like a god😍

[@WebDevSimplified]

I am most definitely not enough of a people person to do that. I would much rather stick to my computer teaching and solving problems all day.

[@syafiq55555]

I'd love to see a more advance project with socket.io thank u for explaining ! Appreciate it

[@WebDevSimplified]

I have a part 2 of this video you can checkout which goes a bit more in depth.

[@syafiq55555]

@@WebDevSimplified thank you

[@luis96xd]

Amazing tutorial, everything was well explained, thanks!

[@balance_andbliss]

Thank you so much for this. Please make a tutorial video showing how we can create PWA chat app ? Great work dude! I speak for all newbies out there when i say... THANK YOU!

[@ganeshkalidas1068]

Can you please explain the address bar "127.0.01:5500/index.html", that would be helpful." Like where exactly you have kept your (index.html) file/s. And directory structure of the same.

[@WebDevSimplified]

I am using an extension called live server with VSCode that sets up the server for me.

[@0192kamil]

@@WebDevSimplified Hey! How would you be able to set this up on websites like netlify?

[@denisedrey921]

Thank you dude, that was amazing!

[@rvbrindle]

Great video! after scrolling the comments to see you are using live-server i now seem to be getting lots of CORS errors in the terminal when trying to run in browser

[@chazcarothers135]

I did too. Did you ever find a solution?

[@ehteshamsiddiqui6841]

I have implemented my messaing service using you tutorial thanks alot!! I have a blocker though, I'm trying to create a channel where in a master user can send the message to multiple selected users. I'm not sure how I can create a dynamic channel and listen to it only for the user whom the master user sends the message

[@richardlatham7927]

Thanks for this. I was looking for an example to work through to help me learn about connect.io. This has worked well,

[@robertomoura552]

Awesome video! Thanks! Can you also make a tutorial on how to deploy it? (On AWS for example)

[@ThatGuyCream]

This man has 999 000 subs! GET HIM TO 1 MILLION RIGHT NOW!!

[@saswatisinha7735]

thanks....it worked..i have learned so may things from this

[@RonHadri]

For the noobies out there like myself, you need to reboot your computer after installing node.js. Otherwise, you will get an error message like the one below after trying to run "npm init" from the terminal: npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program.

[@Krokodil986]

Haven't tried it yet but seams like it'll work. 😆🤪🤪

[@suelingsusu1339]

Well done... this is nifty!!!👏👏👏🙏🙏🙏🙏👌👌👌👌👌🖖🖖🖖🖖🖖

[@abdulazizalghafli5240]

Great topic. It's easy to understand from you. Thank you.

[@WebDevSimplified]

You're welcome!

[@afnanamer9213]

Brilliant!! You saved my life I was looking for a tutorial that shows how to upload files or pictures in a real time chat app? Do you have any basics ideas of how we can do it or any resources? Thanks a lot.

[@ib6548]

This perfect for what I needed right now. Thank you

[@WebDevSimplified]

You're welcome!

[@Tri-lime_Spanish]

YOU´RE SO GOOD MAN

[@HackerFlavio]

amazing video did had to do a bit of work arounds but over all works perfectly

[@HackerFlavio]

@Google Security you have to be more specific

[@karlj.5730]

Please create a tutorial a chat system with a database using MySQL and node.js. With just particular user you wanted to chat. AWESOME TUTORIAL BY THE WAY!!!!!!!!!!!!!!

[@MG-bm5oj]

Amazing and how simple it was. How are you thinking in making it more complex? Images?

[@maayanpeleg5148]

May I ask how the index.html is being views on port 5000

[@techdoge3625]

cuz it dont work dummy

[@viditsinghbrahmania1476]

Using vscode extension liveserver, you can do it other way using npm too. liverserver also uses npm under the hood

[@electrotsmishar]

Perfect tutorial. Thanks again

[@moneyisenergy]

Thank you that was a great tutorial!

[@z1nc0r3]

Great video. But newbies like me can't understand some parts. So this video is not really for the beginners.

[@mohammeddhillshaardthd2122]

Awesome sir... Just let me give a try to node...✌👍

[@babebri10]

Thanks for the video! How did you open the browsers for the client and server?

[@safari2411]

Thanks for the excellent explanation!

[@WebDevSimplified]

You're welcome

[@kfiryahav2987]

YOU ARE THE BEST!!!

[@nmathew1987]

I'm confused by this. you never actually set up a server that sends the index.html file. How is the page loading in this example ?

[@BadeAndenB]

I'm struggling with the same thing, can someone please explain this?

[@kishanlal676]

I think he's using Go Live feature in VS Code. Not sure though. You can take a look at the timestamp 2:03

[@giorgigulishvili7642]

use live server in vs code

[@echomouser]

you need the live server plugin to vs code then you can right click in the html file and click live sever

[@jacquibaxter959]

The server runs independently from the HTML. The HTMLs attached JavaScript will interact with the server

[@nnnpooh]

This video is perfect, which is perfect.

[@ragulharisankar8039]

Please make a tutorial video on webRTC using socket.io and ur videos are amazing and very easy to learn.

[@samuelkannuberg8462]

What do you do about the CORS error?? I've tried to find answers on google but i don't know how to implement it into my code...

[@hannamitri3589]

same!

[@chazcarothers135]

Same here! Did you ever find a solution?

[@samuelkannuberg8462]

@@chazcarothers135 No sadly I didn't

[@bentongrayson]

Loved the video! Helped me learn this so well! One slight problem though... I get this thing when people join saying "undefined: undefined". What does that mean and how do I fix it?

[@WebDevSimplified]

I am not sure what you mean?

[@bentongrayson]

Web Dev Simplified I figured it out. I was sending a message to all clients saying Hello, but it wasn’t working properly. So I just removed it and now it works perfectly.

[@bentongrayson]

Web Dev Simplified Now that that’s fixed, how would I go about putting this onto my website? I’m hosting a website right now, do I add it to that with a link? Is it really that simple?

[@WebDevSimplified]

If you want to make this part of your website than you need to deploy this with your website and add a link to the chat application somewhere.

[@Legitivity]

Great video! very helpful! thank you!

[@4541047]

Great contents. Please continue to be unique with your contents. All the others web channels are just copying from Traversy Media and he's friends. But I really glad to see your different and great stuff!! Thanks!

[@WebDevSimplified]

Thank you so much. I view Brad as a huge influence but I created my channel specifically to make content that is simple and concise which was what I found lacking when I was learning web development. I am glad that this teaching style resonates with you.

[@lingxingkong5351]

Thank you for your video, it helps me a lot. But I am so curious that how can I add the real-time voice chat function …thank you very much

[@baatar]

How did you deal with the CORS error? Do you have a browser extension installed to resolve that?

[@chazcarothers135]

Same here. Did you ever find a solution?

[@telugucult1629]

Thank you I am Searching for this

[@hsngsoftware4380]

Greatly explained

[@31635428]

Excelent video. I want to know how do you take this to a web hosting not heroku? Without running in CMD on localhost. Thanks.

[@AwesomeCadecraft]

Same, I am a bit confused because the server runs through the Live Server extension, so how do you get this to work outside of VS Code? (by the way you commented this a year ago, so if you figured it out could you explain?)

[@ovasiles]

@@AwesomeCadecraft i have the exact question

[@Volnixz]

Anyone could perhaps tell me why he uses a form for the submit button? Could perhaps prevent the hassle of having to prevent default behaviour of reloading the page

[@colinbecko]

I found this easy to follow, however I am having issues with starting the server as well as getting socket-io to import properly. I had to add a http-server command I found online to get the server running. I believe I followed the proper instructions (even downloaded the source code and ran that) but I'm also getting these 'io is not defined' errors, even though I ran npm install socket-io. Any tips? Thank you!

[@KaydaFox]

`npm i socket.io` is the command to run, if you havent found the answer yet

[@AlbertRayJuarez]

@@KaydaFox I did the 'npm i socket.io' and I still get 'io not defined' errors, suggestions?

[@donovanelliott9060]

@@AlbertRayJuarez on the server or client?

[@asdasddas100]

This gave me a great idea. Thank you

[@jeffrinmanovaprabahar]

Good content and good content delivery as usual.

[@WebDevSimplified]

Thank you

[@JustinTheVlogger]

I encountered an error before, and the error is 'io is not defined'. What I did is I change the arrow function in my server.js file into an es5 function which is io.on('connection', function(socket){ socket.emit('Chat Message', 'hello Socket'); }); and it worked!

[@anandpari24]

Nice man, Love it

[@carloacebedo6943]

Nice tutorial. How can we persist the the messages in a database though? What kind of database to use?

[@shashwatpandey3556]

4:48 man... that really small heads up about running two services on two different servers hosted separately... You don't just teach web-dev you also introduce system designing and production ready code.

[@RobertWildling]

Gotta love that intro!!! :-D

[@paradox2738]

if anyone, like me, a node bignner watch this video thinking i can understand and duplicate 17 min video, dont waste your time. he explains it like the audince is a pro nodder

[@metekaba6532]

Great explanation! Is this project based on WebRTC or WebSocket? I actually could not find any chat application based on WebRTC on youtube. Do you work on WebRTC?

[@WebDevSimplified]

I do not work with WebRTC. It is meant for peer to peer communication instead of client to server communication so it has a bit different use cases.

[@metekaba6532]

@@WebDevSimplified Okay I see, so I think it is based on web-socket as you explained in the description, right? My internship supervisor told me that I have to research for both technology. That's is why wanted to be sure about which technology it is. Thanks for your quick response.