Finally a tutorial without any additional fluff or nonsense. Usually I have these types of videos on 2x speed to get to the actual information, not here! Thank you for the help!
@@javascriptmastery io.on('connection', (socket)=>{ console.log('We have a new connection!!!!'); socket.on('disconnect', ()=>{ console.log('User has left!!!!') }) }) why is not workink???
@@shneorBachar You may be missing the line above-> const io = require('socket.io'); in order to require/import this you need to install it (but before you do that, go to the folder src/server and use the command '''npm init''' once that has finished you can then install socket.io via the command '''npm install --save socket.io''' I hope this help ייתכן שחסר לך את השורה מעל-> const io = require ('socket.io'); על מנת לדרוש / לייבא זאת עליך להתקין זאת (אך לפני שתעשה זאת, עבור לתיקייה src / server והשתמש בפקודה '' npm init '' 'לאחר שסיים תוכל להתקין את socket.io באמצעות הפקודה 'npm install --save socket.io''' '' אני מקווה שזה יעזור.
Most Underrated Channel. Please keep helping poor kids like me who rely heavily on free quality materials for learning. I will donate you once I start earning for sure, not because you need it, but because you deserve it
This is one of the best 2 hour tutorials I've ever come across, I manage to get everything to work. Thank you very much for this looking forward to more :)
Brate odlicni su ti tutorijali, svaka cast stvarno, tutorijal za full-fledged aplikaciju koji je jos i besplatan, je veoma redak slucaj. Sve pohvale i samo napred!
Great video once again brother! Thanks. Guys,small bug fix: Just use socket.once instead of socket.on(having event "message") inside second useEffect!! useEffect(() => { socket.once("message", (message) => { setMessages([...messages, message]); }); socket.on("roomData", ({ users }) => { setUsers(users); }); }, [messages]); This will not make the app getting slow after few messages!
I've learn a lot from your teaching here in UA-cam since when I was started in my first work and now I continue striving on my journey as a software engineer. thankyou sir :)
I just got into your channel from a random youtube suggestion and now here I am, watched 2 full length videos, subscribed and pressed the notification icon. Oh Man ! Your videos are so detailed. Everything one wanted to know about the topic is there.
man, your teaching is impeccable, I am Brazilian and I managed to understand 100% of your explanations, congratulations and thank you! Can you take a video tutorial on how to use the Google Maps API to show places close to the user? for example ... all nearby restaurants ... I don't see a lot of tutorials on that, it would be great.
Absolutely great. This exactly what I needed. A full app from its birth to deployment to production, every step is included and clear. Thank you for the video
@@javascriptmastery What is the maximum salary for javascript developer if i am using frameworks like angular react js react native .please anyone can answer.thanks in advance
I have completed your Voice recognition app yesterday and now starting this one , your all projects are awesome sir , thanx a lot for providing this much value for free .
This is absolutely one of the tutorials I watched on UA-cam. Thanks so much. And I have a kind request would explain the step to expand the chat app so that users can create custom chat rooms with admin permission.
Большое спасибо! Это лучший туториал чата, что я смог увидеть на просторах интернета. Всё получилось - от начала до конца. Хотя опыта в яваскрипте было ноль! Больше спасибо! (Thank you very much! This is the best chat tutorial that I have seen on the Internet. Everything worked out - from start to finish. Although there was zero experience in javascript! Thanks a lot!)
Great tutorial bro. I've been looking for Javascript project ideas to build during this weird quarantine times, and finally stumbled upon this video.Thank you so much👍
If anyone's confused, whenever he inserts a null at the end of functions to do nothing, he is using the ternary operator which is as follows - condition==true ? execute 1 : execute 2 Very useful!!
This is a very good project. I finished it, but I used typescript on both the node and react, and I'm thinking about it further, implementing a mobile version using react native. Thanks, this content helped me a lot.
Hi there. Normally I don’t put any comments but I really have to say thank you so much for your explanations in your videos you don’t only show how to do it but you also give a sense of what you’re doing and it helps me a lot. Very goods tutorials keep going!!!!
This was an amazing tutorial and was exactly what I was looking for. I was trying to do this on my own but had no experience with socket.io. Thank you so much!
u are a very great teacher i thought it will be so hard but you teached everything from basic i like the simplicity content and everything about your channel thanks!
This is a really good tutorial. Though for someone like me who has 0 knowledge in any of these frameworks and libraries, I’m just blindly copying away everything right now not knowing what anything means lol.
That's the reason why it's not a React.js tutorial, not a Node.js tutorial, nor a Socket.io tutorial. Because it's a tutorial on how to use those 3 technologies together.
Thanks, man this video was really at the right time and you explained well.. It was my first time to visit your channel and it won't be the last keep it up (Y).
Great job man ! Your explanations are very clear, I understand that making and editing videos is hard, but you make an amazing job with your tutorials, thanks a lot, please keep it up
Have you gone through this video? I'm getting an error regarding handshake (I guess SSL certificate error), when I use websocket with vuejs app. Are you not getting any error?
I really appreciated your tutorial. It's very didatic and covered my necessities at the moment. (I am just learning). Now I am trying undestanding the admin meanning and how access it. Thanks for your time.
For everybody searching for the refactored hooks video : ua-cam.com/video/-9M9CGSd69I/v-deo.html . The refactoring of this specific project starts here ...
It's amazing! Thank you so much. I'm a hobbyist, but i can hang with alot of devs since i've been doing it for 5 years. Just getting into react now that I've got the gist of js. Helpful and professional. I wish you much success!
I really Love your Tutorial.. awesome! 😍 I was been working on a covid19 tracker project recently using js. Then I watched ur video of building the App using React. Ever since I've become your channel fan.. ❤ I'm new to react btw.. but ur explanations are simple and easy.. Love it!
thank you very much maan, god bless you i had no idea how to deploy node or react , you made it so easy, and the video about hooks is amazing thank you very much, i wish i could like your videos millions times hhhh
I started this tutorial a while ago using repl.it and it wasn't working and i got sad and gave up but now that I've actually installed node it's working so well (i don't even have visual studio i'm using notepad lol) this is amazing
For those who are seing this in 2021 , u gonna have error in your console like : "NO Access-Control-Allow-Origin" just Add this to your index.js on server side : const cors = require('cors'); app.use(cors()); and on the client side chat.js : replace : socket = io(ENDPOINT) with : socket = io(ENDPOINT, {transports: ['websocket', 'polling', 'flashsocket']});
if you're facing the "location" error saying not defined, do the following import { useLocation } from 'react-router-dom'; const location = useLocation() //remove the destructured location prop in the chat function
@@javascriptmastery I am getting an error ( has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource ). I tried rectifying but was unable to, can you me help regarding it?
Thanks a lot for another brilliant video, man! Had some issues with deploying, but I think it's now working perfectly. Thanks! I have a plan to try and use web sockets to allow users to use their mobile to scan an image into a form they're filling out on their desktop. Feel like it's a little beyond my current skillset, but this video has definitely taken my a lot of the way there so I'm feeling much more confident now 😁
@@mohabedr5030 The app needs some optimization. Check the comments below, and you will find the solution. Also, the app may perform poorly due to the poor performance of your Heroku server. This is the basic app tutorial, now you have to spend some time to optimize it.
Came across your channel a few weeks ago and I'm amazed at the way you simplify complex subjects. Thx for the work you do. I'm sure many more will appreciate the quality of the videos content. Any "online shopping" app in the works?
This is a good start. You might want to focus on making it mobile-friendly and include a user list. I'm also developing a similar product in Replit, and my next step is to find a way to add basic encryption and set up a permanent server.
Love your tutorials man. One suggestion for a video, could you cover setting up environmental variables for React ? I don't mean just adding .env files but adding the scripts for different environments so when you run your npm run start, build, deploy etc everything is set up with the right variables. I feel with your clear explanations i could grasp it because I've read several tutorials and it's never clear or coherent.
@@javascriptmastery Glad you like it! I think it would be helpful for a lot of people in order to keep their projects in order. I have a cool project I'm making (based on your redux/mongodb tutorial) and sometimes it's a bit of a hassle because I have it deployed to heroku and netlify and it updates when I push commits to github and I have to manually change a bunch of stuff all the time for it not to break.
@@King-Gilamashur2758 Feel free to contact me at contact@jsmastery.net with a link to the Github repo. I'm always looking for some new projects to showcase.
This tutorial is really awesome! Can you please extend this tutorial on how to connect this to a MongoDB database? With user registration, profile edit, deleting messages, storing messages, etc. Maybe user roles too? Thanks so much!
For those who are confused. Inside client directory, in Chat.js, it's pointing to heroku instead of http:localhost:5000 replace and you will be fine I took 3 hours to realize that. Because started getting CORS problems, but actually was an illusion. I couldn't solve the cors because of this. Well, At least now I know everything about cors LOL
to the people facing the issue that there messages are not sending just go in your index.js file in server and define your io as const io = socketio(server, { cors: { origin: "*", }, });
Hey I found a bug in the app and I fixed it - The bug was that when your server is actually a bit slow then what happens is until the server doesn't reply back the setMessage doesn't set to null or ' ' which has a black value which actually does create a problem that when you press enter or the send button multiple times the same message is sent over and over. For fixing that your input.js file should look something like this which basically changes the setMessage to ' ' ``` import React from 'react'; import './Input.css'; const Input = ({ setMessage, sendMessage, message }) => ( setMessage(value)} onKeyPress={event => event.key === 'Enter' ? ()=>{sendMessage(event);setMessage('')} : null} /> {sendMessage(e); setMessage('')}}>Send ) export default Input; ``` Hope this helps!!!
I keep getting "Cannot read properties of undefined (reading 'search')" when I try to join, what could be the problem? the error comes from this line "const {name, room} = queryString.parse(location.search);"
I had to define the location before hand (it might because of a newer react version): import { useLocation } from "react-router-dom"; // and then inside the Chat function and before the useEffect const location = useLocation();
i think both not implemented in socket but you can do them by JavaScript monitoring the message input box (for change) and messages container ( for focus, blur ) respectively
1st of all: great tutorial!! Thank you! 2nd: how do i add timeStamps to the messages? i mean, even your video wallpaper shows them ;) Is there maybe a helpful link or some kind of quick response to that? Any help on that would be appreciated.
Just discovered your channel, and I gotta say, this is awesome. I have a hard time to find new tutorials to follow, and I love your approach on things. Thanks !
Well, generally speaking (as I am not react programmer), you have to listen to to the "typing event" (if user is typing to a specific field) and when he is doing this, emit through a socket the message about this user typing.
@@sengoku8497 What is the maximum salary for javascript developer if i am using frameworks like angular react js react native .please anyone can answer.thanks in advance
JavaScript Mastery PRO launching soon! Be the first one to find out about it - javascriptmastery.eo.page 🔥
Finally a tutorial without any additional fluff or nonsense. Usually I have these types of videos on 2x speed to get to the actual information, not here! Thank you for the help!
Glad it helped!
omg... ur so right! I hate all the side talk in tutorials or when they dont show you what they are building until 20 mins in...lol
@@javascriptmastery io.on('connection', (socket)=>{
console.log('We have a new connection!!!!');
socket.on('disconnect', ()=>{
console.log('User has left!!!!')
})
})
why is not workink???
@@shneorBachar You may be missing the line above-> const io = require('socket.io'); in order to require/import this you need to install it (but before you do that, go to the folder src/server and use the command '''npm init''' once that has finished you can then install socket.io via the command '''npm install --save socket.io''' I hope this help
ייתכן שחסר לך את השורה מעל-> const io = require ('socket.io'); על מנת לדרוש / לייבא זאת עליך להתקין זאת (אך לפני שתעשה זאת, עבור לתיקייה src / server והשתמש בפקודה '' npm init '' 'לאחר שסיים תוכל להתקין את socket.io באמצעות הפקודה 'npm install --save socket.io''' '' אני מקווה שזה יעזור.
Most Underrated Channel. Please keep helping poor kids like me who rely heavily on free quality materials for learning. I will donate you once I start earning for sure, not because you need it, but because you deserve it
I think you will never be
conscious about how much you helped me. Thank you very much!!
Happy to hear that!
Adding timestamps for my own use. Awesome video btw!
Project Set up: 5:00
Server code 13:00
Deployment 1:46:58
ahaha, best timecodes i 've ever seen:))
This is one of the best 2 hour tutorials I've ever come across, I manage to get everything to work. Thank you very much for this looking forward to more :)
Thank you soo much! Appreciate it.
Brate odlicni su ti tutorijali, svaka cast stvarno, tutorijal za full-fledged aplikaciju koji je jos i besplatan, je veoma redak slucaj. Sve pohvale i samo napred!
Great video once again brother! Thanks.
Guys,small bug fix: Just use socket.once instead of socket.on(having event "message") inside second useEffect!!
useEffect(() => {
socket.once("message", (message) => {
setMessages([...messages, message]);
});
socket.on("roomData", ({ users }) => {
setUsers(users);
});
}, [messages]);
This will not make the app getting slow after few messages!
thanks alot for sharing...how did you know this was the fix?
I've learn a lot from your teaching here in UA-cam since when I was started in my first work and now I continue striving on my journey as a software engineer. thankyou sir :)
youre the man, thank you javascript mastery
There are many tutorials out there but Nothing can't beat this one!!!
Mind blowing 🙏😎
I just got into your channel from a random youtube suggestion and now here I am, watched 2 full length videos, subscribed and pressed the notification icon. Oh Man ! Your videos are so detailed. Everything one wanted to know about the topic is there.
Quality content, with no BS. Man, you deserve more subscribers.
man, your teaching is impeccable, I am Brazilian and I managed to understand 100% of your explanations, congratulations and thank you!
Can you take a video tutorial on how to use the Google Maps API to show places close to the user? for example ... all nearby restaurants ...
I don't see a lot of tutorials on that, it would be great.
I'll try to make that. Awesome, thank you!
Absolutely great. This exactly what I needed. A full app from its birth to deployment to production, every step is included and clear. Thank you for the video
Great to hear!
@@javascriptmastery What is the maximum salary for javascript developer if i am using frameworks like angular react js react native .please anyone can answer.thanks in advance
are you backend developer?
I have completed your Voice recognition app yesterday and now starting this one , your all projects are awesome sir , thanx a lot for providing this much value for free .
Thanks and welcome
Link to voice recognition tutorial please
Bhai ye project ban gaya
I am trying to make but the first npm start are not happing in which join or chat are mix
I am "ACTUALLY" very surprised by the quality of your tutorials! Kudos to you sir!
Thanks!
This is absolutely one of the tutorials I watched on UA-cam. Thanks so much. And I have a kind request would explain the step to expand the chat app so that users can create custom chat rooms with admin permission.
This was really awesome, you literally gave all the building blocks to creating a great chat app. Thanks
No problem 👌
Большое спасибо! Это лучший туториал чата, что я смог увидеть на просторах интернета. Всё получилось - от начала до конца. Хотя опыта в яваскрипте было ноль! Больше спасибо!
(Thank you very much! This is the best chat tutorial that I have seen on the Internet. Everything worked out - from start to finish. Although there was zero experience in javascript! Thanks a lot!)
Thank you so much!
I dont know how will I thank you. You deserve a million subscriber
Thanks you!
Great tutorial bro. I've been looking for Javascript project ideas to build during this weird quarantine times, and finally stumbled upon this video.Thank you so much👍
Glad you liked it!
I have never felt this free before!
THIS IS EXACTLY WHAT I WANTED! THANK YOU😘
I'm glad!
0
If anyone's confused, whenever he inserts a null at the end of functions to do nothing, he is using the ternary operator which is as follows - condition==true ? execute 1 : execute 2
Very useful!!
Great Video! It's an amazing introduction to socket IO + NodeJs + ReactJS. I'm so glad with you! Thanks a lot man, great job!
This is a very good project. I finished it, but I used typescript on both the node and react, and I'm thinking about it further, implementing a mobile version using react native. Thanks, this content helped me a lot.
could you share your repo? I'm thinking of doing it in TS as well
hey can we talk more about this project
Hi there. Normally I don’t put any comments but I really have to say thank you so much for your explanations in your videos you don’t only show how to do it but you also give a sense of what you’re doing and it helps me a lot. Very goods tutorials keep going!!!!
this tutorial was awesome to watch! very clear explanation, thank you so much for this!!
I'm glad you liked it! :)
thanks a lot JSM. you are the best javascript teacher on the entire platform and ive have tried tens of others.. amazing work
This was an amazing tutorial and was exactly what I was looking for. I was trying to do this on my own but had no experience with socket.io. Thank you so much!
Great to hear!
is it works?
u are a very great teacher i thought it will be so hard but you teached everything from basic i like the simplicity content and everything about your channel thanks!
This is a really good tutorial.
Though for someone like me who has 0 knowledge in any of these frameworks and libraries, I’m just blindly copying away everything right now not knowing what anything means lol.
U need to understand what u are doing otherwise its pointless to just memorize.
That's the reason why it's not a React.js tutorial, not a Node.js tutorial, nor a Socket.io tutorial. Because it's a tutorial on how to use those 3 technologies together.
@@Alex233xx and where can one do that ? any book or course suggestion?
@@Xelpm0c24-7 You can watch Net Ninja (a youtube channel) tutorial on each individual topic
Lmao exactly i am in same situation as you.
Thanks, man this video was really at the right time and you explained well..
It was my first time to visit your channel and it won't be the last keep it up (Y).
Welcome aboard!
Great job man ! Your explanations are very clear, I understand that making and editing videos is hard, but you make an amazing job with your tutorials, thanks a lot, please keep it up
Thank you, appreciate it!
Your tutorials are amazing man. I will be glad if you can do e-commerce app with react
Great suggestion!
Have you gone through this video?
I'm getting an error regarding handshake (I guess SSL certificate error), when I use websocket with vuejs app.
Are you not getting any error?
I really appreciated your tutorial. It's very didatic and covered my necessities at the moment. (I am just learning). Now I am trying undestanding the admin meanning and how access it.
Thanks for your time.
Glad you liked it!
For everybody searching for the refactored hooks video : ua-cam.com/video/-9M9CGSd69I/v-deo.html . The refactoring of this specific project starts here ...
@@javascriptmastery Can you pls try to show how to upload images or files in that app
This just popped into my suggestions, imma work on it later when I have time! looking forward to this!
Great!
It's amazing! Thank you so much. I'm a hobbyist, but i can hang with alot of devs since i've been doing it for 5 years. Just getting into react now that I've got the gist of js. Helpful and professional. I wish you much success!
Thank you so much, glad it helped!
THANK YOU !!!!!!!!!!!! SOOO MUCH I was trying to build this myself and I faced lot of issues with the structure of my project this helped a lot
This is an awesome video. I love the way you take out time to explain every detail of it. Thanks
This channel is great. I liked the way you explain all the things.
I really Love your Tutorial.. awesome! 😍 I was been working on a covid19 tracker project recently using js. Then I watched ur video of building the App using React. Ever since I've become your channel fan.. ❤ I'm new to react btw.. but ur explanations are simple and easy.. Love it!
You're very welcome!
Really great tutorial thank you for all ! Need to admit I had no idea about node.js and chatting in real time before the video, thank you again.
You are welcome!
Thanks Adrian. You made a nice and very understandable video with this product-mix. Liked it a lot. 👍
I'm glad you liked it!
You know what, I think I love you lol. Thank you mate for making this world a bit better
This looks great brother, hopefully we can include database and user registration into the mix;
keep up the good work,
Greetings from Tanzania
Can be done!
Thank you!
I appreciate the high-quality audio.
Thank you Tomas!
man it's so easy to understand and useful, like concentrated good information, thank you a lot! subscribe!
you even added alt tags to imgs omg
Thank you!
Excellent explanation, Clean Code, Elegant Design & last but not least full deployment from scratch, Thank You so much Adrian ❤️❤️❤️
Thank you, man! God bless you! Awesome content, subscribed!
Very well explained,
U cant just stop anyone from hitting the subscribing button,
Thank you very much
Thanks for the sub!
pls upload more, I want to learn more from your vids.
I'm really glad to hear that!
Me too Bro .Please make more react material ui projects more
Your knowledge is amazing, and the way that you teach, thank you so much!
Спасибо, получил классный опыт при просмотре этого видео. (Thank you, I got a great experience watching this video.)
thank you very much maan, god bless you
i had no idea how to deploy node or react , you made it so easy, and the video about hooks is amazing thank you very much, i wish i could like your videos millions times hhhh
Thank you! 😊
1:38:00 add name={name} as a prop in Messages component so the whole app not crashed
Hi bro, when user leaves automatically and trying to msg then whole app is crashing, do u know solution?
I started this tutorial a while ago using repl.it and it wasn't working and i got sad and gave up but now that I've actually installed node it's working so well (i don't even have visual studio i'm using notepad lol) this is amazing
You are awsome big brother.
You teach incredible and try to help as much as you can.
Thank you from bottom of my heart.
I love that you reply to most of the comments!
Always! :D
For those who are seing this in 2021 , u gonna have error in your console like : "NO Access-Control-Allow-Origin"
just Add this to your index.js on server side :
const cors = require('cors');
app.use(cors());
and on the client side chat.js :
replace :
socket = io(ENDPOINT)
with :
socket = io(ENDPOINT, {transports: ['websocket', 'polling', 'flashsocket']});
Much appreciated bro🤍
DUDEEEE!!!! YOU SAVE MY LIFEE!!!
Thank youuuuuu
Thank you brother. Can u send a link what is that error about and why did this solve problem ?
U r very smart teacher nd u know the student's need...thanx a lot
May allah bless u sir🙂🙂
Thanks!
Bro if you keep dropping gems like this soon you'll reach a million subscribers. ❤️
Thanks! 😊
Your a god in your own right bro ,,,,,,,,,keep up the good work ........add more ads ill gladly watch
if you're facing the "location" error saying not defined, do the following
import { useLocation } from 'react-router-dom';
const location = useLocation()
//remove the destructured location prop in the chat function
Ohhh man I was stuck in this problem for a long time, I really appreciate your help bro, Thank your so much❤❤❤❤
Thank you, I guess react has updated since this video was made
@@PratikBanger bhai tumne deploy kar di ha toh mujhe puchna tha ki ma project(video) ko dekh sakta hu kya. Kahi beech ma nahi aatak jaye
Thank you brother!
is the coding explain in video is different from souce code ?
please explain.
or someone give me the updated code.
thank you.
This is what is called a complete video, Thanks
Glad you liked it!
@@javascriptmastery I am getting an error ( has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource ). I tried rectifying but was unable to, can you me help regarding it?
It was just about time I was waiting this video since you say you gonna make it
It is here now, hope you like it! :)
You speak and explain very well! Thank you! Subscribed
Awesome, thank you!
Amazing! Maybe a complete MERN stack next
That's the plan!
@@javascriptmastery To bi bilo odlicno, upravo ono sto mi treba :)
Amazing! Thanks for creating such a helpful video for socket n00bs like me
Thanks!
Thanks a lot for another brilliant video, man! Had some issues with deploying, but I think it's now working perfectly. Thanks!
I have a plan to try and use web sockets to allow users to use their mobile to scan an image into a form they're filling out on their desktop. Feel like it's a little beyond my current skillset, but this video has definitely taken my a lot of the way there so I'm feeling much more confident now 😁
Awesome video man, You literally made the coding easy to understand 🧡💯 Keep posting such great content.
This is a great project, thanks for tutorial.
Glad you like it!
Thank You so much Sir
Can you extend this app with files i.e. images, videos.pdfs etc . or make a seperate video on something like sharing files with socketio.
This is an amazing tutorial. My first react App, I will now keep working on this making it better, giving out more features.
Thanks!
what is amazing bro the app have bad performance
@@mohabedr5030 The app needs some optimization. Check the comments below, and you will find the solution.
Also, the app may perform poorly due to the poor performance of your Heroku server. This is the basic app tutorial, now you have to spend some time to optimize it.
Came across your channel a few weeks ago and I'm amazed at the way you simplify complex subjects. Thx for the work you do. I'm sure many more will appreciate the quality of the videos content. Any "online shopping" app in the works?
Thanks for the kind words, definitely coming up in the future!
One of the best video !
Bro , kindly keep going on.
you the best teacher i ever seen .. thank you so much
Thank you! 🙌
This is a good start. You might want to focus on making it mobile-friendly and include a user list. I'm also developing a similar product in Replit, and my next step is to find a way to add basic encryption and set up a permanent server.
Love your tutorials man. One suggestion for a video, could you cover setting up environmental variables for React ? I don't mean just adding .env files but adding the scripts for different environments so when you run your npm run start, build, deploy etc everything is set up with the right variables. I feel with your clear explanations i could grasp it because I've read several tutorials and it's never clear or coherent.
Great idea!
@@javascriptmastery Glad you like it! I think it would be helpful for a lot of people in order to keep their projects in order. I have a cool project I'm making (based on your redux/mongodb tutorial) and sometimes it's a bit of a hassle because I have it deployed to heroku and netlify and it updates when I push commits to github and I have to manually change a bunch of stuff all the time for it not to break.
@@King-Gilamashur2758 Feel free to contact me at contact@jsmastery.net with a link to the Github repo. I'm always looking for some new projects to showcase.
very informative and practical, thanks for teaching us valuable things
This tutorial is really awesome! Can you please extend this tutorial on how to connect this to a MongoDB database? With user registration, profile edit, deleting messages, storing messages, etc. Maybe user roles too? Thanks so much!
Great idea, I might do it!
please did you get how to connect this project with mongodb
thanks man...you saved my life...keep making tutorials like this !!
Anyone in 2024?
Complete kar liye pura
@@learnprogrammingtip665 apna code bhej sakte ho
I plaster
excellent tutorials for beginners to know what is socket io and other basic functionality of react and nodejs
For those who are confused. Inside client directory, in Chat.js, it's pointing to heroku instead of http:localhost:5000
replace and you will be fine
I took 3 hours to realize that. Because started getting CORS problems, but actually was an illusion. I couldn't solve the cors because of this.
Well, At least now I know everything about cors LOL
@Fabio Alexandrino How did you fix cors problems?
Amazing video amazing explanation was able to build an application without a single error! Thank you!
to the people facing the issue that there messages are not sending just go in your index.js file in server and define your io as
const io = socketio(server, {
cors: {
origin: "*",
},
});
ty so much brother, where did you find the solution
thank you, this helped.
Why the fuck youtube has a liking system that allows you to like once!
bro you are a savior!
Thank you!
Hey I found a bug in the app and I fixed it -
The bug was that when your server is actually a bit slow then what happens is until the server doesn't reply back the setMessage doesn't set to null or ' ' which has a black value which actually does create a problem that when you press enter or the send button multiple times the same message is sent over and over. For fixing that your input.js file should look something like this which basically changes the setMessage to ' '
```
import React from 'react';
import './Input.css';
const Input = ({ setMessage, sendMessage, message }) => (
setMessage(value)}
onKeyPress={event => event.key === 'Enter' ? ()=>{sendMessage(event);setMessage('')} : null}
/>
{sendMessage(e); setMessage('')}}>Send
)
export default Input;
```
Hope this helps!!!
Dude you are a lifesaver!
Hey can you contact me ?
@@rashuneekhra9198 Ya sure
You are an amazing developer and also my favorite UA-camr.
Please make more videos on reactjs with redux.
I keep getting "Cannot read properties of undefined (reading 'search')" when I try to join, what could be the problem? the error comes from this line "const {name, room} = queryString.parse(location.search);"
solved the error?
Did it work?
I solved that by using the function useLocation() from the module "react-router-dom"
I had to define the location before hand (it might because of a newer react version):
import { useLocation } from "react-router-dom";
// and then inside the Chat function and before the useEffect
const location = useLocation();
@@libanm.r.7834 Thanks Man! :)
bro you killed the performance
Is it possible to add an "Someone is typing" indicator or "Message seen" feature?
Absolutely. You'd need to dive a bit deeper into socket.io documentation and features, but it's absolutely doable.
i think both not implemented in socket but you can do them by JavaScript monitoring the message input box (for change) and messages container ( for focus, blur ) respectively
@@hassuunna exactly.
I think we can use broadcast method to let other user know you are typing.
Pràñís Shrést exactly I was just answering how to catch them
Thank you very much. Your video helped me a lot! Strong direct hug Brazil!
This is awesome 🔥❤️
Thanks bro i got a job... After watching your videos...
Amazing, congrats!
1st of all: great tutorial!! Thank you!
2nd: how do i add timeStamps to the messages? i mean, even your video wallpaper shows them ;)
Is there maybe a helpful link or some kind of quick response to that?
Any help on that would be appreciated.
maybe you can add a third attribute to the messages, so there's user, text, and then u can add time and set it to Date(); or smth
Just discovered your channel, and I gotta say, this is awesome. I have a hard time to find new tutorials to follow, and I love your approach on things. Thanks !
Welcome aboard!
How can i implement "user is typing..." functionality ?
Great idea, try researching a bit, did you find a solution? :)
Well, generally speaking (as I am not react programmer), you have to listen to to the "typing event" (if user is typing to a specific field) and when he is doing this, emit through a socket the message about this user typing.
@@sengoku8497 What is the maximum salary for javascript developer if i am using frameworks like angular react js react native .please anyone can answer.thanks in advance