Build and Deploy a Realtime Chat Application - Socket.io, Node.js, and React.js

[Music] hello everyone and welcome to another javascript master video in this video we are going to be building an awesome real-time chat application so let's do a short preview inside of here you can type your name and the name of the room you want to join once you join you'll be greeted with this little chat box and some information on the side inside of here you have a box and people who join will all show up here so currently there is only one person in the chat room but as more people join more people will show up here and of course you can send messages let's close this window up and open two different chat boxes so inside of here we have John on one side and Jane on the other we can join with John and we can join with Jane now as you can see along with the greeting message that admin had sent John welcome to the room hello it also said that Jane has joined so it will receive a notification of sorts for every person that joins and now we can chat in real time so if John says something like Hello Jane is immediately going to receive that message so as you can see this real-time chat works using socket at i/o socket at i/o is used for real-time data transfer and the data will be transferring our messages there are also some additions to this chat what would a chat box be in 2019 without emojis so as you can see if you type any emojis they immediately get transferred to their corresponding emojis so you just need to type your characters and they will get will get transferred to emojis also when you spam a bit so let's do spam 1 spam to spam 3 as you can see chat box immediately Scrolls to the bottom that's for user friendliness because every time that you receive new messages you would need to manually swap to the bottom so if we spam a bit more and get to the top you can also see that we have this little button right here and if you click it it will get immediately to the bottom of the chat box so these are some functionalities of the chat box but the main focus is the real-time data transfer that we'll be doing with nodejs socket at i/o and react so react is going to be used on the client side and the nodejs is going to be used on the backend how long with this you will be using socket at i/o to make this happen so let's dive right into the code and let's start writing it there are some more important things that I forgot to mention this video is for anyone wanting to learn and advance in react and note by creating a real project from scratch this project will include project structure lifecycle methods using hooks front-end and back-end connectivity socket at i/o and much more this video is suitable for everyone who has some familiarity which react and for those that already know quite a bit what want to improve their knowledge and one of the great additions of this video is that we are going to do a full deployment of both back-end and client-side so you can use this chat application online and share it with your friends to actually test it or just put it on your portfolio so let's get started first we need to create an empty directory I'm currently in an empty directory called chat application once you created feel free to open it in your code editor of choice - visual studio code and once we have that ready we can create two new directories you can create these directories by just manually adding a right here or you can use command line if you are on Visual Studio code you have built-in terminals so you can open it inside of view and then terminal or just use this keyword keyboard shortcut we can do it using terminal since it is going to be a bit faster make dear client this is for our react code we can see the into client and we can run create react app and that / this will create it in side of the client directory while we wait until that installs we can click on this + icon right here and open another terminal or we can rather click this and open it on the side so inside of here we are going to see D so we get back into the main directory so that is this one right here and we can create a server directory so we are going to make their server and we are going to see the into server now that we are in here we are going to initialize our package that Jason so we can type NPM init /y and this is going to initialize our package that Jason and then we can install all the necessary dependencies by typing NPM install - they're safe and we are going to be using course later introduction node 1 if you don't have it installed already Express and socket that IO so type that in and while that installs we can install all the necessary dependencies for the client side so inside the client type NPM install that are safe and in here we have quite a few so react - router socket that IO - client react scroll to bottom react emoji and query string type that out and ok so we can now clear our console right here and wait until this installs now we can see that inside of the client we have a typical create react app boilerplate and inside of the server we just have the node modules and package - Jason in here we just need to add a start script so we are going to type start and it is going to be node 1 so dependency we just installed index dot JSP this is going to run our server continue we do not need to run note index address every time this is going to run it all the time and restart it for us okay now that that is out of the way we are going to delete all the unnecessary boilerplate code that create react app provided us with so navigate to decline directory right here and delete this source so inside here we have a lot of stuff but we are going to be building it from the scratch okay so we can create our new source directory and inside of here we are going to have to fast one is going to be indexed at yes and the second one is going to be app that is okay so inside of the index a J's file we are going to initiate our react application so we can import react from react we can also import react Dom from react - Dom and we can import app which doesn't exist yet we are going to create it from that slash app okay and we need to actually target our root element inside of the HTML so we're going to do react Dom that render pass in that app component and we're going to do document that very selector and we are going to target that root right here okay that's basically it many people just copy this code out so this is just a basic boilerplate code that you need for every single react application if you are more of a react beginner I'll explain it for just a second inside of this public directory you have you have an index dot HTML file ignore all of these comments and you'll see that the only thing in the body is the root so basically react is going to import or inject all of the code that we write inside of this single depth and we are actually targeting that that they've inside of here so we are saying everything that we create in is going to be inside of this app and put it inside of the root so that's basically it okay now that we are already with the index that is app let's move on to our app - is to set up our initial project structure so we are going to import react from react as we do with any react component but we are also going to import some things from react router so react router wasn't really necessary for this application we could have used Redux or deep props sharing but for the simplicity of this application I just decided to pass the props as query parameters just to simplify things on this hand so we can focus more on this socket that IO side of things so inside of here we are going to have browser router as router and we are also going to have router and route sorry without this router right here it is the thing we assigned before so we are going to import that from react router down okay there is a mistake on my end we installed react router instead of react router Dom so we can do it right here we are going to type NPM install that they're saved and passing react router Dom and install that so we can use it there is there were some changes regarding via crowder and react router DOM and all the peer dependencies but it looks like it's now reactor out or down okay so with that out of the way while it is installing we can create our fjs component so it is going to be a simple arrow based component so we can type Const a p-- is equal to an arrow function that is going to be equal to return since we only have returned inside of this we can only type our parenthesis we don't even need our curly braces so inside of here we are going to return first there's there is a component called router which we declared up above and it has two route on the first one we have a path that is equal to root which is basically just a root path we have exact and we need to pass in a component that we want to render on that path and it is going to be join and then we have the second route which is going to be a slash chat and it is not going to be exact path since we are going to pass our properties and inside of here we are going to render chat so let me talk a bit about what is happening right here so when the user first comes on the page he's going to be greeted with our joint component inside of here he is going to pass his data in the login form and through query strings which we'll see later we are going to pass the data through to the chat once we have the data we are going to render the chat component so without out of the way we can export default app and now we need to create these two components just so our app doesn't break so we are going to import app from that slash and now we need to create those two components just our app doesn't break when we launch it so we are going to type import join from that slash components slash join and also we are going to import our chat right here in the same fashion so right here let's create our folder called components if I spell it correctly and let's create those two files called join dodges and chat that is okay inside of here we need to have our basic boilerplate for every component so we're going to type import react from react now we can create our chat component so Const chat is equal to Eero function and we are simply going to return an h1 which is going to say chat just so we know that is it is indeed a chat component being rendered and we are going to export default chat ok we can copy this and paste it inside of the join and just change this chat to join now if we are correctly importing all these things inside of the app we can actually run it so run NPM start to run the react application add-in should open in the browser on the localhost 3000 okay now inside of here you can see that we have our join component being render on the root path of our project and if we type chat and spell it correctly you can see that our chat component is being rendered and now we are going to set up our server so now that we have just this basic client up and running we can go into the server and create our index J's file and let's create that server and let's make it running so inside of here we can first require all the necessary dependencies so we are going to be using Express so constant Express is equal to require Express we still have no import statements like in react because we are in the node and we need to do imports like this using require also we are going to be using socket at i/o so it's socket IO is equal to require socket that IO and we also need to require a built-in node module called HTTP so HDB is equal to require HTTP okay now we need to set up the socket at that IO and to do that properly we do not need to only run our application like we are used so cons app is equal to Express and then run it like this and then app that listen or app that get will be doing something more differently you can find all the details in the official circuit data documentation right here so if you go under the socket that IO on the web and go under documentation inside of here if you search for node you should find yeah here it is using with node HTTP server so inside of here you can see a basic demonstration of just basic server app - is so you can go through all of the documentation it is always a good idea to understand in depth the software you are working with so in in this case it is so key that IO it is used for majority of the data transfer this application so inside of here if we want to see something more about it you can see that it can be used to do real-time analytics instant messaging and chat so you can see that just few lines of code we can initialize our chat application but ours is going to be a bit more complex basically with socket dot IO you can do anything that is real-time so if you want to do something real time you need to use sockets not HTTP requests because HTTP requests are slow they're good for serving web sites but you need to use web sockets which socket that IO is using to actually show something in the real time so let's get back to our node.js application and let's initialize our server so we can properly set up our socket that IO just under the app we can run Const server is equal to HTTP that creates server and we need to pass in that app that we initialize from Express right here and just under we can create IO which is going to be an instance of the socket IO so socket IO and we pass in the server as you can see here this is just a basic rundown to make this socket a tile server working now we have this socket at i/o instance that can do a lot of stuff but first let's make our server running so we're going to type server that listen and then we need to specify our port so we can do that right here so const port is going to be equal to process that env that port or we can run it on five thousand so basically we can just run it on five thousand but later for deployment our server is going to require a specific port and it is going to be inside of the process that env that port so we do this to make it correct for a longer distance so we don't need to change it first parameter to this server that listen is our port so we are going to pass that in and the second is a callback function which in which we can simply console that log and we can put our backticks server has started on port and then we can specify the port using are using our dollar sign and then curly braces syntax to actually pass in a real variable this should be enough so we can run the server and actually see our server running so if we go inside of the terminal that is inside of the server I have both open on the side this is client side and this is server side we can simply as we specified here run NPM start and it is going to run our node one of the index dot J's file so inside of here you can see that this command has been run and that the server has started on port 5,000 so now we need to actually do the real-time messaging since we are already on the backend we can start with that first we can create our router so we are going to have a router really really simple router and we are going to create it as a new component right here so we're going to have router DJ s it is just typical for all express applications inside of here we are just going to require Express and we are going to require router by typing Express that router and then immediately calling it with a capital R in here we can create our get request to a route route so it is going to be just slash and we have typical request and response and inside of here we are simply going to send our message server is up and running this is just it just so we can see if we open it on the localhost 5,000 that our server is actually running and after we created our router and our routes we are simply going to export it so module that exports is equal to router now that we exported it inside of the index the JS file we can actually not import but require it so Const router is equal to require router from that slash router because that's where it is based and now we can actually call it as a middleware so AB that use and pass in our router ok without out of the way everything should be working and we can actually try it inside of here so if we type localhost 5,000 you can actually see that we get our message server is up and running our server is up but now we need to integrate our socket at i/o so as you can see here we have this instance of i/o that we created but we are not doing anything with it so let's start with that io on the back end so it is not Sokka dot io / client that we have on the front end has some methods so if you go back right and open our socket at i/o documentation under learn and then documentation or simply maybe under get started you can see that we have I owe that on it is a method a built-in keyword connection and this is going to run when we have a client connection on our i/o instance and with that we also have if we can see it right here a special built-in disconnect so we are going to be using both of these methods to actually register clients joining and clients leaving from our real-time chat application so now we can get back to our application and actually start writing socket at i/o code so as we saw we have a special IO that on and then we need to pass connect or connection we can pass in connection and inside of here we have a callback function that is going to be run inside of here we get a socket so this with this is going to be a socket that is going to be connected as a client side socket so right here for the moment we can simply cancel that log we have a new connection just so we know when the new connection actually occurs we can even add some exclamation marks light here so we notice it while we are here we can also implement our disconnect so inside of here inside of the i/o dot on all code is going to be run inside of this function because we are actually managing this specific socket that just connected we are going to have a socket that on so this time it is not a IO that on but socket that on which is just a specific socket that just joined we are going to have a specific function as we said which is disconnect and inside of here we are not going to have any parameters right here as we did with socket because that user had just left and inside of here we can control that log user had left okay now with those two basic functions done when we create our basic client-side we are actually going to receive real-time connection and disconnection console that logs right here in the console of our Visual Studio code so now we can get back to our client-side code and implement that there now we can start creating the affronted for our joint component because when the user joins a connection requests is going to be fired up and when the user leaves a disconnection event is going to be fired up so let's start in this component we are going to be using react hooks if you haven't used hooks before hooks are basically a new addition to react function based components before function-based components were just dummy components but now with addition of hooks you can actually use state and lifecycle methods inside of them so now you can convert basically 90% of class-based components to function based components and they actually look much cleaner with less code and improved readability if you haven't used hooks before I strongly encourage you to watch my hooks video on the channel I'm going to link it right now somewhere on the screen or in the description this video is going to have some heavy use of hooks inside our chat component we will be using a complex life cycle methods using hooks so if you have some free time and want to learn something new feel free to go watch that hooks video right now but if you do not have time and just want to build this chat application feel free to stay and we are going to explain everything inside of here also so we are going to first import use state this is a hook for using state inside of the function based components and we are also going to import link from react router Dom this link is used to actually link to our chat / chat path okay now inside of here you declare folks inside of the function based components nowhere else you declare hooks like this Const and then an array first parameter is a variable so name for example and the second is a setter function so set name and it is equal to the use state and inside of here you pass the initial value that this variable is going to have and for in our case it is going to be an empty string so now we can use our name state we have a function to set this name state and we are passing it an empty string as a initial value for our name state inside of here we are also going to have one similar state like this it is going to be a room so we are going to have room and we are going to have set room set our function just like that it is also going to be initialized as an empty string only thing left to do in this component is to create our JSX or actual presentational part for our join component in this video we will not be using bootstrap or any other CSS preprocessors or frameworks in that case so we're just going to write pure CSS and because I do not want to bother you with writing a lot of CSS to style this because I know that that is not the reason you are here I'm going to leave a link down below to the github project of this page where you can actually copy all of the CSS files I'm going to copy them into this video but if you have time and if you're willing to actually create styles for yourself feel free to pause this video and then write the styles for yourself also while you're copying styles from my github directory of this project feel free to leave a star on the top right of the project on github so now let's actually start creating it first we are going to have a div of class name join outer container and inside of here we are also going to have an inner div which is going to be equal to join inner container so inside of here we are going to have an h1 which is going to have a class name of heading and if you're not familiar with react and you used HTML before you use class but since we are writing JSX and not actual HTML we need to use class name for classes okay now this is simply going to say join and inside of here we are going to have two divs and both of them are going to have an input so inside of here we are going to create an input each one is going to have a placeholder and also each one is going to have a class name or that is equal to join input and each one is going to have a type of text and each input is going to have on change handler which we are going to write later so we explain it in more detail now we need to close our input component just like this and just below we are going to have our link that we imported on the top if you wonder how I wrote in multiple lines like this you basically just put your cursor and click alt on Mac I'm not sure about Windows and then you have multiple active cursors available right here okay it's a little pro tip for if you're handling a similar data or simply want to delete a lot of stuff at once inside of the link we are going to have a button this button is going to have a class name of button and it is going to have this button is this button is going to have a class name of button and it is going to have type of submit inside of here we'll just say sign in okay for D placeholders we are going to have to type name and this one is going to be room class name is joint input but this second input is going to have empty 20 which is basically margin top 20 just so we can divide it from this one and this button is going to have margin 20 also margin top 20 just so we can divide it from the inputs okay now we can focus on our own change handlers basically this is where the logic of this component happens so basically we are going to have an arrow function and inside of here we are going to have event so basically when user type something in this input event is going to occur and we can simply get data from this event with event that target that value so event that target that value basically holds our data and what are we going to do with the data since this is a name input we are simply going to set this the output of this input into into our name variable so we are going to call set name and we are just going to pass event that target that value that's basically it and the same thing is happening for the bottom component the only thing we have to change is our set name we need to change it to set room as you can see here we do not have this that set state or this that name or stuff like that but using hooks you just have simple functions and simple variable names as state properties okay now that is ready we need to actually do something with this name and input because as you can see they're not being used right now and this is where our link comes to play so as I said we are not going to be transferring data through props or using Redux for this case we are just going to be using query strings so we are going to pass data as an URL you are going to see how to do that right now so link needs to have a two property so our link is going to lead and now we put curly braces because it is going to be dynamic to slash chat because that's where our chat component is but before that we need to pass in some parameters and you pass parameters or query string and you pass parameters in the URL by using question mark and now you can specify those params so first one is name which is going to be equal to name variable right here set from our input and the second u divided by typing and sign is going to be room which is going to be equal to you guessed it room okay with this will be able to read the name and the room from our chat component to actually see the data we got in here another thing we need to do is we need to prevent user to click this button or this link to be transferred to chat application if he hasn't specified the name or the room because that would break our application so we can do on click and we also have a callback function right here with has event and we can simply do it like this if no name or no room then we can use ternary operator to actually call event that prevent default this is going to prevent button click of this link and secondly we can add now right here and if it has room and name we are simply going to do nothing because we want just to be transferred to our chat with all the specified parameters that is it for this application and the way we are going to do this CSS is that we are going to import it from right here so it is a nice way a nice project structure for every component to have a specific folder so we're going to put this chat application inside of the chat folder and we are going to create a chat that CSS file inside of the folder also so inside of here will be all the styles for our specific component so we can also have one specific index that's CSS file but if you have like 10 or 20 components or 100 this file would get like thousand or more lines and it is not readable you cannot find the property you're looking for inside of it so it is a better practice to actually put a specific CSS file for every component now that we created this file or folder for our chat component we can actually do it for our joint components so we're going to have join pass this joint component in and create join that CSS file now we can actually import it on the top of our components so import that slash join that CSS don't forget that and now all the styles from this CSS file are going to be applied to this component and to our project as I mentioned you do not need to where you don't need to write them all by hand right now so we are not going to waste time you can just go under the link below and simply copy them from my github repository the project structure is going to be the same so you can just go under join and join the CSS and copy all of the files right there then we paste them right here as you can see these are just basic styles some displays with border right border radius padding's and stuff like that if you want you and if you want to practice on your CSS you can just basically write it all by yourself even change the styles it doesn't really matter but for the simplicity of this video we are simply going to copy and paste them right here okay now if we actually open our console we can see that we have some problems and that is because we change the file structure of our join and chat components so we not so we now need to import them actually from our join slash join and chat slash chat because we need to dive into the components directory and then one level deeper into the chat or join and then fetch the components so we're doing that right here now if we go back into our browser we can actually see our join component as you can see here our join component has been done and in here we have an input and a room so which is just another input once we click here we are going to be transferred to our chat application right here which is actually rendering our chat component and if you notice right here inside of our URL we have two parameters in here is the name and in here is the room as I said this is just for the simplicity purposes we could have done this with passing props or with Redux but we did I did not want to implement this into this application for the simplicity sake okay now we get back we can actually start writing our chat application and actually initiate requests for connection and disconnection of our socket that IO instance inside of this chat file is where all the most important socket that dialogic is going to be stored so let's get right to it inside of here we are also going to be using hooks so we can import use state and use effect which is basically for lifecycle methods inside of hooks we can also import query string so import query string from query - string this module is going to help us with retrieving data from the URL URL as we saw before and we can actually import io from socket that IO - client so first thing inside of here are going to be use effect calls so what is use effect use effect is a hook that lets you use lifecycle methods or side effects in function component you can see that it is specified as first an arrow function right here and inside of here you do something and it happens on component did mount so on the first render on component did update so on the every other render and you can also specify the component did unmount but I think we can see that right here so as you can see this is the equivalent to use effect hook on the class-based components so we need to do a lot of duplicate code but using use effect hook we can do something simply like this inside of here is just a simple example but we also need to use clean up because we need to do something when the user actually disconnects so as you can see this is the equivalent to the class-based components we need to use component will unmount but using our hooks we can simply do something like this we can return a function and this is going to be acting as our cleanup or as our component did unmount lifecycle method with that out of the way if you if you want to understand more about hooks you can simply watch the video I did so right here we can specify our first use effect call it is going to be used effect and it needs to have an aryl function so inside of here we will put an error function so first inside of here it is going to run when the component renders so the first thing we need to do in our chat application or chat component is to retrieve the data that users have entered while joining so we can do that in this fashion so we're going to have a constant called data and we are going to fetch it from query string that parse and in here we are going to pass in our location that search location actually comes from react router and it gives us a probe called location so we can actually use this location right here with this we basically get a URL back so if we cons of that log our data and we can actually console that log our location that search so we can see what we are getting back so if we do this and go back inside of our browser we can actually open our inspect element and console to see what data are we getting back so we are going to put this down below and you can see that we are getting back right here these second parts so location that search is not giving us a full URL but only the parameters and what this query string module right here that we imported is going to do for us is going to return an object and is simply going to specify name is equal to JavaScript mastery and row is equal to room as you can see here right here we can actually distract for that and automatically take in room or basically name and room from this and now we can simply console a blog name and room and we will need and we will see that we have all the data right here because they are indeed specified right here in the URL of our chat since we are going to be using both name and room in this component also and in all other components we are also going to specify them as state right here so we can just copy these two statements right here and paste them on top of our chat component and we can simply call set name and pass in name and set room and pass in the room okay like this now we have name and room inside of our chat component and now we need to actually make use of our I all right here so we need to create a variable that is going to be stored outside of our component so we can create an empty variable called socket we just define it right here it does not have any data right now but we are soon going to pass data inside of it now that we have this variable inside when we get actually our first connection we are going to set that socket equal to IO which is coming from right here and we need to pass an endpoint to the server and our endpoint is located at localhost 5,000 right here and it needs to be in a string so as you can see right here we can even store this in a new variable because when you have just empty strings you can always store them in a separate variable it is a much cleaner way of storing just simple string variables and now we can pass in this endpoint right here simple as that what we can do now is actually console that log our socket to actually see what data are we dealing with if we go back to our browser and we refresh you can see right here we have an instance of a socket it has its own ID and many other properties if we get back and open our console we can see that we actually are making requests to our server which is great now all of these requests are happening two times which is not good and that is exactly why we need to specify when our use effect function is being called you do that by passing an array to use effect like this and it says right here if present effect will only activate if the values in the list change the values we are going to pass in our endpoint and location that search so only if these two values change we need to re-render our use effect now if we clean this right now you can see that we are getting only one instance of socket and if we get back you can see that we have only one new connection that's it so no more unnecessary side-effects happening this is the beauty of use affect hook so now we can actually from the front end and meet different events using this specific instance of a socket and you can do that by typing socket that emit this is basically another socket method and we are going to explore it into the documentation right now so inside of the socket documentation if you type command F on Mac or ctrl F and search for emitting events you can see right here that on the front end this is pure HTML right now using scripts for JavaScript we are using react so none of that is necessary but the important thing is that you can notice that we can omit events from our client side socket so you run it like socket that emit and then this is a and then you pass in a string that the back end is going to recognize this can be anything so this can be chat message this can be any string you want and then something is going to happen on the back end when it recognizes this emitted event another great thing with Amit that you can actually pass in some data so as you can see right here we are emitting some event which is just a voluntary name but it is passing an object with not one property as its payload we can receive this data on the back end and that's exactly what we are going to do right now so inside of here our event is going to be called join so on join we are going to do something and we are going to pass an object with our name and our room this is es6 syntax if you're not familiar with it this is the same as typing name is equal to name and room is equal to room but now we do not need that because the names are actually equal and this is actually our name and this is a room that we specified right here and now we can actually go to our server side we can close this terminals and actually close all of these files right here and go to our server index that is and now we can actually receive this event and see what happens when it is being emitted so inside of here we can use this socket right here which is just a specific client instance of a socket and inside of this console maybe we can leave it for now we can type socket that on and inside of here we can specify the event we specified so it is the same exact string join so socket that on join and then we have a callback function something that is going to happen on join inside of here we have our parameters so it is an object with name and room and now we get access on the backend with name and the room so we are going to cancel out name and room and simply that's it for now if we open a terminal again and we clean this out a bit go back to our browser and our application and if you refresh that right now go back to our application you can see right here that we have a new connection and the name is jazz mastery and room is equal to room that's amazing so we are actually getting the data another thing that you can do with socket that on and socket that Amit is actually pass in a callback so as a second parameter to our callback function which is actually right here we can pass in a callback and we can make use of that callback inside of this socket that on event so we can call it right here and what this is going to do is that we can actually trigger some response immediately after this socket that own event is being emitted and then we requested it right here so what you can do with callback is actually do some error handling so for example let's say that we have some error so Const error is going to be equal to true later we will have some true error handling but for now let's just say we have an error and then we are going to have an if statement and if there is an error which for now there surely is because it is true simply we are going to do a callback and inside of it we are going to pass in our error so we are simply going to type error is equal to let's say a string of error simple as that and now on the client side if we open this right here chat application we can even open it on this side and close this so we can click see more clearly and now we have access to this callback right here as a toward parameter to our omit function so inside of here this is going to be an error function right here and this is going to be executed when this callback is called as parameters to this callback function we get everything that we specified in here so in here if we type error as we did right here we can distractor it from this object and if the cons of the block or even we can alert this error right here and now if we go back to the browser and refresh you can actually see that we do get an alert with a message error and if we go back and if we comment this out on the a server-side and we go back and refresh you can see that we do get nothing so this is a great way of error handling or simply calling any callbacks you want to provide after the specific event has been emitted so user has joined we pass some data we do some logic right here on the backend and then we can pass in a callback what we want to happen after this event has emitted and this is actually this function right here this callback function that socket that IO has provided us with okay so for now we can remove this callback right here and we will actually implement error handling later we can also remove this right here not to make any errors right here but we will have this error function ready if it needs to be used to actually finish our first use effect hook we need to actually provide that return statement or return function as I mentioned before so to actually finish our use effect hook we need to implement a return statement this is used for unmounting so this is used for disconnect effects what we want to do now is provide a function this is simply how use effect hook works and inside the function we want to emit a disconnect event so if you remember inside of here on the backend side we had a disconnect and this is a basic disconnect event inside of here we can actually emit that event called disconnect the same as it is called right here the naming must be the same and we can simply omit that event when this happens and this is going to be happening on unmounting of the components so we are leaving the chat and the last thing we need to do is actually called socket that off it will actually turn this this one instance of a client socket right here so one chat person it is going to turn it off so we do not have to bother with it anymore with this our first use effect hook is done and now we have our basic set up for users joining and use disconnecting completed as we saw before now we indeed are getting the data about the name and the room on the backend so what I want you to do is close both of these windows for now and create a new file in the server so we are not going to touch client for now but in the server side create a folder called users that is inside of this file we are going to create helper functions that are going to help us manage users and manage users joining in signing out removing users getting users adding users everything that has to do with users even keeping track of what users are in watch rooms so right now let's add those helper functions that we are going to use in the index J s so right now first let's set up an array of users so users are going to be an empty array at the beginning but now let's specify what helper functions do we really need so we need a function that is going to add user so it is going to be add user and it is going to be equal to an arrow function later we need to remove users so cons remove user is also going to be equal to an arrow function and afterwards we also need to get user and after we get users we also need to get users in a specific room so get users in room is our fourth and final helper function okay now we can collapse all of this and start creating one by one first in add user that function is going to take three parameters so we can destructure them properly right here first one is going to be an ID of a user or of a socket instance so first thing we need to do is we need to somehow change the name and the room that user enters so for example if user enters JavaScript mastery we want to change that to be JavaScript mastery all lowercase and all as one word so first we want to take this name right here and then we want to trim it as you can see right here trimming removes the leading and trailing white spaces and line Terminator characters from a string so remove all whitespace and then we want to actually put it to lowercase so to lowercase and we want to do the same exact thing to the room so we know exactly what string data are we dealing with after that we're going to check if there is an existing user with the username that the second user is trying to log in with so we are going to do const existing user is equal to users that find so we are going to disarray and we are looking for users and we are trying to find if there is already an existing user with this name that the new user is trying to sign up with so now we can just take the user out and if user that room is equal to room and if user that name is equal to name this means that new user is trying to sign up for the same room with the same username and this is forbidden so we can simply add an if check if existing user then we can return an error that is going to say user name is taken simple as that and now if there is an existing user name our user cannot sign it and we will simply exit this function because this return statement is going to throw it out of this function and the user is not going to be created but if there is no existing user we can simply create a new user so Const user is going to be equal to an object of an ID name and the room and we can simply push this user to our new array of users now there will be a user there and we can simply return that user so we know exactly which user was pushed okay now to our second is remove user so in remove user we are going to have only one parameter and that is ID so we are going to try to index or try to find that user with that specific ID so we are going to create a constant called index and we are going to run users that find index so in here we are going to try to index or find our users so we're going to try to type cons index is equal to users that find index and then in here we have user and in here if the user that ID is equal to the specified ID so that means that there is a user with that ID so if there is a user of that index so we can simply type if index not equal to minus one we can simply return users that splice from that specific index one field and zero right here because that is going to return our spliced user and this is going to remove that user from our users array simple as that for the remote user function now we need to get user so we need to see if there is a user we can do this on one line so we can simply run and again we are going to have ID right here and we can simply run users that fine and then in here we are going to have user again and if user that ID is equal to ID that means that user exists and we are simply going to return it right here and now forgetting all users in the room we are going to have to use the filter function and we need basically the room because we want all users from that specific room users that filter in here we have user again if user that room is equal to room that's basically it turn all the users from that room now we have this four functions right here and we want to expert them so module that exports is equal to add user remove user and get user and also get users in room there should be a comma right here and after this we are fully set to use this file or you'd use this helper functions inside of our index.js file so we can properly manage all the users that there are on all specific sockets so right here if we go into our index Vittorio's now we can make use of these functions by simply importing them right here so we are going to just underneath here type cons and then curly braces add user remove user get user and get users in room okay from that slash users simple as that there seems to be an error right here oh yeah I cannot import it I need to require it just like this okay simple as that now we have access to these functions right here so as I mentioned we have name and room right here but now let's actually do something other than cons without logging that name and the room so on the join we are actually going to remove this console that logger here put this on top we are going to destruction properties that come from this function and we have user and error in this is going to be equal to add user so why do we have error and user basically add user function can return only two things an object that has an error property or an object that has a user property so if we get an error we can simply do something with it or if you get user even better so what do we need to pass to add user function basically add user receives ID name and room so let's actually see what we do with that so we need to put everything in an object to the structured ID we don't have it right here but is it is actually going to be the ID I showed you on a specific specific instance of a socket so right here we are going to type socket that ID okay name and the room we are going to pass all of this and right now we are going to type if error we are simply going to return call back error so right now you're actually doing with something with this callback function and this error handling is dynamically coming or rather error message is dynamically coming based on the specific error so if there is an existing user with that username will just output the error as username is taken easy as that if there is an error we will automatically get kicked out of this function because there is a return statement right here and if there are no errors we are simply going to call another built-in socket method which is called join join simply as you can see right here joins a user in a room easy as that and in here we pass the name of the room and it is right now stored in the user that room we are getting it out of the user that's great and now when user and now when user is finally inside of the room we can handle the fun stuff messaging events and messages firstly let's focus on the admin generated messages so this will be system messages when someone joins when users leave and stuff like that so for the beginning we simply need to emit a new event so socket that emit and we can call it message as you saw before we can also specify the payload of this event and we are simply going to say it user is equal to admin and text is equal to whatever we want so we can specify the text in this message will be equal to let's put it as a template literal string we can say user that name welcome to the room and then we can specify user that room this is simple welcome message for any user simple as that okay but now we are diving into new features of socket IO there is a new method called socket that broadcast and basically what broadcast does it is going to send a message to everyone besides that specific user so inside of here we can send that message to a specific room so when you're dealing only with rooms not all chats you need to specify a room so user that room and then that Amit and we are going to simply emit a message the same event with the have before and this time the payload is going to be the following so we have an so we have an object right here user is also going to be admin and the payload this time is going to be the following templated literal again and user that name has joined that's basically it so the first line right here is telling the user that he is welcome to the chat and the second liners here is letting everybody else besides that user know that that user had joined that's basically it for this specific join function we can also add a call back down here so that the call back at the front end if you remember gets called every time but if there are no errors we will simply not going to pass the error so it is going to run but the if statement on the front end is not going to be run because there are no errors but now let's get on to creating events for user generated messages so we can type socket that on and we can call this one send message the admin generated messages are going to be simply message and the user generated one are going to be send message on this line right here we actually emitted event from the back end to the front end but on here right here we want to expect the event on the back end so we'll be waiting on send message and the emitting part is actually going to be happening on the front end so just now just after we write this we are going to transfer to front end to actually emit those events so as we remember or as we can see right here the on function takes in two parameters first one is a key word on a string and the second one is an aryl function so we are going to type here and this is a callback that is going to be run after the event is emitted inside of the event we can actually take in the data so right here we are going to have a message and we are going to have a callback and in here we are going to get user who send that message so const user is equal to get user and we need to specify the ID have access to this socket from up above right here and that is the specific client instance so that is a specific user and we have his ID so right now what we are going to do is pretty simple so we are going to type I owe that to because we need to specify the room name and room name is simply room in which that user is currently and we're going to omit that event so we are going to omit message and as payload we will forward like this user is equal to user that name and secondly we are going to have a text of some sort and that text is going to be equal to message so that message is coming from the front end and we are going to look at that right now and afterwards you always want to call this callback right here so we can actually do something after the message is sent on the front end okay now that this is ready we can actually get on the front end and see what data are we getting and we can actually write emitters and listeners for this on the client side so now let's give this open on the side and let's open chat is on the front end so right here we only have a meter for the join we don't have the message or send message so now we need to do something with that so right here we are going to create a second use effect function so with hooks you can use as many use state as you can see right here or use effect hooks as you want the second one is going to be for handling messages so we're going to type use effect as we did before we are going to pass in a function and right now we are going to listen as I mentioned before for messages so socket that on and we specified message after that we get a callback function so if we take a look right here message is sending right here a payload of a user and a text so that is going to be our message right here and now we need to do something with that message basically how we are going to keep track of all messages is going to be with the state so we are going to have a state called messages and inside of the messages we are actually going to have an array that is going to store all messages so right here it is going to be an empty array and then we need to somehow specify every single message so we are also going to have state for set message and message which is simply going to be an empty string so right here we can actually push these messages to our messages array so we are simply going to type set messages and since we cannot mutate state we are simply going to spread all other messages and add one message on it that's basically it so right now this is adding every new message sent by admin or anyone else to our messages array and right here as you can remember we have an array and we want to run this use effect only when messages array changes that's basically it so right now we need to create a function for send messages and also we need to add our JSX right here this chat component is actually going to be a main component where everything is going to be and it is going to have a lot of code because of that in the final version there are a lot of important components into this so we are going to create separate components and then import them all into this one component but for now let's just try to create a input field that is going to send messages so that we can actually see that messages are being sent and then we can later style it easily or add more specific like checkboxes elements and stuff like that so right now we are going to simply create a outer layout we are going to have a div and inside of that we are going to have another div let me see okay so first Dave is going to have a class name of outer container and the second one is going to have a class name of container and inside of here we can actually create an input components we're just going to create an input with a self-closing tag and this input is going to be the main thing that does the messaging as in all messaging applications so it is going to have a value which is going to be equal to message and we also have an unchanged handlers and it is similar to the one before we have a function which has an event and inside of here we can actually set the message to be equal to event that target that value simple as that and with this unchanged handle we can also add a on key press event which is going to be for actually sending our messages so it is also has event and we are simply going to check if event that key is equal to enter so we want to send our message on the enter then we are going to run send message if you remember send message is actually our setter function for our message right here I think this is spelled incorrectly so it should be set message and in here it should be set messages and if the event up key is actually enter we are simply going to send message this is a function that doesn't exist yet but we specified here that we need to create it so this is a simple handler function and in here we are going to pass in that event and if the key press is not equal to enter so if it's any other key we are simply not going to do anything so we're going to type now so right now we need to create that event handler so we can check the data we can do that simply so our event handler since we are in a functional component is simply going to be a function so Const send message is going to be equal and it is going to take an event and in here we'll type if message then we are going to emit that message so socket that emit send message as you remember our emit listener is right here so it listens for send message event and then it sends it to the whole server or the room so right here we have the second parameter which is a message and that is here right here and our third is our callback we are calling call back right here and on the callback we are simply going to clean our message so we're going to set message equal to an empty string so when you send a message our input field clears another thing we are going to do is call event that prevent default basically if you worked with react you know that full browser refreshes are not good when you do a key press or a button click it is going to refresh the whole page and you do not want that to happen so we're simply going to prevent that default behavior of a key press or a button with that ready we can finally see some data so we are going to console that log our message messages and is there anything left to cancel that log let's see that for now and now we can finally see some changes in the browser so we can console.log this and on the server side just press command as to immediately run the server once again so if you have any changes inside of here we can type something like test and test and join right now you can see that we don't have much but we have this simple input field right here first our array of messages is empty but then we have one message which is equal to test welcome to the room test and it is sent by admin so our data is successfully coming in and if we tried typing something like test as you can see here our message is being generated right here and if we try sending it we have two messages so now our array of messages is actually filled and the second message is actually test sent by a user called test so our messaging is working correctly now we can get back to styling everything and make everything look like a chat box first thing we are going to do now is simply add styles so as I mentioned these are the styles for the chat that CSS I'm going to paste them in and you can find them in the link down below simply paste those in and let's actually start creating our chat box so inside of here we are not only going to have an input we are going to have a lot of other components first one is going to be the chat header so we are simply going to call that info bar so info bar and that is going to be a specific component we are going to create that component right now so info bar that Jas and we need to create a specific folder called info bar and we are going to put that file inside and create info bar that CSS although these files are nicely structured right now so we have specific folders for every file there is one important thing to mention take a look at this container property so for example it is now inside of the chat that CSS which we are importing inside of here well we are not at the moment so let's do that so import that slash chat that CSS okay so as I mentioned this is supposed to be inside of our chat and in here we do have a container but if you also have a container inside of this so exactly same name property it is going to be applied there also so although this fixes project structure problems it does not fix a naming convention conventions so there is something else that can fix that so we need to make sure that every every CSS property is named differently okay with that out of the way let's start creating our infobar components so it is going to be a normal react functional component so input react from react we are also going to import our info bar that CSS and it is going to be called info bar which is a single error function which we export default at the end okay simple as that and in here we are going to put some JSX so inside of here we are going to first have a div with a class name equal to info bar inside that we are going to have yet another div which is going to have a class name of left inner container and we are going to copy this and put this outside of here and it is going to be right inner container so right here inside of here we also have an image so image with a class name of online icon we are going to import this icon right now and it is going to have a source of on line icon it doesn't exist yet we need to import it and make sure this is capital I okay just like that we need to close our image component and we can add our h3 which is going to simply have room inside so we need to somehow get a name inside of here but it needs to be dynamic and inside of the right inner container this should be a lowercase R and inside of here we are going to have an anchor tag which is going to have a href to the route route so remember when I told you that a full refresh of a page is not good when you're dealing with react applications but since we are dealing with query strings right here so we are getting data from the query string and we actually need to clean this socket off we actually do a full page refresh right here I do not say that it is a best practice but it worked in this case so when a user clicks this it is going to leave the chat so right here we are going to have image and inside of here we are going to have a source of close icon so basically this is a link to a close icon that is going to simply close our chat box and all images needs to have an alt tag it's going to be it's going to be close image and this one also so out is going to be equal to online image okay just like that now this isn't going to work because we need to import our icons I'm going to leave links to those icons down below so you can actually download it for yourself once you down on this icons make sure to create a new folder inside a source directory called icons and then simply put your icons in there as you can see right here now we have our icons and we need to simply import them in our file so we're going to do that by typing import let's say close icon from that that slash dot dot slash icons slash close icon and we can do the same exact thing for our online icon easy as that now we have our icons and now we can see how can we get this room name dynamically in here so inside of the chat ojs we indeed have a property so we're simply going to pass it right here so room is equal to room and now we can use that child property inside of here so we can simply type room and that's it now we can simply add curly braces and room and our room name should be displaying dynamically with this out of the way we can simply add our styles to the info bar so in here we added some CSS properties but as I mentioned you can simply copy and paste all of the CSS file right here so in here we have some info bar this is basically a bar at the top of the chat chat box and in here we have some containers and stuff like that final thing we need to do to actually see that info bar component we just created is actually bring this on the top and we need to also import our components so we're going to type import info bar from that slash dot dot slash info bar and then one more time info bar okay we simply need to remove these curly brackets and add our normal parentheses since we are only returning this JSX and we also need to add file name extensions like PNG on both of our images after that it should work fine so now we finally get to look at something decent right now we have our chat box right here it actually looks like a chat box and we added right now just only this info bar right here so inside of here we get ad not dynamic room name and in hi inside of here if we actually click this it actually brings us back to our login page and if you type something like test and ruin one and if you sign in you can actually see that it changes dynamically the second part we need to do is actually display these messages right here and put our input right here at the bottom so let's try first putting our input right there so just underneath the info bar we are going to have messages component and an input component so since we have already created half of the input let's just copy that and start with the input component so input component is going to be a separate component we are actually going to import it the same way we did our info bar so in here we are going to type input and now we actually need to create that component so if we collapse this inside of the source and components we are going to create a new component called input input is going to be stored in a specific folder called input and we can also add our input that CSS file inside of there so our input is also going to be a normal reactor component so we can simply copy all of this to save some time paste it right here and remove this JSX right here inside of the info bar the CSS we are going to be imported our input that CSS and the name of the component is going to be our input we are also not going to have any icons right here so what do we need to pass into the input is the first question so now let's first start with writing our input so first we are going to have a form and that form is actually going to have a class name that is equal to form inside of it there is going to be one input and just below the input we are going to have a button okay we can first start with our input input is going to have a class name that is equal to input and just below that its type is going to be text placeholder is going to be equal to type a message and all the other stuff we actually had before because they are the most necessary for this input we can just paste them right here so we have value that is equal to message and unchanged Handler and on key press Handler so right now if you can see clearly we do not have a message property in this specific component so how are we going to actually call this message or set message or send message if these are all actually undefined so in here you can see that we are not specifying them in any way that means that we need to pass them as properties so inside of here we are simply going to pass everything that we need so we are going to say message is going to be equal to message we are also going to have our set message setter function set message is going to be equal to set message and we are also going to have send message which is going to be equal to send message now we can actually make use of all of these functions and this message right here we can simply distractor them into the props so curly braces message set message and send message simple as that now let's continue with our button it is going to have a class name that is equal to send button and it is going to have an onclicklistener so one click is going to be equal to as we learned before we have an event and in here we are simply going to send message so when user clicks that message we are going to send it so send message and we are going to pass in that event right here and the button is going to be called how other than send this is basically it now if we imported that component correctly and if we go back into our browser we should see our input right here as you can see it is not styled yet so let's just get back and paste in our files as anytime before you can do that into the input that CSS and all the CSS properties are going to be inside of the github repository for this project link down below once again okay now if we go back everything should be styled and it looks much nicer so right now if we didn't delete the cons of that log messages we should see them inside of the console I have encountered some weird errors showed by the server and I was trying to fix them but all it took was just I needed to save the file of the index address again so just press command as if you are dealing with any issue and with that out of the way if you now remove all of these warnings we are going to fix them later and refresh the page you can actually see that we do get our message and if you type in the input once again and press send you can see that the messages are indeed being sent and we simply need to display them so this is our next task we are going to create yet another component which is going to be placed right here it is going to be called messages let's create that messages component so inside of here we are going to import yet another component called messages which doesn't exist yet so component will call messages and we can simply output it right here so messages okay and now let's create a new folder called messages that is going to have you guessed it messages that Jas and messages that CSS once again it is going to be a normal arrow function so we can simply copy this our input because we already have some form right here and paste it we are not going to need this JSX but we indeed are going to need to change our names from input to messages simple as that we can remove all of this parameters and what are we actually going to render inside of the messages if you remember the beginning when we install the necessary dependencies we installed something called react roll to bottom and it actually Scrolls all the messages for us when the height of the messages gets higher than the height of the container so we are going to utilize that component right here so we can do that by typing import scroll to bottom from react scroll to bottom simple as that and this is going to be our wrapper component for our messages and now simply what we need to do inside of here we need to loop through all of the messages but we do not have access to messages right here so what we are simply going to do is go inside of the chat jjs so what we so what we are simply going to do is go inside of the chat is and we are going to utilize these messages right here by sending them as a property so messages is going to be equal to messages and right now we can loop through them so curly braces messages that map we are going to have a message and we are going to have an index and for each message we are going to generate a div that is going to have a key of index because every property in react needs to have a div and we are going to render something else inside of this div and our message is exactly what is going in there but it is going to be a separate component as you can see right here it is also a new component that we need to create inside of this message we'll provide it with some parameters so it is going to be equal to so but we are also going to provide this message component with some parameters so message is going to be equal to message and name is going to be equal to name both of these things are coming from our props so remember we just passed messages this should be that messages and not capital m and we also need to provide names we need to pass name so we can differentiate messages sent from the current user or all the other users in the room with that out of the way we need to create our message component we can do that just under the components as any other so we can type message and we can provide it with message that J yes as well as message that CSS simple as that we can also once again copy some of the previous code right here so we save some time and we can remove the JSX and also rename messages to simply message simple as that now we need to check what parameters have a passed we passed in a message and a name and we can get that right here so message and a name nice so what is this message actually going to look like we need to specify that in this file inside of the message we are first going to do some logic so we need to change these parentheses into curly braces we are going to create a variable called is sent by current user and we are going to set it to false now before we add an F check we actually need to trim our name if you remember on the back end we trimmed our name we need to also do it on the front end so we are going to create trimmed name constant and it is going to be equal to name that trim and then that to lower case simple as that now we can add our F check in which we can check whether user is equal to trimmed name if this is true we need to render a message that is blue and that is on the right side if that makes any sense it is sent by the current user so we are simply going to set this variable is sent by current user equal to true and then we are going to render something differently based on that variable right now so just below that we have a return statement so return we are going to use a ternary operator so if it is sent by current user question mark then we will render something inside of here but if it is not sent by a current user then we will render something inside of here so let's write that JSX right now so first we are going to have a container so we are going to have a tip that is going to have a class name equal to message container just below that we are going to add a paragraph which is actually going to be a name of the user that is going to be beside every message this is going to have a class name that is going to be equal to sent text and inside of here we are going to actually put our trimmed name which is basically our username okay just below that we are going to have a div that is going to have a class name that is going to be equal to message box just as that and inside of here is the actual paragraph with the message its class name is equal to message text okay and inside of here we can actually render our text if you remember when we looked at the data message was actually an object that had both user and text so inside of here we have user and text and the text is the thing that we are looking for so basically the text of the message is the text inside of the message right here a bit eh maybe a we're naming but if you remember that the message was actually an object that has user which is actually the sender of the message and the text which is actually the body of the message then everything should be alright and now for the messages that are not sent by the current user we can simply copy this but add some additional properties so if the message is sent by the current user we are going to add class justify end and if it's sent by not current user we are going to add class justify start also next to the send text we are going to add some padding right 10 right here and in here we are going to add background blue in here we are going to have background light simple as that and inside of the paragraph we are going to have color white but color of this text is going to be color dark or the messages that are not sent by the current user we need to move this paragraph down because the display of the name of the person who sent that message different and we also do not need to use trimmed name but we because we already have the username of the current user which is right here in the user so we are going to put that right there and we are going to add padding left of ten that should be hit as any other time go into the messages that CSS and paste the CSS that is available on github repository just as that that should be it for our message component let's check it out now if we go into the browser we can see one error that means that inside of the messages we haven't imported the message component so we're going to type import message from that dot slash message slash message we can finally see how it all looks like so right here we can type some name like JavaScript mastery and just down below we can type room test after we join you can see that we immediately get our joining message and we can type something like test and you can see that our message is actually sent right here just one more thing we already have the CSS inside of the single message but we haven't added our CSS for our messages so just feel free to add this here copy it or type it yourself and another thing you may have noticed that if you go to the browser you go in you get to write messages but if you restart and you don't even get a first welcome message from the admin that is happening because we never actually removed our user so we need to get back to our index page is on the back end and where do you think that we need to remove our user actually right here on the disconnect function so right here we are just going to type Const user is equal remove user and we are going to pass in user's ID who just disconnected and we can also be kind enough to let other users know that this use left so we can simply type if user and then inside of here we can send a message so to user that room so that specific room and we need to emit the message and if you remember we need to send the payload basically admin is also sending this message and the text of the message is template literal user that name has left that's basically it now if we go back into our browser and go to the new chat let's see right here try to type something like name JS mastery and room equal to test inside of here you get the message if you type test it's here if you refresh you also get a new welcome message because you were added and then removed and then added once again so that's great now we need to add some logic to actually see what users are inside of the room and we can also do that on the back end right here so with all the other omits right here we are also going to create one more final emit which is going to be equal to so we are going to send it to user that room and that emits name is going to be room data so inside of here we are simply going to pass in room which is going to be equal to user that room and users that are inside of the room will be a get true our helper function which is basically get users in room and as a parameter we need to pass the room name of the current user and that is under user that room also this curly brace should be right here and not right there this is basically it and just under the this send message when user leaves we can also modify this state so when the user actually leaves we can send a new message to room data which is going to be equal to we don't need user anymore in room which is equal to user that room so next to the user that room we can also just send users because we need to know the new state of the users in the room this is basically it and now we can go on to the front-end and actually configure the right side of the chatbox where all the users in the room data is going to be one more thing that I forgot to add was this class name inside of the messages directory so messages messages that is simply add a class name that is equal to messages simple as that and now if we go back you can see that our messages are nicely styled on top of the container right here and now we can actually test what would happen if another person joined so we can copy this URL go back here paste it but we just need to change the name since we cannot have two people with the same name so inside of here we are going to type something like John if we go inside of here you can see that it welcomes us but inside of the JavaScript master is text box we can see that we have John has joined now if we type a message like hello right here you can actually see that it is indeed being sent from John's account on this separate browser tab also I mentioned that there will be emojis so let's implement that right now so inside of the specific message so go inside of the message in here we are going to make use of the react emoji library so everything that we need to do is simply import react emoji from react emoji that is basically it and inside of here we have this text right here this text is going to include something that might be emoji so we are simply going to type react emoji that emoji file which is a built-in method and we are going to pass in this text as a prop this should work all right also let's fix this else we have right here so under the info bar right here if you go under the component so this is a simple warning that says that we do not need to specify that this is an image because browser already knows it if we go back right now you can see that everything is indeed okay we get some weird warnings here about using the component will receive props maybe some dependencies are using it but we are not in our code so now if you type test you can actually see that everything works all right and if you refresh this also you can see that our messages are indeed being sent right here everything works perfectly now here is the interesting part your job is to display the people who are actually online in one room right now so this is going to be your task for this video I'm just going to give you a hint so inside of the chat is you will need to create a separate component that is going to be called text container and inside of the text container you are going to pass users so users is going to be users now you have access to these users you're simply going to need to loop through them and display them nicely after you do that if you did it correctly very well for you nice job if you have some troubles with it simply check the github repository and feel free to copy the code that's basically it our full application is done and we have everything right here you can even leave the chat and join with some other name and show some people but the main problem is that you cannot send it to your friends so you can show off or something like that and you also cannot put it on your portfolio these are some of the problems because as you can see right here our whole application is currently on the localhost and the only thing that you can do with it is basically chat with yourself and you can join me to different chats and chat so this is okay if you just want to put your code on github and display it simply as code but if you want to show off your application on your portfolio or something like that we need to so the next part of this video is going to be out of about deployment both deployment of the server side and the client side of this application so stay tuned we are actually going to deploy this application on two different sides so first you need to deploy the back end to the Heroku and afterwards you need to deploy the front end or react to notify so feel free to log in into the Heroku I already am and feel free to log in into the net with I after you log in let's first start with Heroku so you can create a new app right here call it react chat application or something similar and after you created right here you have all the necessary instructions so first make sure to download the hero coo CLI you can do it simply by clicking one of these links right here just download it and install it and afterwards you need to use the command line to actually do it so right now let's get back and let's start deploying it so let's actually deployed there is only one small change we need to do before we start and if you remember correctly we actually installed something called course at the beginning of the video on the back end and it is cross-origin policy basically and if you do not add it to your index that is when you deployed some of your requests or sockets are going to be ignored or are not going to be accepted so you need to add it to your index that is we do it simply by typing Const course is equal to require of course and just below that you can actually type app that use and then pass in the course and simply call it so let's just see what course is so course right here no js' and if you check the course on NPM and type here of course we can actually see that it is cross-origin resource sharing and when you deploy the website some time's it restricts the resources that are being sent and now we can continue with the installation process so first we can actually close all of this actually remove this leave this and clear it and actually close all of this we only need terminal for this step okay so right now we are inside of the server directory we need to type Heroku login ok now you need to press any key to open up the login process in the browser you will be redirected and then you can simply log in right here after you're logged in you can get back right here and you can see that you are indeed logged in okay the second step is to actually go into your project and initialize a gated repository so we are going to copy it and type git init the second step is to add a Heroku as a git remote so we're going to do exactly that and let's see yeah this is correct and you need to add commit and push everything to Heroku master before we start with git add make sure to add that get ignore right here so we're going to type that git ignore and inside of there just type node modules we want to because you you want to ignore the node modules then type git add git commit first commit and then you simply type git push Heroku master this is going to push all the files on that gerak repository sometimes this isn't going to work so always when working with Heroku feel free to add proc file right here so it is simply a new file that lets Heroku know that you're working with no js' application so enter web node index degeus right here inside of that proc file and also inside of the package that jason remove this node Mon and simply type node once you did that simply let's go ahead and get ad get commit we can call it second commit and run git push and run git push Heroku Master this should now correctly push our files and we should be able to open them in the browser and now if you go under the overview right here you can see that our build is deployed you can go under settings and right here is going to be the URL of your live server that is online as you can see here server is up and running that is the message that we specified to let the server or the browser know that the server is running the only thing we need to do now is to actually deploy the front-end so first we are going to copy this URL and get back to our client side now we can lower this down close these files and go into the client source components chat and actually change this endpoint we are not calling localhost 5000 anymore we are actually calling this online deployed application server so right now when that is ready go go into the clients repository so Alice and make sure you CD into the client repository and now we can actually close this down and see how can we deployed everything with Netta file so when you login into the net Rifai you will see all of your sites right here and you will see want to deploy a new site without connecting to get drag and drop your site folder right here so basically all you need to do is go into the client press reveal in finder or the same thing for Mac and simply pull and push that client folder all the way into the net defy it is automatically going to upload it and you will be able to see it online it is uploading right now so regarding the Natalie file basically everything you need to do is install net leaf I CLI globally you can do it typing this command into the command line and then you'll be able to basically deploy it like with it with Heroku afterwards you need to run Netley file login so let's get back and run exactly that so next if I log in is actually going to forward us to the browser if I'm not sure yeah I'm already logged in on this machine and now we can run all the commands so basically everything we need to do is run next leaf I deploy and this is going to ask us a few questions about our deployment so what would you like to do I would like to create in configure a new site on my team right here and we do not need a site name so this is the most important thing it is asking us for a published directory right here we want to do it from a build so we'd create react app you can create a build so we need to get out of this console right now by typing ctrl C we can clear this out and now we can actually run a command that create react app left there for us so if you go into the package the JSON you will see under strips NPM run build so we need to actually call NPM run build and now when the build is created we can actually tell notify that we want to use this build as our site that is going to be deployed okay so now building of the site is done and the new folder called build is generated right here for us we can actually clear the console and run netl if I deploy basically the same thing with it again but we actually have the build folder right now we are going to put publish directory equal to that slash build okay and it is going to run it from that and it is going to deploy it automatically as you can see right here it gave us a draft URL if you command click on it it will actually open it in the browser now we can type something like JavaScript mastery to the room learn and if you press sign in you can actually see that everything works and is actually deployed to the browser so you can actually send this link to someone and you can chat with them online so if you see right here we type something like test we can also open our new chat app with a new person so if new person goes there and her name is Jane learn react is the room name and in here Jane is welcomed she says hello and now javaScript mastery received that message and everything is working as planned you can now get back and simply run this command to put it to production that's it again type publish directory that's flash build and that is it we came to an end of this video we have a fully working chat application built with react node and socket at i/o and it is actually deployed so feel free to put it anywhere you like or feel free to share this URL and chat with your friends if this video was helpful feel free to subscribe and leave a comment saying what would you want to see in the next video thank you so much for watching see you in the next one [Laughter] [Music] [Music]

Channel: JavaScript Mastery

Views: 717,376

Keywords: socket.io tutorial, socket.io react, socket.io node.js tutorial, socket.io node.js, socket.io tutorial nodejs, socket.io tutorial for beginners, socket.io chat app, socket.io chat application, socket.io real time chat, socket.io chat room, socket.io chat tutorial, socket.io chat app using websockets, react chat application, chat application in react js, chat application node js, real time chat application using node.js, real time chat application tutorial

Id: ZwFA3YMfkoc

Length: 116min 45sec (7005 seconds)

Published: Mon Sep 30 2019