He doesn't time pass, but goes straight to the point.
@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!
@theartlegend3772
4 жыл бұрын
I'm gonna go make Twitter now
@jugadtechnologies4171
4 жыл бұрын
Don't
@pigio9033
4 жыл бұрын
Jugad Technologies do
@jimhalpert9803
4 жыл бұрын
I'm gonna make discord now guys
@jugadtechnologies4171
4 жыл бұрын
@@pigio9033 He'll fail
@haydencordeiro
4 жыл бұрын
@@jugadtechnologies4171 lol
@MaNiMaBaLLa
5 жыл бұрын
This is perfect for what I needed for my website. I'm definitely gonna put this to use. You da man.
@WebDevSimplified
5 жыл бұрын
I'm glad I could help.
@samishafi6535
4 жыл бұрын
@Shlok Jain haha you dont need to download just use npm i socket.io on terminal
@_.sunnyraj._
4 жыл бұрын
@Shlok Jain Gawar
@mathewsjoy8464
3 жыл бұрын
@@WebDevSimplified how did you get the local host at the start?
@plamam7
3 жыл бұрын
@@mathewsjoy8464 vs code live server
@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!
@jeyzzz696
5 жыл бұрын
thank you for having tutorials that does not go beyond 20mins. more power to you man
@WebDevSimplified
5 жыл бұрын
I try to keep the videos as short as possible since I hate long videos.
@lordofdawn6871
2 жыл бұрын
@@WebDevSimplifiedMe too
@raeedchat4113
2 жыл бұрын
We used this tutorial and now we've come such a long way! Thank you web dev simplified!
@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
5 жыл бұрын
Thank you! I'm really glad I can make your afternoons and learning something to look forward to.
@patrickc.6183
4 жыл бұрын
That intro was great! I love your sense of humor in these videos :).
@arifkasim3241
2 жыл бұрын
Succinct, lucid and a calm, soothing explanation. You are an ideal tutor. Enjoyed the video very much.
@emr3364
4 жыл бұрын
Normal people: social distancing Developers: socket io chat
@zehrayilmaz9660
3 жыл бұрын
looool reletableee
@maverick4636
2 жыл бұрын
FINALLY! A good tutorial that ACTUALLY is what i was looking for! thankyou soo much!
@SahilSharma-gu2kx
2 жыл бұрын
kzitem.info/news/bejne/toiDuWFmcZd0dG0
@KeskilChnProgram
2 жыл бұрын
Has that code worked?
@maverick4636
2 жыл бұрын
@@KeskilChnProgram i cant remember, i think it ended up with quite a few issues
@KeskilChnProgram
2 жыл бұрын
@@maverick4636 did you fix that issues?
@talibelm5792
2 жыл бұрын
I have made my first Javascript& Node.js project 😊 Thank you very much!
@kevinsetazate4502
4 жыл бұрын
Thank you bro!!! this is what i'm looking for, no templating engines or frontend frameworks just native.
@erensarikaya8767
5 жыл бұрын
perfect. no much talk, no blabla, only what you need to know
@WebDevSimplified
5 жыл бұрын
Thanks. I'm glad you enjoyed it.
@myworldbox
4 жыл бұрын
Priceless content Applause from Hong Kong student XDDDD
@andylib
4 жыл бұрын
This is amazing, what I'd be interested to see is a live ticker application e.g. for a football game
@matstacy6830
4 жыл бұрын
what is a live ticker?
@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
@surajvijay1937
3 жыл бұрын
"and that is going to be easy" - Quote of this video
@scottmcmahon7209
3 жыл бұрын
I've said it before and I'll say it again, you're a very smart young man :)
@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
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
Жыл бұрын
@@WebDevSimplified You used the port 3000, what If I wanna deploy this aplication? It won't be in localhost, so, what do I do?
@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
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
@aaronj6571
4 жыл бұрын
cant believe i faced click bait on other videos like THIS..... THANKS A LOT..subed
@JustinTheVlogger
3 жыл бұрын
Access to XMLHttpRequest at 'localhost:3000/socket.io/?EIO=4&transport=polling&t=NN_PVjI' from origin '127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. I got this error why?
@UltimateArtist
3 жыл бұрын
you have to make ilke this in the server.js ------------------------------------------------------------- const io = require('socket.io')(3000,{ cors: { origin: "*", }, })
@Al_Gonzo
3 жыл бұрын
@@UltimateArtist tysm i couldnt figure it out by myself. Btw do you know why we get that error in the first place?
@devdeclan
3 жыл бұрын
@@UltimateArtist Thanks, couldn't figure it out why that was happening.
@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"
@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
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
2 жыл бұрын
@@mohamedjebril8574 Thank you so much! Looked on socket.io documentation but couldn't find a fix anywhere
@raushankumargupta7018
2 жыл бұрын
@Scott J thank you very much & Mohamed Jebril sir😊
@alexeialpaka
Жыл бұрын
@@mohamedjebril8574 Thank you so much bro, you saved me
@dou4219
Жыл бұрын
@@alexeialpaka does it still work?
@francescoanastasio2021
23 күн бұрын
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
4 жыл бұрын
thanks so much for the tutorial, i always had a lot of trouble doing the networking stuff and this helped me a lot!
@danielmadison4451
2 жыл бұрын
CORS ERROR FIX: In server.js file "const io = require('socket.io')(3000, ( cors: { origin: "*" } } );"
@danielmadison4451
2 жыл бұрын
I think I screwed up my braces and parentheses "const io = require('socket.io')(3000, { cors: { origin: "*" } } );"
@-ShabariNathanL
Жыл бұрын
@@danielmadison4451 Thanks
@migaratennakoon5439
5 ай бұрын
@@danielmadison4451 Thank you
@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
3 жыл бұрын
5500 port is for live server. He ran client in live server.
@poornipriya6198
2 жыл бұрын
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 👏
@PandaciteYT
Жыл бұрын
This is exactly what i was looking for!
@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!
@akshhay
5 жыл бұрын
Bruh, what the heck you doin in this computer stuff!!! Go get Hollywood contracts!! You look like a god😍
@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.
@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
3 жыл бұрын
I'm struggling with the same thing, can someone please explain this?
@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
3 жыл бұрын
use live server in vs code
@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
Жыл бұрын
The server runs independently from the HTML. The HTMLs attached JavaScript will interact with the server
@mathewsjoby6455
2 жыл бұрын
Wow! That was awesome and I loved it! Hoping for more amazing content!!! 🤓🤓
@maayanpeleg5148
4 жыл бұрын
May I ask how the index.html is being views on port 5000
@techdoge3625
3 жыл бұрын
cuz it dont work dummy
@viditsinghbrahmania1476
3 жыл бұрын
Using vscode extension liveserver, you can do it other way using npm too. liverserver also uses npm under the hood
@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 :)
@ganeshkalidas1068
4 жыл бұрын
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
4 жыл бұрын
I am using an extension called live server with VSCode that sets up the server for me.
@0192kamil
4 жыл бұрын
@@WebDevSimplified Hey! How would you be able to set this up on websites like netlify?
@samuelkannuberg8462
3 жыл бұрын
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
3 жыл бұрын
same!
@chazcarothers135
2 жыл бұрын
Same here! Did you ever find a solution?
@samuelkannuberg8462
2 жыл бұрын
@@chazcarothers135 No sadly I didn't
@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.
@kinfish1365
4 жыл бұрын
why i doesnt work for me i just got your source code in github and i tried it but it shows only the text box and the send btn and there is nothing chatbox over here on me please help me i need this to be solved please help
@danc3876
4 жыл бұрын
How to open the application in browser? 127.0.0.1:5500/ doesn't show anything, and after running "npm run devStart" it doesn't open in browser. Can someone point me what to do?
@MegaNightdude
4 жыл бұрын
That is so awesome! God bless you, man!
@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.
@saitejagatadi9711
4 жыл бұрын
You have explained in a superb way bro.. Keep doing these amazing videos...
@robertomoura552
4 жыл бұрын
Awesome video! Thanks! Can you also make a tutorial on how to deploy it? (On AWS for example)
@lolglolblol
4 жыл бұрын
This is great for my school project. I think I now have a better idea of how to do it thanks!
@Dr460n4ir3
Жыл бұрын
I am not getting the mesage in my console when I press send 9:33
@luis96xd
Жыл бұрын
Amazing tutorial, everything was well explained, thanks!
@RonHadri
2 жыл бұрын
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.
@colinbecko
3 жыл бұрын
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
3 жыл бұрын
`npm i socket.io` is the command to run, if you havent found the answer yet
@AlbertRayJuarez
2 жыл бұрын
@@KaydaFox I did the 'npm i socket.io' and I still get 'io not defined' errors, suggestions?
@donovanelliott9060
2 жыл бұрын
@@AlbertRayJuarez on the server or client?
@sudonick2161
3 жыл бұрын
This guy makes node js look so easy..
@renlleshi5289
4 жыл бұрын
My terminal dosent get code npm init ... please help
@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
@dpaul3447
3 жыл бұрын
Your Intro's are pretty cool...👍👍
@mhdyousuf3392
5 жыл бұрын
I always wondered how chatting works... Awesome content and thanks a lot!
@WebDevSimplified
5 жыл бұрын
You're welcome!
@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,
@banelendaba9760
2 жыл бұрын
I keep on getting CORS error in console
@4541047
5 жыл бұрын
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
5 жыл бұрын
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.
@kgeervan9717
3 жыл бұрын
I have a question about this will the chatapp's web page open only for me or to every person who knows the web address If it only opens for me then how do I make it open for others too Pls help me and thank you in advance
@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
2 жыл бұрын
I did too. Did you ever find a solution?
@tanayraj2991
4 жыл бұрын
Best video to understand the basic of socket.io library 💖
@Krokodil986
4 жыл бұрын
Haven't tried it yet but seams like it'll work. 😆🤪🤪
@baatar
3 жыл бұрын
How did you deal with the CORS error? Do you have a browser extension installed to resolve that?
@chazcarothers135
2 жыл бұрын
Same here. Did you ever find a solution?
@thinkhub1003
4 жыл бұрын
Great thing is, you've done it in under 20mins.
@juheehong7445
3 жыл бұрын
how do I run the whole chat, though? the website 127.0.0.1 etc doesn't seem to work...
@ScrewzMcDuck
3 жыл бұрын
Install live server extension in vscode, you will see a 'Go live' button, it automatically starts at 127.0.0.1/5500
@MG-bm5oj
4 жыл бұрын
Amazing and how simple it was. How are you thinking in making it more complex? Images?
@denisedrey921
4 жыл бұрын
Thank you dude, that was amazing!
@abdulazizalghafli5240
5 жыл бұрын
Great topic. It's easy to understand from you. Thank you.
@WebDevSimplified
5 жыл бұрын
You're welcome!
@avineakduwal1518
3 жыл бұрын
Thanks a lot.... Really searching for short sweet to the point vdo...
@HackerFlavio
3 жыл бұрын
amazing video did had to do a bit of work arounds but over all works perfectly
@HackerFlavio
2 жыл бұрын
@Google Security you have to be more specific
@klznpch7512
3 жыл бұрын
thanks for teaching me how to use disconnect :)
@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!!!!!!!!!!!!!!
@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
@sludge_factory
2 жыл бұрын
How/why is the client socket port 5500, but the server port is 3000? This isn't explained from what I can tell, and also I don't understand how the server is on before the const io = require('socket.io')(3000) line is written. Can someone explain?
@JCDZK
2 жыл бұрын
Short videos ftw. Cheers buddy, subscribed
@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!
@syafiq55555
5 жыл бұрын
I'd love to see a more advance project with socket.io thank u for explaining ! Appreciate it
@WebDevSimplified
5 жыл бұрын
I have a part 2 of this video you can checkout which goes a bit more in depth.
@syafiq55555
5 жыл бұрын
@@WebDevSimplified thank you
@ib6548
5 жыл бұрын
This perfect for what I needed right now. Thank you
@WebDevSimplified
5 жыл бұрын
You're welcome!
@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.
@aaronpaterson7582
4 жыл бұрын
Hello everyone, I'm having an issue at 3:19 where you uses "npm run devStart" it get an error. Even though I did everything before correctly? HELP
@simonemaccarrone3528
4 жыл бұрын
Did you write the script for nodemon start in package.json?
@chungtunguyen6135
4 жыл бұрын
thanks for this tutorial my brother! keep going! i'll give you sub and like your video!
@Musa666.9
3 жыл бұрын
Having trouble with CORS, im trying to solve like the document socket.io but its not working, its says httpServer is not defined :(
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
@najwamozhikkal8836
2 жыл бұрын
your github code not working..messages from one user not reach second
@asseenonytp2169
3 жыл бұрын
Its not working, whenever I press send nothing happens. it does not log in the console, the terminal, and it does not appear on the other person's screen. Someone help?
@scottj6296
3 жыл бұрын
Hey Kyle, at 6:30 I only get the console logs if I use socket versions 2.2 like you did. Using the latest socket io package with the exact same code it doesn't console.log "new user" and "hello world". Any ideas? Do we need to use express now? The tutorial using express by traversy media is working for me so far.
@moneyisenergy
4 жыл бұрын
Thank you that was a great tutorial!
@cscs6587
Жыл бұрын
CORS Problem how to fix it
@crash2332
4 жыл бұрын
always stuck on [nodemon] starting `node server.js`
@saswatisinha7735
4 жыл бұрын
thanks....it worked..i have learned so may things from this
@s.nadaraj9279
4 жыл бұрын
This tutorial was really awesome, but after two days it was showing an error like ,Reference error :io is not defined and it is not working...can i have a word ..!!?
@orang6521
3 жыл бұрын
bruh dont ask him before u search the solution on google and dont find it
@shashwatpandey3556
10 ай бұрын
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.
@ThatGuyCream
2 жыл бұрын
This man has 999 000 subs! GET HIM TO 1 MILLION RIGHT NOW!!
@rootdev8106
4 жыл бұрын
I love watching you coding! Keep it up :) Greets from germany
@realdlmgang3486
3 жыл бұрын
Guys this man is a legend thank u
@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
@tobybridle8122
4 жыл бұрын
I get the error in the first line of server.js 'ReferenceError: require is not defined' Are there any fixes for this?
@natew4724
4 жыл бұрын
You need to run the server with node js. It's not part of the browser, it needs to be separate. After you do "npm init" on the server you should be able to run "npm start"
@viclee8166
4 жыл бұрын
When i open localhost:3000 in my browser, it refused to connect, help please.
@kinfish1365
4 жыл бұрын
i think you show set a server over the visual code studio
@number1neek
3 жыл бұрын
@@garrybogdanho ...or you could say this in a nice way and make someone's day better instead of being a prick
@musicalspace6885
3 жыл бұрын
@@garrybogdanho Actually you have to be able to connect to localhost:3000
@z1nc0r3
2 жыл бұрын
Great video. But newbies like me can't understand some parts. So this video is not really for the beginners.
Пікірлер: 766