Тёмный

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

Web Dev Simplified
Подписаться 1,6 млн
Просмотров 554 тыс.
50% 1

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

 

4 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 765   
@smallzebra19
@smallzebra19 3 года назад
He doesn't time pass, but goes straight to the point.
@theartlegend3772
@theartlegend3772 4 года назад
I'm gonna go make Twitter now
@jugadtechnologies4171
@jugadtechnologies4171 4 года назад
Don't
@pigio9033
@pigio9033 4 года назад
Jugad Technologies do
@jimhalpert9803
@jimhalpert9803 4 года назад
I'm gonna make discord now guys
@jugadtechnologies4171
@jugadtechnologies4171 4 года назад
@@pigio9033 He'll fail
@haydencordeiro
@haydencordeiro 4 года назад
@@jugadtechnologies4171 lol
@MaNiMaBaLLa
@MaNiMaBaLLa 5 лет назад
This is perfect for what I needed for my website. I'm definitely gonna put this to use. You da man.
@WebDevSimplified
@WebDevSimplified 5 лет назад
I'm glad I could help.
@samishafi6535
@samishafi6535 4 года назад
@Shlok Jain haha you dont need to download just use npm i socket.io on terminal
@_.sunnyraj._
@_.sunnyraj._ 4 года назад
@Shlok Jain Gawar
@mathewsjoy8464
@mathewsjoy8464 3 года назад
@@WebDevSimplified how did you get the local host at the start?
@plamam7
@plamam7 3 года назад
@@mathewsjoy8464 vs code live server
@ygeb93
@ygeb93 3 года назад
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!
@AustinBeaufort
@AustinBeaufort 4 года назад
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!
@emr3364
@emr3364 4 года назад
Normal people: social distancing Developers: socket io chat
@zehrayilmaz9660
@zehrayilmaz9660 3 года назад
looool reletableee
@raeedchat4113
@raeedchat4113 2 года назад
We used this tutorial and now we've come such a long way! Thank you web dev simplified!
@jeyzzz696
@jeyzzz696 5 лет назад
thank you for having tutorials that does not go beyond 20mins. more power to you man
@WebDevSimplified
@WebDevSimplified 5 лет назад
I try to keep the videos as short as possible since I hate long videos.
@lordofdawn6871
@lordofdawn6871 3 года назад
@@WebDevSimplifiedMe too
@maverick4636
@maverick4636 2 года назад
FINALLY! A good tutorial that ACTUALLY is what i was looking for! thankyou soo much!
@SahilSharma-gu2kx
@SahilSharma-gu2kx 2 года назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-URMS-08eCA8.html
@KeskilChnProgram
@KeskilChnProgram 2 года назад
Has that code worked?
@maverick4636
@maverick4636 2 года назад
@@KeskilChnProgram i cant remember, i think it ended up with quite a few issues
@KeskilChnProgram
@KeskilChnProgram 2 года назад
@@maverick4636 did you fix that issues?
@patrickc.6183
@patrickc.6183 4 года назад
That intro was great! I love your sense of humor in these videos :).
@erensarikaya8767
@erensarikaya8767 5 лет назад
perfect. no much talk, no blabla, only what you need to know
@WebDevSimplified
@WebDevSimplified 5 лет назад
Thanks. I'm glad you enjoyed it.
@kevinsetazate4502
@kevinsetazate4502 5 лет назад
Thank you bro!!! this is what i'm looking for, no templating engines or frontend frameworks just native.
@elenakout
@elenakout 5 лет назад
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
@WebDevSimplified 5 лет назад
Thank you! I'm really glad I can make your afternoons and learning something to look forward to.
@arifkasim3241
@arifkasim3241 2 года назад
Succinct, lucid and a calm, soothing explanation. You are an ideal tutor. Enjoyed the video very much.
@surajvijay1937
@surajvijay1937 3 года назад
"and that is going to be easy" - Quote of this video
@talibelm5792
@talibelm5792 2 года назад
I have made my first Javascript& Node.js project 😊 Thank you very much!
@PandaciteYT
@PandaciteYT Год назад
This is exactly what i was looking for!
@aaronj6571
@aaronj6571 4 года назад
cant believe i faced click bait on other videos like THIS..... THANKS A LOT..subed
@MegaNightdude
@MegaNightdude 4 года назад
That is so awesome! God bless you, man!
@myworldbox
@myworldbox 4 года назад
Priceless content Applause from Hong Kong student XDDDD
@nithinkjoy2158
@nithinkjoy2158 4 года назад
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
@God5147 4 года назад
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
@francescoanastasio2021
@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.
@A68AGaming
@A68AGaming 4 года назад
thanks so much for the tutorial, i always had a lot of trouble doing the networking stuff and this helped me a lot!
@scottmcmahon7209
@scottmcmahon7209 3 года назад
I've said it before and I'll say it again, you're a very smart young man :)
@andylib
@andylib 5 лет назад
This is amazing, what I'd be interested to see is a live ticker application e.g. for a football game
@matstacy6830
@matstacy6830 4 года назад
what is a live ticker?
@NoName-ui5ou
@NoName-ui5ou 4 года назад
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
@sudonick2161
@sudonick2161 3 года назад
This guy makes node js look so easy..
@mathewsjoby6455
@mathewsjoby6455 2 года назад
Wow! That was awesome and I loved it! Hoping for more amazing content!!! 🤓🤓
@ansuman4233
@ansuman4233 4 года назад
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 :)
@denisedrey921
@denisedrey921 4 года назад
Thank you dude, that was amazing!
@tanayraj2991
@tanayraj2991 4 года назад
Best video to understand the basic of socket.io library 💖
@Tsukasa1929
@Tsukasa1929 5 лет назад
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
@WebDevSimplified 5 лет назад
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
@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?
@avineakduwal1518
@avineakduwal1518 3 года назад
Thanks a lot.... Really searching for short sweet to the point vdo...
@JCDZK
@JCDZK 3 года назад
Short videos ftw. Cheers buddy, subscribed
@dpaul3447
@dpaul3447 4 года назад
Your Intro's are pretty cool...👍👍
@luis96xd
@luis96xd Год назад
Amazing tutorial, everything was well explained, thanks!
@saswatisinha7735
@saswatisinha7735 4 года назад
thanks....it worked..i have learned so may things from this
@scottj6296
@scottj6296 3 года назад
*EDIT:* I have solved the issue. He npm installed a deprecated version of socket.io (2.20) so it seems this code no longer works with the latest version (4.1.1) Will have to consult the socket.io docs to complete this project. Edit 2: Still no luck getting socket.io v4. to work. *The problem* At 6:30 I do not get the socket.emit to log "hello world" in the console, so the socket wasn't working right. Finally I tried copying his github code and the app doesn't work (you an only see your own chats.) So I thought it might be different syntax for sockets 4.0 and above and we need to consult the docs, or install an old version of socket.io. Then I confirmed that version 2.20 prints hello world to the console. *tldr:* He installed socket.io 2.20. The current version is above 4.1.1 and this code won't work right with the new version.
@mohamedjebril8574
@mohamedjebril8574 3 года назад
To make it work with latest version of socket.io ^4.1.2 : 1- in server.js change const io = require('socket.io')(3000) to const io = require("socket.io")(3000, { cors: { origin: "*", }, }); 2- in Visual studio code setup live server extension, then open index.html in VS Code and right click inside the page then choose open with live server, this will make the page open in port 5500 or any available port
@lukehenize1800
@lukehenize1800 2 года назад
@@mohamedjebril8574 Thank you so much! Looked on socket.io documentation but couldn't find a fix anywhere
@raushankumargupta7018
@raushankumargupta7018 2 года назад
@Scott J thank you very much & Mohamed Jebril sir😊
@alexeialpaka
@alexeialpaka Год назад
@@mohamedjebril8574 Thank you so much bro, you saved me
@dou4219
@dou4219 Год назад
@@alexeialpaka does it still work?
@klznpch7512
@klznpch7512 3 года назад
thanks for teaching me how to use disconnect :)
@saitejagatadi9711
@saitejagatadi9711 4 года назад
You have explained in a superb way bro.. Keep doing these amazing videos...
@moneyisenergy
@moneyisenergy 4 года назад
Thank you that was a great tutorial!
@lolglolblol
@lolglolblol 4 года назад
This is great for my school project. I think I now have a better idea of how to do it thanks!
@akshhay
@akshhay 5 лет назад
Bruh, what the heck you doin in this computer stuff!!! Go get Hollywood contracts!! You look like a god😍
@WebDevSimplified
@WebDevSimplified 5 лет назад
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.
@pavanvarmapinnamaraju5147
@pavanvarmapinnamaraju5147 4 года назад
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.
@danielmadison4451
@danielmadison4451 2 года назад
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.
@ehteshamsiddiqui6841
@ehteshamsiddiqui6841 2 года назад
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
@realdlmgang3486
@realdlmgang3486 3 года назад
Guys this man is a legend thank u
@richardlatham7927
@richardlatham7927 4 года назад
Thanks for this. I was looking for an example to work through to help me learn about connect.io. This has worked well,
@abdulazizalghafli5240
@abdulazizalghafli5240 5 лет назад
Great topic. It's easy to understand from you. Thank you.
@WebDevSimplified
@WebDevSimplified 5 лет назад
You're welcome!
@balance_andbliss
@balance_andbliss 4 года назад
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!
@ib6548
@ib6548 5 лет назад
This perfect for what I needed right now. Thank you
@WebDevSimplified
@WebDevSimplified 5 лет назад
You're welcome!
@electrotsmishar
@electrotsmishar 4 года назад
Perfect tutorial. Thanks again
@Legitivity
@Legitivity 3 года назад
Great video! very helpful! thank you!
@danielmadison4451
@danielmadison4451 2 года назад
CORS ERROR FIX: In server.js file "const io = require('socket.io')(3000, ( cors: { origin: "*" } } );"
@danielmadison4451
@danielmadison4451 2 года назад
I think I screwed up my braces and parentheses "const io = require('socket.io')(3000, { cors: { origin: "*" } } );"
@-ShabariNathanL
@-ShabariNathanL 2 года назад
@@danielmadison4451 Thanks
@migaratennakoon5439
@migaratennakoon5439 6 месяцев назад
@@danielmadison4451 Thank you
@karunakarsarabu
@karunakarsarabu 4 года назад
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
@HackerFlavio
@HackerFlavio 3 года назад
amazing video did had to do a bit of work arounds but over all works perfectly
@HackerFlavio
@HackerFlavio 2 года назад
@Google Security you have to be more specific
@kfiryahav2987
@kfiryahav2987 3 года назад
YOU ARE THE BEST!!!
@ThatGuyCream
@ThatGuyCream 2 года назад
This man has 999 000 subs! GET HIM TO 1 MILLION RIGHT NOW!!
@Krokodil986
@Krokodil986 4 года назад
Haven't tried it yet but seams like it'll work. 😆🤪🤪
@guygontar6106
@guygontar6106 4 года назад
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
@selimyurekli6481 4 года назад
5500 port is for live server. He ran client in live server.
@poornipriya6198
@poornipriya6198 3 года назад
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 👏
@robertomoura552
@robertomoura552 4 года назад
Awesome video! Thanks! Can you also make a tutorial on how to deploy it? (On AWS for example)
@suelingsusu1339
@suelingsusu1339 2 года назад
Well done... this is nifty!!!👏👏👏🙏🙏🙏🙏👌👌👌👌👌🖖🖖🖖🖖🖖
@rvbrindle
@rvbrindle 4 года назад
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
@chazcarothers135 2 года назад
I did too. Did you ever find a solution?
@nnnpooh
@nnnpooh 3 года назад
This video is perfect, which is perfect.
@mhdyousuf3392
@mhdyousuf3392 5 лет назад
I always wondered how chatting works... Awesome content and thanks a lot!
@WebDevSimplified
@WebDevSimplified 5 лет назад
You're welcome!
@telugucult1629
@telugucult1629 4 года назад
Thank you I am Searching for this
@asdasddas100
@asdasddas100 4 года назад
This gave me a great idea. Thank you
@thinkhub1003
@thinkhub1003 4 года назад
Great thing is, you've done it in under 20mins.
@syafiq55555
@syafiq55555 5 лет назад
I'd love to see a more advance project with socket.io thank u for explaining ! Appreciate it
@WebDevSimplified
@WebDevSimplified 5 лет назад
I have a part 2 of this video you can checkout which goes a bit more in depth.
@syafiq55555
@syafiq55555 5 лет назад
@@WebDevSimplified thank you
@safari2411
@safari2411 5 лет назад
Thanks for the excellent explanation!
@WebDevSimplified
@WebDevSimplified 5 лет назад
You're welcome
@migueldomingos4570
@migueldomingos4570 3 года назад
Loved the intro
@Tri-lime_Spanish
@Tri-lime_Spanish 2 года назад
YOU´RE SO GOOD MAN
@ParrotPentester
@ParrotPentester 3 года назад
Best Intro EVER!
@mohammeddhillshaardthd2122
@mohammeddhillshaardthd2122 4 года назад
Awesome sir... Just let me give a try to node...✌👍
@MG-bm5oj
@MG-bm5oj 4 года назад
Amazing and how simple it was. How are you thinking in making it more complex? Images?
@chungtunguyen6135
@chungtunguyen6135 4 года назад
thanks for this tutorial my brother! keep going! i'll give you sub and like your video!
@karlj.5730
@karlj.5730 4 года назад
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!!!!!!!!!!!!!!
@rootdev8106
@rootdev8106 4 года назад
I love watching you coding! Keep it up :) Greets from germany
@maayanpeleg5148
@maayanpeleg5148 4 года назад
May I ask how the index.html is being views on port 5000
@techdoge3625
@techdoge3625 3 года назад
cuz it dont work dummy
@viditsinghbrahmania1476
@viditsinghbrahmania1476 3 года назад
Using vscode extension liveserver, you can do it other way using npm too. liverserver also uses npm under the hood
@soultouchingsongs
@soultouchingsongs 4 года назад
Thanks a ton👍. You are just awesome..
@afnanamer9213
@afnanamer9213 3 года назад
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.
@lazyworkroom
@lazyworkroom 4 года назад
Thanks as always! :)
@sadico8344
@sadico8344 5 лет назад
A bit complicated but useful and interesting :)
@lucasdf8694
@lucasdf8694 3 года назад
Thank you very much!
@lingxingkong5351
@lingxingkong5351 4 года назад
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
@Lolo5
@Lolo5 4 года назад
thanks. good video as always
@Sanyat100
@Sanyat100 3 года назад
Simple explanation
@hsngsoftware4380
@hsngsoftware4380 4 года назад
Greatly explained
@anandpari24
@anandpari24 5 лет назад
Nice man, Love it
@romimaximus
@romimaximus 5 лет назад
That was awesome...thankx for sharing
@WebDevSimplified
@WebDevSimplified 5 лет назад
You're welcome! I'm glad you enjoyed it.
@ganeshkalidas1068
@ganeshkalidas1068 5 лет назад
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
@WebDevSimplified 5 лет назад
I am using an extension called live server with VSCode that sets up the server for me.
@0192kamil
@0192kamil 4 года назад
@@WebDevSimplified Hey! How would you be able to set this up on websites like netlify?
@BluePhoenixGames1
@BluePhoenixGames1 5 лет назад
Thank you, awesome as always :)
@WebDevSimplified
@WebDevSimplified 5 лет назад
I'm glad you enjoyed it.
@ragulharisankar8039
@ragulharisankar8039 4 года назад
Please make a tutorial video on webRTC using socket.io and ur videos are amazing and very easy to learn.
@khadijasworld3899
@khadijasworld3899 3 года назад
Thanks MAN !! ❤❤
@jeffrinmanovaprabahar
@jeffrinmanovaprabahar 5 лет назад
Good content and good content delivery as usual.
@WebDevSimplified
@WebDevSimplified 5 лет назад
Thank you
@tsantsa48
@tsantsa48 4 года назад
thank you man you are awsome
@JustinTheVlogger
@JustinTheVlogger 3 года назад
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!
@zehrayilmaz9660
@zehrayilmaz9660 3 года назад
I can not see "Hello world!" on the console :( I also don' t get an error I get this in issues.: "Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute"
@aditimahabole1761
@aditimahabole1761 Год назад
you are the bestttttttttttttttttt!!!! thankyouuu
@nmathew1987
@nmathew1987 3 года назад
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
@BadeAndenB 3 года назад
I'm struggling with the same thing, can someone please explain this?
@kishanlal676
@kishanlal676 3 года назад
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
@giorgigulishvili7642 3 года назад
use live server in vs code
@echomouser
@echomouser 3 года назад
you need the live server plugin to vs code then you can right click in the html file and click live sever
@jacquibaxter959
@jacquibaxter959 Год назад
The server runs independently from the HTML. The HTMLs attached JavaScript will interact with the server
Далее
Socket.io Introduction - How to Build a Chat App
21:38
Build Real Time Chat Rooms With Node.js And Socket.io
24:25
This mother's baby is too unreliable.
00:13
Просмотров 7 млн
🦊🔥
00:16
Просмотров 765 тыс.
LOLLIPOP-SCHUTZ-GADGET 🍭 DAS BRAUCHST DU!
00:28
Express Chat App with Node.js & Socket.io
10:46
Просмотров 22 тыс.
WebSockets in 100 Seconds & Beyond with Socket.io
8:31
Learn Socket.io In 30 Minutes
27:27
Просмотров 503 тыс.
@property Is One Of The Coolest New CSS Features
10:41
Best way to learn Socket IO | complex chat app
19:52
Просмотров 107 тыс.
Node.js Doesn’t Suck Anymore
16:59
Просмотров 116 тыс.
Websockets in NestJs (Real-Time Chat App)
24:51
Просмотров 6 тыс.
This mother's baby is too unreliable.
00:13
Просмотров 7 млн