Socket.io Beginner Tutorial - NodeJS + ExpressJS
ฝัง
- เผยแพร่เมื่อ 5 ก.ย. 2024
- In this video I will teach you guys a bit of websockets and how to use socketio in NodeJS and express. I will show you guys how to make a very simple application which exemplifies introductory topics such as receiving and emiting data.
CDN Script: src="cdn.socket.io/..."
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
Please leave a comment on what topic you guys want me to cover next!
-
📞 Tutoring Session: www.fiverr.com...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: machadop1407@gmail.com
Tags:
- Socket.io
- Fetch
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
My boy really made it quick and easy. Thanks, man.
I love you first tutorial that made me UNDERSTAND IT
Going back to the documentation after watching this video, the get started part makes sense now. Thanks a lot
Great to hear!
you are a blessing to humanity
Lmaoo thank you! I appreciate the support!
thank you very much I was facing the cors issue before I saw your video😁
You are welcome 😊
watched a bunch of vid coverin the same topic,and actually got client side to work ! whoop tanks for tutorral
Thanx bro , your teaching skill is amazing
I liked and subbed because you went to school I'm (probably) attending next year here in Brazil. Hope you're doing well there in Canada btw!
Awesome! Thanks! So you are you going to study at PASB or UBC?
Thank you... waiting for your complete chat application tutorial based on React & Node
Hey, I actually already have a two video series showing how to do this: th-cam.com/video/XS79S6nmaGM/w-d-xo.html The thing is that the code doesn't work for socket.io current version, but it works for the version 2.3.0 which was the last!
you're a chad bro, their documentation was so confusing
Thank you :)
I wanted to live update my game scoreboard now I can by watching this video , thanks !
Glad I could help
what game do u make?
Every few months I have a new tech to learn for whatever project, and every few months my search for answers inevitably leads back me to you. Like that thanos quote
Amazing tutorial it was. Seamless, clear, and to the point. 👌😊
working fine on localhost but when deployed on heroku its not working...wt changes need to be made?..plz reply
Interesting! Maybe socket.io updated and this caused some issues!
absolute banger, thanks pedroski
Thank you, good luck in your next videos and hi from Russia:-)
Thank you! 😃
Golden Man, oh my god. Thank you !
Thank you man, this video is neat, I learned so much!
Very nicely explained. Now I can finally try to implement some socets into my servers!
Great!
Nice tutorial helped me out TY!
cool, but what that case of the message should appear in also on sender?
hai bro this one is helpful can u explain more about the events namespaces and all those
I want to store messages in local storage after refreshing how to manage previous messages and I want to add the functionality of creating a new room and add joined users in any room
another great tutorial..!!! thankx pedro..👍😎
Glad you liked it!
@@PedroTechnologies im just having a hard time connecting the frontend to server, cause the server is refusing my frontend connection..!!! rsss...and is returning a 404 Error...I installed "cors", changed the port number, changed the "socket.io" CDN, but nothing seems to work..!!
@@romimaximus some people had this issue too, i will research more on the topic. Im certain that if u downgrade ur socketio version to 2.3 it works, but there most be a way to fix this issue
@@PedroTechnologies now my server code like this:
const express = require('express');
const morgan = require('morgan');
const app = express();
const socket = require('socket.io');
app.set('view engine','ejs');
app.use(morgan('dev'));
// @route 'localhost:5000/index'
app.get('/index', (req,res) => {
res.render('index');
});
const port = process.env.PORT || 5000;
const server = app.listen(port, () => {
console.log(`Server running on port localhost:${port}`);
});
// CREATE SOCKET
const io = socket(server);
//SOCKET CONECTION
io.on('connection', (socket) => {
console.log(`User connected on socket: ${socket.id}`);
});
now its working....thankx Pedro...!! 👍
Great Video Thank you
great video!!! i was so confused with the on emit process but you made it clear!!
what to do if i want to broadcast my message to a specific person(socket id) ?
socket.broadcast.to(socketID).
Thanks for this tutorial👍🙂!!
Hi Pedro. Another great video! Keep it up! I was wondering, can you make a video about Role based access control in react js. It would be very usefull i think.
Thank you! I have a video on that using react express and mysql, but I plan on making another one. Here is the video if u are interested: th-cam.com/video/YLihWZwLaGU/w-d-xo.html
Thank you! I have watched that one and it help me a lot :D. I was thinking about how can i make that only admin can do registration for example so to specifie if one role can do somth. And that one video really help mee understating some things. Big thanks! You are really great.
that was helpful, thanks!
Glad it helped!
good video broo
You nailed it brother awesome to-the-point explanation .....the best beginner video for socket io i ve seen
guys nodemon is no longer required after version 18.11 you can use the --watch option
I ran client and server on two different ports for the backend and frontend. The problem is that cors is not allowing me to use * the wildcard with the credentials set to true, is there a solution for this problem, i have used socket before but never faced such issue
If you are running the client and server on different ports, you need to install a dependency called cors. Then require it and use it. Example:
const cors = require('cors')
app.use(cors())
@@PedroTechnologies I have used it but still got the same error infact before using socket I was already using cors as a middleware on express
Well explained Pedro. Thanks for this wonderful explanation
Glad you liked it!
Great video bro!
Glad you liked it!
Could you please make Restful API's tutorial also?
please make a video chat app tutorial
sir getting error in html that io is not defined i place cdn in script tag after that iam facing error
Amazing videos,
Awesome content Dude, After 5 years I finally understood about Sockets😅
Thank you!
Make a vedio calling website like zoom without using react js ( or can you do that )
great tutorial!
Glad you think so! Thank you!
Brother...it works on my localhost but doesn't work when I host in on a cloud...plz explain why..and how to fix this...
Interesting, I don't know why that is happening! Maybe socket io changed!
best channel for web dev, i like your easy and detailed explanations which are very helpful for beginners :)
Great tutorial. Clear and quick.
yes socket io v3 causes issues if you dont set a cors
Yes! That made many of my projects outdated, just have to manually set cors for them!
Excelent video thanks!
This was really good
bro THANK YOU
Thank a lot brother
Really loved this concise way of teaching...
Thanks!
No problem!
thx your teaching a lot , I subscribe you ^^ ~~~~ And I want to ask you ,
12:26 should I change the http to my domain , in the real website app ???? thx a lot
Thank youy! Yeah, when u deploy you change it to ur websites url!
@@PedroTechnologies no, thank _youy_
You are amazing.
Wow, thank you!
Hey bro! Did you have a good Christmas?
Yeah bro! Wby? I couldn't even celebrate that much cause of covid and Im studying like crazy for an interview.
@@PedroTechnologies Just asking mate! Sorry to hear mate, hope you could at least see your family. I am sure you will crush that interview!
How can i open dropdown menu like the facebook ? I am a beginner in React
Hey, I can make a video on that! Probably would be nice to use something like MaterialUI or React Bootstrap!
@@PedroTechnologies I'm looking forward to your video. I'm using tailwind css
i have a problem with user connection. when i start the server it doesn't show the User connection id on terminal 13:28
same here. did you figure it out?
How can i export io to other files?
Please reply pedro😁😄
3000🙌 amazing man🔥
Thank you bro!
Hi Pedro, can you please tell why we need to use the http module with express? I am new to node.
idk
you are so good
Than you!
Great video
I followed this one step by step but mine is not updating realtime.
Very Nice!
Please reply 🙏🙏🙏🙏🙏
😢😢😢😢😢😢 please 🙏🙏🙏🙏🙏
it's very important for my interview
......
why to use low level module like 'http' , when we already have modern 'express'
, what special inside 'http' module that express can't provide.
I also saw a stack overflow question pending in this topic
Please 🙏🙏🙏🙏🙏 reply any body I just need a strong right information 🙏🙏🙏
very helpful
Nobady toalks about security, login ... i cant use express whitout security !
Nice.
Thanks!
Thank from Russa
Glad you liked it!
do you have a udemy course? i'd totally buy it!
Coming soon :)
How can I use socket.io with webpack?
i love you bro
Bruh 👌👌
why .ejs ?
@PedroTech u planning on getting a job?
I have a part time job rn, but I am looking for summer internships. I have an interview next week and if all goes well I will accept that one. But Im still in my second year of university so im not looking for anything full time
@@PedroTechnologies I wish u get the internship but I hope u will not stop making video.
@@usmanmughal5916 Hahaha no worries! This semester proved to me how much work I can handle at the same time. And since the internship will be during the summer I won't be taking classes. I will structure my day to devote 100% of my time to the internship during the 8 hour shift, then at night I will make videos for the next day!
i need this code
1111111111111111111111%
Lol this guy reuse the same project a thousand times for every videos.
So typical of programmers, like what did you do with those seconds saved?
I never repeat the same tutorial, but I do repeat projects if they are useful for a certain topic. I have a chat app vid using react and this one using vanilla js. This are both targeted for 2 audiences, so I don't see why it would be a problem.
@@PedroTechnologies give back my comment the heart you removed else I will unsubscribe lol
@@rushrush6754 i gave it as an accident hahaha i like constructive comments like urs but i use the heart for when i agree with the comment.
Thanx bro , your teaching skill is amazing
Amazing tutorial it was. Seamless, clear, and to the point. 👌😊