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
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 .
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.
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.
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!!
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
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!
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 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.
Deploying server on Heroku: 1:48:57 Deploying frontend on Netlify: 1:52:18 Thanks for this - filled in a few gaps for deploying the server and frontend.
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 :)
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 :)
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 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
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.
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 ...
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!!!
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👍
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']});
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
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!
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 for this! I was giving up trying to use socket.io and express with react because I just couldn't understand how they worked together, thank you!!
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!
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!
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!!!!
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 😁
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).
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!
Большое спасибо! Это лучший туториал чата, что я смог увидеть на просторах интернета. Всё получилось - от начала до конца. Хотя опыта в яваскрипте было ноль! Больше спасибо! (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!)
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
@@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.
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!
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 !
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.
Thank's you for this tutorial. There is little mistakes on it. Some tips for other people: * Do not use the 'message' name for socketio transmission message this is a forbidden channel name. * function sendMessage of this tutorial is wrong because the initial value of messages is an empty array so the memory address link to it isn't the same of an filled array. * function sendMessage: second argument of useEffect do not need to be set with messages variable but with empty array because this one need to be call only one time because messages will be update through socket. So the functions should look like these: useEffect(() => { socket.on('newMessage', (message) => { setMessages(messages => [...messages, message]); }) },[]); Enjoy tutorial now 😏
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
You can install an extension called Simple React Snippets - where you can create stateless function component with just - sfc and also for importing react
If he could make the full thing into a series - 5 parts. Like a series. Roughly 27 minutes for each episode. I think it would have been an even bigger hit ....
@@javascriptmastery Yes, like episodes. Break the full length discussion into 5 episodes. Roughly 26 minutes each one. Lucrative, enticing and just about long enough to hold the audience's full concentration n focus thru an episode. the focus wanders off when vid is too long in 1 go..
One problem - when you use a phone as one chat person and computer as the other, when the phone screen shuts off from being idle, it crashes the heroku server. I have to find a fix before I show it at interviews ☺️. But you're the best teacher I've found on youtube so thank you for your work 😀
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();
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.
Whenever I click on send button this error is displayed, io.to(user.room).emit("message", { user: user.name, text: message }); ^ TypeError: Cannot read property 'room' of undefined.
@@rajvikhatri2330 in my case by keeping the getUser function in one line without {} as suggested by @Anfan Li ,the send button started working so you can try this.
@@abhinandanvashishta2846 please help me 😞 I'm getting error in trim() in message.js file Browser gives error - cannot read property of trim undefined. ... This cause my messages and incoming messages both are in left side
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
You guys should do a Video explaining Redux with Angular or React . I mean its really important and there is not enough specific video defining and applying Redux in real world
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
I loved your tutorials and really giving good explanation thanks for that. I will be glad if you do a big calendar with todolist and events to bind on the calendar and to give alerts. Can you please do that from scratch using react Hooks?
You can use moment to do this. npm install --save moment npm install --save moment-timezone In Message.js Under this line: const Message = ({ message: { user, text }, name }) => { Add: const moment = require('moment'); const tz = require('moment-timezone'); const time = moment().tz('America/New_York').format('h:mm a'); Then under each messageBox div, add this line: {time}
JavaScript Mastery PRO launching soon! Be the first one to find out about it - javascriptmastery.eo.page 🔥
Adding timestamps for my own use. Awesome video btw! (2)
Project Set up: 5:00
Server code 13:00
Deployment 1:46:58
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 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 think you will never be
conscious about how much you helped me. Thank you very much!!
Happy to hear that!
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!
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
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!!
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.
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?
There are many tutorials out there but Nothing can't beat this one!!!
Mind blowing 🙏😎
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 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.
Deploying server on Heroku: 1:48:57
Deploying frontend on Netlify: 1:52:18
Thanks for this - filled in a few gaps for deploying the server and frontend.
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.
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 :)
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 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
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.
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
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
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!
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 ?
youre the man, thank you javascript mastery
THIS IS EXACTLY WHAT I WANTED! THANK YOU😘
I'm glad!
0
I dont know how will I thank you. You deserve a million subscriber
Thanks you!
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
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!
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?
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 so much for this! I was giving up trying to use socket.io and express with react because I just couldn't understand how they worked together, thank you!!
You're very welcome!
This was really awesome, you literally gave all the building blocks to creating a great chat app. Thanks
No problem 👌
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!
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!
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!
Quality content, with no BS. Man, you deserve more subscribers.
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!
I have never felt this free before!
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!
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
This just popped into my suggestions, imma work on it later when I have time! looking forward to this!
Great!
You are awsome big brother.
You teach incredible and try to help as much as you can.
Thank you from bottom of my heart.
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!!!!
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 😁
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!
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
Большое спасибо! Это лучший туториал чата, что я смог увидеть на просторах интернета. Всё получилось - от начала до конца. Хотя опыта в яваскрипте было ноль! Больше спасибо!
(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!
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.
U r very smart teacher nd u know the student's need...thanx a lot
May allah bless u sir🙂🙂
Thanks!
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?
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.
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 is an awesome video. I love the way you take out time to explain every detail of it. Thanks
I love that you reply to most of the comments!
Always! :D
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!
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.
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!
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!
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-manu2758 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.
I appreciate the high-quality audio.
Thank you Tomas!
Amazing! Maybe a complete MERN stack next
That's the plan!
@@javascriptmastery To bi bilo odlicno, upravo ono sto mi treba :)
Adrian, Your tutorials are awesome! Did anyone else have a problem with the send button? If so, what was the solution?
Thank you! I'm not sure, try checking the GitHub repo. :)
Thanks Adrian. You made a nice and very understandable video with this product-mix. Liked it a lot. 👍
I'm glad you liked it!
Thank's you for this tutorial. There is little mistakes on it.
Some tips for other people:
* Do not use the 'message' name for socketio transmission message this is a forbidden channel name.
* function sendMessage of this tutorial is wrong because the initial value of messages is an empty array so the memory address link to it isn't the same of an filled array.
* function sendMessage: second argument of useEffect do not need to be set with messages variable but with empty array because this one need to be call only one time because messages will be update through socket.
So the functions should look like these:
useEffect(() => {
socket.on('newMessage', (message) => {
setMessages(messages => [...messages, message]);
})
},[]);
Enjoy tutorial now 😏
Thanks!
Bro if you keep dropping gems like this soon you'll reach a million subscribers. ❤️
Thanks! 😊
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?
You can install an extension called Simple React Snippets - where you can create stateless function component with just - sfc and also for importing react
he is doing it for the newbies
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! :)
Great Video! It's an amazing introduction to socket IO + NodeJs + ReactJS. I'm so glad with you! Thanks a lot man, great job!
If he could make the full thing into a series -
5 parts. Like a series. Roughly 27 minutes for each episode. I think it would have been an even bigger hit ....
What do you mean? To create a compilation of these 5 videos? 👌
@@javascriptmastery
Yes, like episodes. Break the full length discussion into 5 episodes. Roughly 26 minutes each one. Lucrative, enticing and just about long enough to hold the audience's full concentration n focus thru an episode.
the focus wanders off when vid is too long in 1 go..
Excellent explanation, Clean Code, Elegant Design & last but not least full deployment from scratch, Thank You so much Adrian ❤️❤️❤️
Спасибо, получил классный опыт при просмотре этого видео. (Thank you, I got a great experience watching this video.)
One problem - when you use a phone as one chat person and computer as the other, when the phone screen shuts off from being idle, it crashes the heroku server. I have to find a fix before I show it at interviews ☺️.
But you're the best teacher I've found on youtube so thank you for your work 😀
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! :)
Thank You so much Sir
you the best teacher i ever seen .. thank you so much
Thank you! 🙌
This channel is great. I liked the way you explain all the things.
Thank you, man! God bless you! Awesome content, subscribed!
Thank you for this tutorial! I know Javascript but this video will help me out to build a real-time chat! I will add this to my website.
This is a great project, thanks for tutorial.
Glad you like it!
@JavaScript Mastery
Amazing intro to socket.io, THANKS!!!
would be cool to see a full stack tutorial using react, node, MySQL
Thanks for the idea!
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
excellent tutorials for beginners to know what is socket io and other basic functionality of react and nodejs
Whenever I click on send button this error is displayed,
io.to(user.room).emit("message", { user: user.name, text: message });
^
TypeError: Cannot read property 'room' of undefined.
If you find a solution to this, let me know
I had the same issue. My getUser function had { } which it SHOULD NOT. Keep the function on one line without { } Hope this can help.
@@anfanli2390 Yes it did work ,thanks!
@@rajvikhatri2330 in my case by keeping the getUser function in one line without {} as suggested by @Anfan Li ,the send button started working so you can try this.
@@abhinandanvashishta2846 please help me 😞 I'm getting error in trim() in message.js file
Browser gives error - cannot read property of trim undefined. ...
This cause my messages and incoming messages both are in left side
Amazing! Thanks for creating such a helpful video for socket n00bs like me
Thanks!
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
You guys should do a Video explaining Redux with Angular or React . I mean its really important and there is not enough specific video defining and applying Redux in real world
Amazing, but how could I make a list of rooms already open?
In Node Js , simple return number of rooms by using Room.find() query , Room is Model name here
You are an amazing developer and also my favorite UA-camr.
Please make more videos on reactjs with redux.
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
You know what, I think I love you lol. Thank you mate for making this world a bit better
I loved your tutorials and really giving good explanation thanks for that. I will be glad if you do a big calendar with todolist and events to bind on the calendar and to give alerts. Can you please do that from scratch using react Hooks?
That's a great idea, I might try!
Your knowledge is amazing, and the way that you teach, thank you so much!
Great tutorial, any way of time-stamping the emit messages and the messages sent by the users?
Absolutely, you just need to implement it in React. No need for additional Socket.IO integration!
You can use moment to do this.
npm install --save moment
npm install --save moment-timezone
In Message.js
Under this line:
const Message = ({ message: { user, text }, name }) => {
Add:
const moment = require('moment');
const tz = require('moment-timezone');
const time = moment().tz('America/New_York').format('h:mm a');
Then under each messageBox div, add this line:
{time}
Awesome video man, You literally made the coding easy to understand 🧡💯 Keep posting such great content.
Hey, is there any way I can add an image attachment feature to this chat?
yes you can. read the image file as DataURL and then send that data to backend.
look into amazon web services, that’s how i integrated images into my chat app