MERN stack with Socket io chat app for beginners

welcome to this amazing real-time chat application with money stack and socket IO this application is using all the majority of concepts of socket and socket IO using man stack with the node react mongodb to make these things possible from the server from the front end and we are using the material UI let's now see what kind of real time chat application we are having so with this demo you will be able to see that yes we can share the image we can have a chat we have a room system but what exactly it's looking for so let's just do the log out from both side and now we can start from scratch so if I do the log out and then you can see we don't have any new room button but the new room can only be possible when you click on login but we have not created a real authentication it's just a dummy login system which is having a cookie in the session to make or simulate the user anyways once you have the new room button you can click on that and it will create a test room so these information will be stored on the mongodb this means if I go on the home if I reload this page you can see the test is there the room name is there so I can go on the room I can click on delete room and you can see the room is really deleted from both places so it's here actually we have to remove it with the ID not with the name so I have removed with the name so that's why I removed anyways let's go on the test and see here we are and go here also and let's say hey check out my new reel if you said hit send you can see it is on the right side because I have sent it on the right user you can see it's moving to the left side because this one is received okay so this user is saying wow show me the real image and you can see while I'm typing there is a typing event is happening and when I stop typing you can see that is gone so just send this message here show me the image like this and yeah we are getting this and this is the time we can click on this icon which is to select a image click here it's opening this browser window for selecting the image just select any image and boom that image is here sent here received so this is a real nice chat little application we have created with the socket i o and implementing the image sending or sharing information also so isn't it really amazing to try and see how all these things are working let's see in the video but before that before starting this course make sure you go to bitfumes YouTube channel and then just hit on the Subscribe button and check out other videos I have created it just like month stack course which is really amazing the next angular mongodb node.js a lot of amazing courses are here so make sure to subscribe and like this video If you really getting something amazing from my courses so before checking or before starting the course let's see the real course is structure what we have first thing first what is Socket IO so basically the socket dial is a bi-directional low latency communication for every kind of platform it uses the websocket but along with the websocket it has also implemented various other apis to make your life easy let's see what exactly we are going to learn in this course so we will going to start with setting up node.js then we will create our first socket connection and see how we can implement the socket then we move from a normal HTML to the react.js and see how we can interact how we can Implement react with the socket IO then we will try to send and receive a message from react and from the server Express then we will create the real chat working we will create a chatting system working and after that once we have all the chat we will Design the chat Sending message chat box then we will Design the message box using the material design for both of these things then we will going to have a typing event that means whenever user is typing there is all the people on the room will see that someone is typing so like that and then we will use the react router for having the different pages in our react application so that we can create different page for different rooms and that's how we will move to the join room system so we will see how we can join or create a room for a different user then we will make sure the chat will work for room and not for globally that means the message sent inside of the room will be available to the people who are in the room not for other room or not for globally then finally we will see how we can clean our socket code and what are the best practices and how we can move the big code to different different dedicated file and make it super small after this we will going to learn about the dynamic room that means user can create a new room that will be a dynamic room after that we will move with the room information into the mongodb the database using the Mongoose will create the more rooms models and do lot of amazing crud kind of thing then we will Implement a dummy user and after that we will Implement remove room everything is really good but the real power of this application is file sharing just like you saw that we can share any file it's really easy and really important so once again this course is not 100 correct but it's really 100 percent useful to enhance your socket IO knowledge I say all the best to you and hit like if you have if you see that this course is helpful and comment your views about this video or any suggestion for the future videos let's start this course let's get started with socket dot IO and here is the website which is the same name socket dot IO now how do we get started let's click on get started and here we have a very simple real-time chat application we will going to build it but in a better way so first we need to get started with node or Express so let's go to our vs code and first I will go and create a new directory called server inside this I'm going to first CD into server and then say npm init with a Y flag so that I should have a package.json here inside it now since we are going to install something which is going to create node modules just before that I want to have a DOT get ignore folder and also one git ignore folder outside of this so that we can create the git repository outside also so there is to get ignore one the outside one I will have the ignore for Server slash node modules and the inside git ignore is just the node module okay what next we are on the server directory and I need to install Express okay so this is going to install Express while this is installing let's create our index.js file you can name it server.js as you want but index.js is good now here we need to get started with Express now if you don't know about the mer stack or if you don't know about node I have created very nice you can say videos on this which is on the bitfumes website if you go you will see here we have a month stack course and you will find the node node full course like here so these two are going to be helpful for you and if you want you can also check for express.js documentation so let's go here and getting started part start with this same thing which we have already done so how do we create the server it's very easy first we need to import Express then create an app and then listen to a port let's do this so instead of using the require module I'm going to use the import Express from Express now since we are using this Express now we can say const app is equal to express and calling it and finally we can say app dot get that means when we go on the base URL then what we have to do we just need to get it and then we get request and response response dot Json and returning as data is hello world from socket although we have not created socket now let's create the server app Dot listen listen to a port so I'm going to create another constant for the port which is going to be let's say 4 000 for now you can name it or you can give port number anything you want and once everything is done then let's just do the console.log and say server is running at http localhost colon 4000. let's start the server but how do we start this service let's run this with index.js with node so we have node already installed if you don't have you need to just check do you have the node or not if you don't have then you just need to go to node.js.dev and it's highly recommended to install the LTS version long term support version and once you have it you can see something like this I don't have the LTS but it's okay for learning purpose now let's start this index.js with node and this time it's giving error it says that hey if you are using ES module like import system then you need to make sure you have type as module in your package.json that means let's go to the package.json and here I say not here actually at the above type is module and once this is done we are ready to use this as like this see this is running so if I can open and yep we get this hello world from socket okay so that's done that's the part of the express JS but how do we create some real-time system with the socket IO now how do we get started with the socket IO with Express so we have already created the express server now we need to create another server for HTTP server which is node module and then we need to create the instance of socket server seems like a little confusing let me solve this for you so we can go here and the very first thing we need to do is we have to import HTTP from HTTP now what is this HTTP this is the HTTP module from node.js so you don't have to install it it's right available in your node.js now what next we have to do we have to create the server for this HTTP so we say const HTTP server I'm calling it HTTP server they are calling it just server so that I can distinguish between the HTTP server and the socket server so let's call it HTTP server so HTTP dot create server and the important thing is on This Server we have to pass the listener so we have this app for from this express.js so we are going to pass the app here now this app will be used for creating the server and doing all of the API thing like we are using here and now we can use this HTTP server instead of this uh Express app so hdb server Dot listen to the same port everything is fine let's now run it and go to the localhost and see everything is fine but what is the benefit of creating this HTTP server we can link this server with the socket server so what next next we need to import server from socket.io and after this we can say const I O is equal to new instance of the socket server and passing the HTTP Server Like This and this is all you have to do to start the socket server now since we have this instance of the socket server we can go here and say IO dot on that means socket IO dot on connection when there is a new connection you get the socket and you can do anything you want so for now I will say connection is ready okay so this is we did so whenever we create new connection this will be logged into our console that's easy so this is what we did we started from Express then we created the new instance of the express called app then we import the HTTP we created a server from this HTTP and then with this server we have used the express instance using this server yes we are starting our server and also we are creating the socket IO instance of this socket IO server and finally on this on the connection of any socket then we just log it okay so this is done for the back end what about the front end the HTML part where user will interact so socket Works in two way so there is a back end there is a front end so there both of them has to be connected and there is a tunnel created between the backend and the front end once there is a connection between the backend and the front end then this tunnel will be used to send the messages from back back into front-end or from foreign 10 to backend let's see how we can do that so they said that you need to actually serve a HTML file inside this HTML file you can use this code which is going to start the connection so let's copy this thing and instead of this Json we are returning let's return this index file and now we need to create the syntax file so let's go on server create this index file and let's call it inside the H1 hello socket okay now let's read start the server and then it says that their name is not defined why is that we all know that in node.js their name is obviously available but you know since we are using the import the type module system this dur name is not available so we have to create it how do we create we first say hey there is a door name constant but it will be Come From the Path so let's first import this path so import path from path so that's actually from so import path from from path and this path is exactly similar to the HTTP which is a node.js module now I say path dot der name get that directory name from the file name now you will say hey where is the file name so we need to create another constant called file name this file name will come from another thing which is we need to import from URL and this is called file URL to path so what this is doing this is going to take the absolute path of this index.js so that will become the file name from this file name this will the path dot their name Will going to get me the directory name but here we also need to say import dot meta dot URL this is done and now once we restart the server reload hello socket is there now you know hello socket is there but on our server we are not getting any log for the connection why because we have not used the socket script so first we need to use or load this script and then create the new instance of IO copy this one go here on the index.html and after this H1 paste it once you've done with this go on the HTTP server which is localhost 4000 hello socket is there reload seems like nothing happened but this is a good example that if there is no error that means something is working let's go and you can see connection is ready wow so we have finally created our first ever socket connection let's get started with the front end that means the client side with the react and the material design so that we can create our chat application so first we have to create the new react application so we can use the npx create react app and then we get we will get started with react so let's go here and create a new directory called client or maybe what we can do we can go here and we can simply say npx create new create react app and call it client and it will create a new directory with the client and have our react inside it well this is installing let's go here and go to the material UI and see how we can get started with this you just need to add this thing on your react application so this is the material design for react only so mui.com material UI for react now we are here let's wait for this to complete so now it's done and we can just CD into the client and say npm Run start so this one is for the front end and the server is ready with localhost 3000 but from where we are getting this thing we need to go inside the client we have this source and then we have this first getting started with index which is doing a lot of amazing thing I just want to remove this restrict mode I don't want it and then go to the app.js and I can clean each and everything from here like this and then say div hello socket so that I don't have to do anything and I can remove the CSS file app.css file remove beginner content and everything is good and we are get with this thing only now let's install the material UI and that's going to be the easy thing so let's kill this server and install now you know we are having this client directory and inside that we have a node module so we have to add that into the git ignore of our root where we have both of the server and the client so let's just add this and call it client slash node module is there anything we want to add seems like nothing so that seems okay and let's say once again say npm Run start and how do we how do we check that we have the uh like material design for that we can start with a button but before that we need to add the font which is Roboto font and that we can add inside the public index.html here we have and also the icon the material icon and that's it is there any changes I don't know but we can get started with the button so let's go to the component side and we have this button or we can have that button but we need to add it like this and import it like here see this material UI okay so let's copy this one and go to our app.js now we have this and just below it oops just at the top use it like this and then we can use the button called text and finally we should have a text very nice we have this so now we have the client and since we are using the socket i o we need to go on the documentation section where we have the client documentation and here we have the client installation so let's just scroll down and copy this npm for the installation of socket client it's very important once you are done with this just once again get started with the react application and remember what we did on our back end is we had created an index dot HTML and then we had the initialization of i o from the socket client same thing we have to do here but we will use the use effect and then we can just import it and then we say const socket so socket is equal to IO but from where we can get the i o import IO from socket client let's see is this is this going to work or not so that's good and let's clear the server so that we should have uh our connection ready if everything is fine reload seems like nothing is happening because we need to go on the initialization how do we initialize our client so it says that once you have it you have to get it like this not the default one so I'm going to say import like here and once again go on the react reload this page and it should give me the back end but it's not giving so why is happening maybe I can do something like this not on the use effect so if I reload this page nope so something is not good let's see what happened so the thing is remember when we had done on the server end on the server end we had the i o if we are not saying anything then it will initialize on the same URL where you are so what we are doing here we are initializing it on localhost 3000 but where is our server server is on localhost 4000 so we need to specify here the http slash localhost localhost colon 4000 so I'm saying that hey initialize this i o width look closed 4000. okay so isn't it good and now it says hey you cannot do this because of the course error you may think that okay since we have the course error we can simply install the course package on our server end that will be fine but you are wrong this time because we have to go on the socket connection because this is not normal HTTP connection it's going to be a web socket connection so that's why we need to go on here on the socket documentation go on the search and search for the course when you go here and then you can see we have a lot of amazing thing and this is happening the options we have to provide is when you create the socket server new instance like here so where we are doing we are doing this and here so just give comma and then we say hey I need to have the course and then we say hey I need the origin origin is going to be inside of the array or you can also provide a simple string but let's have this so HTTP colon colon slash localhost 3000 because this is our front end now what happening when we go and try it it's still not happening because you know we have to restart our server so node index.js and now if I reload no error that means everything seems fine and yes you can see we are having connection is ready boom this is how we get started with react and socket i o but remember every time restarting the server is not a good thing so I'm going to install node mon here so that we can go on the server end on the package.json and create a new script called start and here I say node mon index dot JS so whenever we do any changes it will restart my server and that's going to be super easy now we have setup for the front end we have set up for the back end everything seems fine and we can move it to the use effect and maybe we can create a const of maybe we can say use State this time which will going to have a socket and initially it's null okay and then we say set socket and we can have everything like this okay so this seems like a normal thing and we did it wrong it should be here not on the bracket uh like this okay so this is good and go clean and reload react and we just get only once cool everything seems amazing great and let's move forward with our socket man stack so what next we need to have a simple text box with a submit button which should submit whatever I'm typing and that should be available on the different windows so suppose I have another window so without doing any refresh we should have the message on the different window let's first have a simple you can say text field so we have this text field we can have this one and standard one so I can just copy this text field like this and import has to be from here and it has to be like a box with a component of form let's have it so go on the index and like app.js and here we should have that so input our text field and we have to import like this and that's good but as I told you it has to be on the box and let's have this box and the component first we have to import it so box and now component is a form and we should have on submit now so on submit is handle form okay so let's create a simple function called handle form that's going to take the event and first e dot prevent default that's the very important thing okay so we should make this button as uh type of submit button and now we say submit or send actually okay so how this is looking good so remove the hello socket from here and you can see we have this nice little standard and we can make it small if I can make it size is equal to small so size is equal to small and nothing happened anyways we should start with this thing so first we need to have the value for this so value should be like uh what we can do we can create another state and we call this maybe I can use a use State snippet and we say that what is the message so message is this which is empty before doing anything and we connect this with message now on change what we have to do we just need to get our event and then we say set message and E dot Target dot value should be there that's super easy and now when we submit the form we should log our message simple okay let's see yes yes doing click on send yeah that's good but we need to clear this also so we should say hey set message as empty okay so we log it and then we say remove everything you have so yeah it's there but now it's clear and let's have a label is write your message that's good I don't need any ID variation is the standard that's good finally it's nice but what we have to do we have to send request from here to the back end to our server and then handle it via socket and see how we can do that for that we can go on the socket documentation and first we need to see how we can move from initialization to socket instance and how it's going to work so from the server we emit an event from the client we listen for an event socket dot on similarly from the client side we emit any event and from the server side we listen for event that's super duper easy thing so how do we do that on the what happening so that's not good yeah so here you can see on the server side we can listen for connection and after that we can listen for connect on the client side and disconnect that's good but we can inside of this connection we can do lot more thing you can see different different kinds of events we can emit Okay so how do we get started with this whatever we are doing let's see first we know that when we hit send on this form it should trigger uh it should handle by this handle form function and we also have this socket so can we do like this socket dot emit okay and now I need to emit an event and we call it send message okay okay so that's good we are sending an event from from our client from our react okay now we have this log on the back end so go on the back end and open this index.js here we see that once you have any connection just do the log but I'm going to comment this and now instead of instead of this I will say that listen for a send message event that's good so I say I O not IO I say socket because we are getting this socket here Dot on when on means when there is a send message event then you have to do something so just log and say message received okay received nice so you can see there is no log here even though if I am reloading I am not getting any log but when I say this is a message whatever I am typing click on send it's get cleared but you can see we are getting message received whoa that's really great but where's the message and that's important thing we have to send the message so here on the second argument we can send the real data we want to send which is our message so I say message is here I'm sending it as a object so now here on this on part of socket IO when we are listening for the event here on the Callback we get the data so after this we can just log our data so message received and whatever the data we have so let's see this is message click on send and now you can see message received and there is a object where we have the message and what is the message this is message wow lot of message now we are getting this data that means we can listen on the server end so front end to backend is done now what we have to do we have to quickly do the reverse we have to move the data from backend to front end once again so just like we did on the front end just like here we are sending a message via emitting an event so this is event we are emitting similar to this we have to do we have to go on this once we receive this send message event or this we can change it we can say uh message send or send message that's okay actually so now let's see uh socket dot this time I'm I'm emitting again a message so I'm saying that uh once again it should be from server message from server this is the event I'm sending and what data I'm sending the data whatever I am receiving so whatever I'm receiving from the client I'm sending back that same thing to the client from the server okay so we are sending it let's see by submitting the form and is there any error no error no log because we have removed every log but now this time we have to listen on the react side on the client side for this event okay so where we can do that we can do that on the use effect so we say that socket Dot on once we have it what is the event this is the event and what we have to do after it we have to say log message received okay like this okay so let's start this once again so here we have some error it says cannot read the property of null so it says that initially this is null so what you are trying to listen so what you can do you can say that hey whenever there's a change in socket State then do this and even after that we can say hey once we have the socket then start listening for this okay so we can do it in a different way I say that when there is nothing on the socket then just return and do nothing this is more clearer in my sense so something like this okay so let's once again go on the react reload this no error that means we can send it and yeah we can see we have received the message so me as we are sending from the client to server server to client finally just like we did on the back end we get the data here we say that hey just log the data same everything is same so this time I say this is message hit send and boom message received what what is the message message is the message whether this is message lot of message once again so this is how we get it and I told you that we need to listen on the different window also so here I am and now let's see here I say message or this time I say Hi how are you I hit send it is received here that's good but if I go on the different this is not received here that's an weird thing let's try once again click on send that's good that's not good why we are not receiving it here So currently we have the problem of not having the message on the other side of the application if I send we are receiving the message on the same window but not on the other window what is the purpose of using the socket IO but before that I just want to implement one very nice feature which is disconnect so just like we are doing the connect part if I open the index.js on the server end we have the connection but we can also do one for the disconnect so I can say this connect and I can just log and I say user left okay so user left means it's disconnected now we are using the node one so it's already restarted so let's reload so nothing happened once again reload nothing happened again reload okay so nothing is happening so why is that because user can only disconnect once we have the connection so this means we need to move this inside of this connection and call it socket dot on disconnect so let's do this once again and user left because once it is disconnecting and then connecting so you can see both are first disconnecting that means left and then reconnect okay so this is how you can do the disconnection and this is pretty simple but the question comes is still why we don't have the message on the different windows for this thing let's go into the documentation and go on our client side so let's close these things and we have the client side but even after that we have an image emitting the events then we have listening the events we are yes emitting the event by using the socket dot emit this one like this and we also have listening for the event by using the socket dot on but next we have the broadcasting broadcasting means makes it easy to send event to all connected client all connected client but we have one important thing when I'm sending message I don't want to see that message to myself this means it says that once you emit the event by the server it's received by all client but we want to have the message except the sender so I'm sending I don't want to see my message but all other people who are connected to me or connected to the socket can have that message so in that case instead of just saying socket.mit we need to add this broadcast and then do the emit part isn't it really interesting let's now implement it for that let's go here and when we do the image part just before that we say broadcast dot emit now see the magic here once we are here I say hi how uh you hit send you can see there is no message on the log when where we are sending the message but when we go on the opposite side you can see yes we are getting this message amazing this is really great so what we have to do we just need to collect whatever I'm sending from one window to other window and show it on our UI that's easy so let's go on our app.js and here what we have to do we have to create the chat so I can say here is a chat okay which is an array of messages okay so array of empty strings like that now when we do the set chat once we receive the message from the server then we say set chat and then we can spread out whatever we have but at the first or maybe at the last actually we need to say data Dot message this we have to do let's see how this is working so if I once again reload reload I say first message sent we cannot see here but if we go on the component for the react Dev tool make sure you have it if you don't have you can easily install it by Googling like react Dev tool Chrome something like that and now if I go here we can see we have the first message inside the array boom we have it so first thing also we can do we can remove the empty string so it's a empty array initially and then we are pushing it next what we have to do just above this we can create a simple container container and put everything inside this container let's import the container container and inside this container I'm going to have typo graphy this is all coming from our react material UI if you don't know you can go on this material UI and you can see somewhere we can find the typography if not here maybe on the card you can find it yep we have the card if you open it yes you can see we have the typography and you can put anything you want inside it to look really great so we have the typography and make sure to import it to do like this and then we can Loop over the chats we have so we can say we have the chat dot map and then we get the message each chat has some message and then we can show this component which will have the message here printing like this and now we can also use a box like this so that I can do some FX which is actually doing some CSS here so I say margin bottom is equal to let's say five okay now let's go and start you can see nothing is there but we are having it so I say Hi how are you boom so now we don't have the key here so maybe I can provide the key as message don't worry about this this is just a react thing but you can see we have the message both places so what I can do I can just move these two side by side and I can just re refresh here and this is we're going to refresh here I say Hi how are are you hit send so from here message coming on this side and I say I am fine yes you can see this chat is really working so are you watching bitfumes video so that comes here but you can see it's replaced not added that's we can do yes I am once again it's not rendering exactly how we want it's not adding to the previous one it's always doing this so what we can do we can just say like hey once we have the previous chat so just use that one and spread it and then do the thing so once again start with hi comes here hey so how are you oh it's working uh I'm fine so watching bitfumes video boom see the real time chat we have implemented it so easily with very minimal setup what we have to do next let's make it really amazing and bigger before moving forward let's design our chat window and then we can see how we can do that and first thing is I don't want the send button and I want to change this look of this text box so if you go on this and on the text field if you scroll down little bit you will find this kind of text box which is having an icon right here on the right side actually so like this one okay so what I can do here I can just grab the code for it so first we have this form inside that we should have a password field which is this one so outlined input so this is I think the outline input okay and we can simply copy this and see how this is working so what are the things we need so if we go on the app.js it is having everything here right now but we can change it later but for now I can have this and it need the outlined input this will come from as usual material UI so outlined input like this what next it says that you need the type so it's always going to be the text so I don't need and then it says value value is the message we know and what happened when we do the change so it's going to the on change then we have some input adornment so input adornment once again coming exactly no it's coming from the same thing yeah so input adornment will come so we can just go and copy this and do it like this what next it need icon button I believe it is similar so I can button and now comes the real part I don't want the icon to be like eyes button I want it to be a different kind of Icon button so this should be gone and we need a new button which should be how is that okay so first I can remove all these things maybe I can have it and remove this and then here we need a send icon so from where we can get the icon so we search for Icon we got this material icons here just search for send and yeah we get it so we need to have this button or this icon actually so get it and zoom out and go at the top include this and I can go at the bottom and have this like it now since we have this send icon and everything is good no error let's see how this is going to look hey it says that mui icon material dot slash send is not available why because it says that if you want to use any icon what you have to do you have to first install the material UI icon material package and how do we install it and yeah it's given here so if you don't have material UI in your project you can have it the material icon mui icon material icon material yeah so this one we don't have so we need to say on the client side so we are here on the client you can see npm install icons material like this and once we are having it we can restart our server and we can run the server actually which is going to start the react if everything is fine and we are good to go so let's reload and boom you can see we can type something we can have this send icon everything is good what next we can go at the bottom we can remove this button we don't need that button and we say that hey this icon button is actually having a type of submit okay and I can remove these two things like here okay next I can remove the text field which we already have like this and I don't want any ID here and it seems like everything is fine yep and yeah I need the placeholder also or maybe the label we call it so yes this is a label and have it and size is small and very soon it should be there but oh we can remove the label for the password and that's good why it's not showing the proper placeholder maybe we need to use instead of it hmm okay so what we can do we can see on our outline input we should have the variant also okay so do we need the variant it's not having that anyways uh can we do the placeholder oops like this so we can do something like this okay so that's good one more try yeah write your message so message should come here and we can say hey on the left right side we should have it and we have a lot of hay so why is that let's see 1A will have it say hi yep everything is working normally but next we need to have this text field we have looks better and whatever Happening Here we should take care of that so first we need to have a card and that will going to hold the messages so we also have the card so card should be like this and this card can have a card card content and typography this simple thing so this is the time we need to move this thing to a dedicated component okay and for that go to the client side create a components directory inside the source directory and here we can say create a new file called chat window dot JF or maybe jsx if you want to have but here is the chat window and now what I'm going to do I'm going to move each and everything from here like this to this place and obviously we need all the things which required like this okay now everything is there next we need the chat State and actually we need all the states so all the states should come here next we need this use effect and disuse effect and handle form everything should be on its dedicated component now we left with very simple thing and now we say chat window like this okay now save this file and it says some error jsx must have one parent and it's having two parents so we can do a fragment like this okay everything is fine now now next we need to import the user state use effect and finally what about the i o why is saying that I O is not defined because I think we have not imported IO from our socket client now everything is fine try it once again having this window out so yes so everything is working fine now next task is to design the actual message content on message box time for the designing of the messages we will use the card and for the card it's very easy use the card as the design thing so now we have this as the message what we can do we can first change from the box to maybe what we can do we can have a card like this and this is holding our con component and import this card so if we go inside the window we can see we have the card but we should have some padding so let's have the SX and we say padding is two now if we do something like this it looks better now what we want we want all these to be at the center if I zoom out it should be it is Center because of the container we are using on the right and the left but I want it has to be at the center and also have some margin at the top so we can simply say comma margin top is going to be let's say 10. so yeah that's good what next next we should also have one very important thing is another maybe box we can use and that box will going to make it at the center with the width something so we can make it like hey I need the width and width is going to be 60 percent and it should be on as a string and yeah you see this is here as a 60 but I want this to be at the center for that I need another box okay and why I am having this box because in this box I can provide some styling and I say display is a flex okay and I say that justify content as content justify as space actually Center like this okay so yeah it is really at the center finally what we have to do we can make this with the background any background color so back ground color of let's say gray how about gray color looks good but since we have the gray color on the background everything else has to be white colored the text has to be white color so text color uh color or simply color is going to be white okay nice so if we type no that should be on the text field which we have here so we can provide some styling on this one too color is white and background color for this text box is also white and not the text color nice so we have this and what next next we want to have the messages at the top or and this text field has to be filled off filled as the full width so this is going to be easy when we have this input field we just say width as inherit that means whatever the content we have in inherit if it's not working we can move it with 100 percent yeah we have it okay that's good and now above this we need the messages so we have to have some messages like this so let's send some more messages so it's just because of the re-rendering of the react don't worry about that so now we have a lot of messages and we need to have this messages and some of the messages which I am sending that also has to be here on the different side but the messages which I am receiving on the right side or left side something like that so for that designing we need to change how we are storing the messages inside our state right now it's all the text what we are sending and what we are receiving so how we can do that it's inside this area actually so what we need to do when we store the message instead of directly saying this message as here we can say hey yes this is the message but who has sent this so there has to be two option one is either the either I have send it or I have received it so I simply say received as true or false something like that so if I'm receiving any message from the back end then it is considered as the true but I can also add it like this I say that if I am sending a message then make it receive make it false and this message is going to be the message which if whatever I am sending see the magic so I say hey oops something is not good so if I just see okay so it says that hey yeah so here we are looping through the chats now we have the uh data okay so then we say data Dot message and then we say data Dot message something like this okay one more try yeah it's there I'm sending this message and same message is received by the other person so if I say hi I have that message and other people is having also message this person the right side person is getting this message like if I do this this is message from the socket but this message is I am pushing it on the state so whatever if I'm receiving that has to be on the left side if I'm sending that has to be on the right side so according to this data dot received true or false we can move the content inside of this input field how we can do that there are many ways to do this and first thing is we cannot do this on this outline input if we try it like text align as right if we try it it's not going to work you can see it is still here so what we have to do actually we can do it in a different way we can simply say here input whatever the input inside this component we have is going to be there on the right side so if I now see this you can see we are having this at the right but this is for the text field we don't want this for the text field and you know there is one more thing we can do we can instead of using width as 100 we can also use the prop of full width that will going to be have the same effect on the input field but we want this to be on the typography for the left and the right so we can say f x give me text align at the right side let's see if this is working or not so if I say something and yeah it's on the right side but when it's on the right side it is only going to be on the right side if data dot received is true that means if I'm receiving then it's going to be the left side otherwise it's on the right side so if data dot received is I can say if it is true then make it left otherwise make it right okay let's now see reload reload and do it like this I say hey bro yeah so since I am sending this it's on the right side Since I'm receiving here it's on the left side I say uh how are you man so yeah so here I'm sending that message so it's on the right side and here I am receiving it's on the left side I'm good what's the plan so we are having very nice chat wow this is how we create a chat application with the designing I am interested in very nice cool feature we have on the WhatsApp is typing so I want to see if someone is typing and if that person is stepping then we we should show that typing kind of thing let's do that to have the tapping event we need to do the same thing as user is typing we need to send some event to the server server will listen for that and again emit an event from the server and broadcast it to the other user let's see how we can implement this thing so first is when we are writing or typing something we have this function which is doing so let's do this with a handle input thing and let's create this function handle input and input like this we get the event and now we are doing a normal set message which is normal thing but here we need to do very important thing which is Socket dot we need to Emit and say typing now this is really amazing because now once we are emitting this event we can go on the server and listen for the same so let's open the index.js on the server just like we are listening for the send message we can also listen for the typing and once we are typing we need to see if we are getting something or not so just say log and logging something and it's already restarted let's go and just say and you can see whatever we are typing we are getting back because but it's not actually we whatever we are typing so if I say sarthak you can see it's logging what I have the text here okay so since it's working what we have to do remember we just need to broadcast and say typing without any data because we don't want to send any data over this typing event so we have emitted an event from front end that typing that event is listened by server server said okay broadcast it to other users and say typing so since we have it we can listen for the event on our chat window and where we can listen once again when we have the socket ready so we are listening for the message from server and we can also say uh typing from server just to make sure we don't con we don't have the confusion between the typing from front end and typing from the back end so here I'm changing the event name which we are sending from the backend so once again let's start with this whenever user type something we emit an event from the front end from the react and same typing event will be listened by back end if everything is fine backend will listen for this typing event and again emit another event called typing from server and we need to listen that typing from server event here on our application so once we have it since we are not passing any data we can just log and say typing dot dot okay let's try this so open the console reload reload and see if I type something it's not going to be here because we know it's broadcasted to others not for me or not for the user this means if I can just open this window reload and I say hey you can see as I'm typing you can see here it's written as the typing on the console okay from the console we can go to our like displaying the message so another state called typing say set set typing this is initially false okay so once the user is typing we say set typing is equal to true and if set typing is true we can show the typing just below or above this input field so we have this material UI and we can go on the material UI input once again so that we can see can we show some message just below the text field and yes we can do that by using something like this or there are many ways to do this uh you can see we had above for the broadcast uh bootstrap actually so how they are using it so here's a component they are using it as a input level and both of these is inside the form control okay so let's have this input and we have the box we can say here this is the input we need to import it imported from material and we call it typing oh typing and html4 message input this is the ID we have to create ID we have like this nice and try it yes you can see it says typing but we need to make sure it's having a color of white do we have the white color no it doesn't have so we can use the SX to have the styling color is White okay so getting back typing with three Dot dot dot yes we have it now when we can show it when once the typing is true then we say that hey give me the input field input label actually like this so let's once again try we have it and we say hey nice but next important thing is user has stopped typing or maybe just focus out then we need to remove this tapping so we need to have a another event so there has to be two event start typing stop typing all right let's do that so we can first say hey when we have started writing something then we need to send an event called start typing started or start typing what's the good name so it's typing is started or typing stopped the next one so this is the event we have to listen so go to the server change it to typing started and typing started from server okay we can have the proper name because to make sure we don't have any confusion I'm using long uh descriptive name but in real application you have very nice properly structured message so it is it has to be typing started from server now this is good we said that okay okay it's fine but when we have to stop the typing once user stop typing something that means as soon as we as the user is typing we don't have to to do anything but if user is not doing anything after some millisecond we can stop the typing so we can simply say set timeout and let's say after 200 second or 200 millisecond actually I say that socket dot emit typing stopped okay let's have this one and now one more event we need to listen but let's let's do one by one so here we are uh socket dot emit event stopped typing but before that let's have a log and say stopped uh typing stopped okay let's see what's going to happen when we say typing is stopped open the console start typing and as soon as we write it is doing the stop that's not good so what is the real thing we are doing so if you have any experience in the reacting you may know that there is a debounce effective so what is the bounce effect the bounce effect with is simply saying that you have to first create a uh like time out constant which is something like this and then we say that if there is something inside the timeout maybe we can do like uh let time out is something and then we set it so if there is something inside the timeout then do the clear timeout and pass the timeout we have created okay so if we have something in the timeout then clear it and do and obviously we have to create the another timeout now what is happening once user is stop typing then after 200 millisecond this will going to work but before if before 200 millisecond user again pressed any other key it is going to clear the previous timeout so for that we need to actually create a new state so use state which actually going to say time out and initially it's null and then we don't have to do this we can simply say set time okay we need to make it I'm going to use the different name otherwise we will have some clashing so we can say um typing timeout yeah this is good so typing timeout is initially null and then we say that hey we need to say set typing timeout is this one so if we have something on the typing timeout then clear this typing timeout otherwise start creating another uh set another Timeout on this state we have if you're not getting it don't worry about that so you see if I press any key and it's moved out without typing anything it's just logged but if I keep on typing you can see there is no log so it's very important to listen for the user and let's just make it bigger for you so you see if I'm typing typing typing typing if I stop you can see there is a log then start typing typing typing typing stop there's another log so this is what we really want okay so so since we have created the debounce effect now is the time to emit this real event and make sure this is 1000 so that it will give some breathing time now stop typing and we know what we have to do we need we need to create another one and it says it's stopped and typing is stopped from server this is the event and we need to listen once again same thing and we can say typing stopped from the server and just make it false that's easy and since we don't have to do anything we can use it inline with the arrow function like this and it's really looking good code is good now let's try this okay so I say hey how hey how are you and if I stop writing you can see there is no typing event available okay that's the typing thing with our chat application with socket IO now let's have the room feature in our chat application so how we can do that it's simple like from various users we want certain user to have a group chat kind of thing so that include the room system so normally what we do is just do something on inside the connection but this time we just need to say socket.join and the room name that's it that's the easiest thing we have to do okay so let's start with this and let's say I want a user to join a particular room so how we can do that so joining a room is okay whenever there is a new connection user will say that okay this new user will join some room and whenever we need to Emit and do something and that will become like this okay so first thing is here we have two windows but we don't have a way to distinguish between the different kind of rooms or different kind of group for that first I want to have a react router and then we will have the uuid package let's Implement these two things let's go to the react router Dom up not just on the react router and inside this reactor let's go and gets how do we get it started get started with tutorial and it says that first you need to install react router Dom okay so let's go on the client side so here I am on the client side I am installing react router Dom what next Once you have this react router Dom then you need to add this uh where is that router provider in your app.js or index.js in our case and then create some routes and then move that route or link that route to our provider okay so let's go on the front end we have this index.js here we are using this app but now instead of this app we need to say router uh is that router yeah router provider so we need to have the router provider here and on this router provider we need to provide the route but we are going to import these things from our react router Dom so let's have this react router Dom like this okay so we have the rec provider but it should be router and now from where this router will come so we are going to create another directory or maybe just a file called router.js and then we just say um we need to just create a const router or something like this routes and then export default router okay now let's import this create browser router like here and then we can simply say import router from same router.js file so this is done for this and now when we go on the base URL what we have to show right now if we go and see it's going to show you our offline that's not good why it's showing something like this because it has to show Hello World remember I need to start the server so I have started the server now you can see it's going to show me something like Hello World boom hello world is here why because here we have said that when you go on the Slash this will be there but instead of this I will say that hey I need to have this app component so let's say import app from and we need to go and say app like this dot GS and now if I reload yes I'm having back or back with this component but now what I want I want to have first a nav bar at the top so why don't we have a card here at the top so before that what we need is in our app.js we are showing this chat window so it will be like slash chats uh then we should show this chat window like this okay so we should create the children and this is going to be an array of object of path slash chats is equal and element we will show is going to have chat window this one okay so this is good so now if I go on slash chats seems like we are still having the same chat window because if we go on the app.js and if we comment this and say hey in the container we just see hey no chat window so how do we correct this on the rigged router Dom whenever we want to show some children we just need to do one thing which is uh where is that outlet thing where is the outlet thing maybe if I'm not getting it I can do the search so I can say search for Outlet yeah we reached to this point so we just need to have this component in our app dot JS this is on the outlet and now import this outlet from react router Dom here now this means whatever now we say if we are on the slash chat it will show something like this and if we are on home page then it will show nothing because on our home page we are just having this app which is not having anything anything now here we can simply use the header and this component we have to create so let's go and create header.js and this is going to be a react file and let's finally import this header and you can see we have the header now this header has to be a card so let's go here and now I can say hey I need the card that should be coming from Material UI so I can copy this and paste it and call it card okay now since we have the card we can simply say that inside the card we need a button and button once again coming from the material design button and this will say chats okay now you can see we have nice little chats and what next we need to have a link here which should lead me to the chats page so how do we link so let's search for the link thing and it's very easy just from the react router Dom we can use it and then we can say two part where we want to move the user so it will be like this so hey first import it and then we can say link will move like this and then I say 2 part is slash chats this means now if I go and click on chats you can see I am on the chat maybe I can also have one for home so instead of having a like button can we have the typography how it's going to look typography or is this typography like this okay so typography yeah imported and that's okayish I think the button was good anyways so we can simply say this button is having a type of not the type but variant of text and this one also okay so this will be like home and move it to the home so this looks good and finally I can have the margin here so f x of margin top of 10. and yeah maybe five will be good okay that's good and finally let's have one more thing here called raised and also provide the background color as no suggestion background color of once again let's say gray and this will lead us to something like this and on these buttons we can have like once again text simple color is white yeah and also text decoration has to be none so text decoration is none and it should be removed hey why it's not removed the underline let's see what options we have so for text decoration it's not giving anything if I say none oops anyways it should be there but text underline anyways so we need the text decoration as uh none so but none is not ticking as the thing so anyways we are having it so home chats and on the home I just want to say one thing is like having a typography of type O and maybe what we can do we have this element here and on this yes we can say that hey typo graphy is welcome to my chat app and use this one like here and that should be available what happened oh so make sure you are typing it correctly typography okay so this looks like here we have but that's going to be everywhere so what we need we need to remove it from here and um we can go on the router and first as a children what we can do we can say another object and this will have the path of Slash and then element is going to be the or maybe home actually not the app and this home will come from the home page so let's have a page called pages and inside this pages directory Pages directory we are going to create one called home.js and this home will include this typography thing okay so how do we use it so on the chat window we can grab anything and we can paste it copy import that's good now we have this home element which should be coming directly from our pages so slash Pages slash home dot JS similar to this we can also have one more page called chats and let's create chats.js this will only going to have this chat window so this chat window will be here oops not this okay so chat window will be like here here we can import the chat window and we just need to go up a directory and then we should have the component and that's good and here we can just say chats which we have already there okay so everything is fine home is this chat is this something like this this this and if you once again want everything to be at the center we are having this um they are having this chat window with this box of at the center so we can cut that box and move it here inside it like box okay so we need to import this box also so like here imported and box from the material design no closing tag what it's saying oh yeah like this so finally we have done and let's remove this and everything will be at the center but we have something different so let's open the app so this should Outlet header header should be outside of this yeah so home looks good chat home chat finally we should have uh rooms so maybe I can create one for room slash room ID this will be the thing so I say room one okay and this will going to create another uh room one thing so since if we go right now we don't have any room or room ID so we will implement this in the next episode right now we are having this room which will take me to the locals 3000 slash room slash room ID but from where we can get the room ID so it has to be a random number or random string so I say uuid package I'm going to use it and let's have it and this is a very nice package you can see the number of downloads and let's install this on our front end this is very important to install it on our front end now since we have it on our front end on our client what we can do we can simply create a new room by going into our into our header and then we first see how we can use it after installing we can import this uuid thing like here and then we can call this to create a new ID so here we can simply say const ROM ID is equal to this thing so this room ID we can provide as our uh link okay so it has to be something like this and it should be included like here in a backtics nice okay so it will lead me to a random uu ID with a room ID so let's go and if you click on the room you can see we are getting error but this time after room we have a long unique ID we can use this ID to create something so since we have this let's register our route to handle this room component so I say if there is a room and after that we have any room ID then I say room okay the room is a page I'm going to create so I say room.js and here I should get the room and I will use the use effect and inside this use effect I'm going to show the room ID from the URL so how do we get that so we need to go on the react router Dom and say params so how do we get the params so it's going to be easy by getting the parents from the query maybe we can call it so from the parents okay so we can use this use param Hook from react router Dom to get our thing so we can import it like this and say const params is equal to use params like here and then we can get and we can simply log this params if we have the params in our component so let's import this room and then it's going to work C open it now we have the room ID wow that's really amazing so what we need to do we remember we have this socket it says that you can ask user to join some room and this is the room name okay so whenever we are on this page we can just send an event and then that event will going to ask user to join this room ID so how do we do that so what we have to do we have to just go on our room and here we need the socket so const socket is equal to IO and remember we need to import IO like this from socket client okay then from this socket dot Emit and I say join room and then here comes the room room ID as params Dot room ID okay that's the only thing we have to do so join room is an event so this means we need to go on our server side here we can go on the index.js and just like we are doing a lot of amazing thing listeners we can create another listener for join room and this time we get the room ID as here and we just need to say socket Dot join and we need the room ID room ID okay so let's just do a log and we say joining room and then we should see if I reload so it's not there because first we need to do the connection so remember on our chat window we are using this and doing the real connection from the socket and then we are moving forward so instead of doing something like this what we can do we can move this thing like the socket connection on our app.js like here okay so that we don't have to do the connection again and again so let's go on the chat window cut this and go on the app this will make sure that we don't have to do the real connection again and again so we need to import the i o also so which we need to do from here cut paste that's good then we need the socket so socket State should be there like here okay so we have the socket which is something like this and after some time we are actually doing the connection and once we have the connection then everything is fine so we need the socket how do we pass out the socket everywhere okay so for that we can pass it as something propellectic but it's not that so we need to go on the react router Dom and search for context and here we have the outlets context so as a context thing we can pass whatever we want and then in any child component we can say use Outlet context and we get anything so it's very easy context is going to be our socket and we are done with this this means we can try this and see if we have on our home page or not so we say const and it's going to be like in inside an array or whatever you want to pass so see this it's going to be like this okay so what we can do we can get back it and pass it like this and now on our home page I can say socket is equal to use out let context like this and this should come from react router Dom like here um good yeah so this is good and now let's just log the socket and see what's the result so yeah you can see if I go yes we have the first null and then we have the socket so what we can do is since we can easily get the socket anywhere we can just go on our chat window and now here we can get that socket use Outlet socket is there so we said that once we have the socket and then do anything you want okay so this is how we pass out the socket to everywhere and in that case if I now go to the room where we actually get started we don't have to initialize the socket because now we can simply say const get me the socket from this outlet and this means now I can import right here and say if there is a socket then join the room wow that's row really good so let's see if I reload go on the room and yeah you can see we are having a joining room now let's implement the real room so one problem we have is whenever we Refresh on the room we get this kind of error which is because we need to first check if there is no socket and like this then just do nothing okay that's good let's reload yeah yeah it's working okay next I was looking for this to remove the text decoration and for that we can go to the header and we are having this text decoration on the button now instead of this here having this on button we can move this to the link Because the actual link we have is this and this is actually creating our anchor Tech and now text decoration as none comes here and you are good to go cool so what we actually want so let's go on the room and it's similar to the chat chat component or chat page we need this kind of chat box here on the room so let's go on the room and instead of this I'm going to say I need a chat window okay so let's import this chat window chat window from component chat window.js okay now both of these places in the room and in the chat we have the chat window but here we need to do amazing thing like C if we have one user here and then if we have another user here but the last user you see is just going to the chats now here uh I think I need to do one more thing so it's like div and then what I can do I can just say typo graphy and import this typography so import typography from at the rate mui slash material slash typography and inside this I'm going to say room and the room ID will be like params.room ID okay so this is just to make sure we have a nice uh okay so once again there is spelling mistake so typography like here so whenever we are on the room you can see we are having this kind of room ID now this person on the last one is just on the normal chat so if I say hey you can see it's broadcasted everywhere and if I hit send you can see it is received by the room people also and if I say I am from room you can see it's same working everywhere so first let's Implement one thing which is like the typing event but let's just fix this maybe we can have this room name or ID inside the chat window not here so I can remove these two things go to the chat window and we just say that if we have the params so we can say const and params is equal to use params use params like this and this use param will come from react router Dom and if you want you can destructure the room ID directly from the params and now we say that if we have the room ID if we have the room ID then show me this typography and add the room ID like this so if I am on the chat window you can see I don't have any room ID here I have the room ID that's good so what next open this on here same window but now if I type that's working but that's not good thing because we know that it is also working on the normal chat so let's implement the chat thing first so whenever we type something why can't we just pass the room ID and now if we are passing the room ID and then go on our server here on the typing started we are emitting to everywhere like broadcasting to every user who is connected to our connection socket but now since we are passing the room ID we can say room ID it could be null also so we say that hey first let's create let SKT which is a socket so I say socket dot broadcast and then I say f k t is equal to if there is this room ID then you need to broadcast on the room ID which we are having otherwise do nothing so SKT will be the same the socket SKT dot emit so finally if we have the room ID then emit only only on the room ID otherwise emit everywhere okay so let's see I am on the chat on the left side and on the right side I am inside the room so if I start typing you can see there is no event going here but is it working on the real room so let's get inside of the same room with this ID and let's try to type okay so something is not happening good so why this is there so there is some problem it says that SKT dot on is not a thing okay so how do we do that let's go on the socket and for rooms this is how it where is the room yeah so it's on the two not on so socket dot to some room and then start working okay so let's start typing and yes we have the typing but if I go on the room uh chat not on the room so you can see there is no typing event okay so let's once again go to the same room and let's implement the typing stop so we can go here just like we are passing the room ID on the typing started let's pass the room ID on our typing stop also and now we need to handle the same thing on our back end and we did exactly this and copy it and then broadcast here also so socket dot emit like this okay so let's start with this and I say hello and stop typing and it's not working so I have some issue and the issue is I need to get the room ID and once we have it then we can start working hello and stop typing and that's gone so send a message it's here now this chat window we have is a global one so everyone from everywhere from every room can access it can access this so we don't need this chat window because that is not a good thing if you don't want any message to be delivered any uh to everywhere so here also when we are sending the message then we have to get the like room ID from the data so maybe what we can do we can say hey here is the message and then we pass the message only but from this we can also get the room ID okay so just like we are doing here same thing we can do on this part if there is a room ID then broadcast the message to the room ID only in that case we also need to pass the room ID here when we send a message so that if we go here and open this if I am on the chat on the left side inside the room on the right side if I say hello or hey uh still it's broadcasted to everywhere that's not good thing let's see why it is happening so we are sending the message and we say that hey message is there and hmm so what happened here it says that we have the room ID can we check it like here so let's log room ID and see if we are having the room ID if I send the message yes we have the room ID so it should only do by saying SKT that's I already always forgot so reload on left and on the right and now if I say hey it's not on the chat on the global chat but if I go on the same room like this one and say hi you can see everything is working so good nice so this is how we implement the room thing only inside of the socket i o on our month stack socket chat application right now everything we are doing inside this index.js which is okay for now but as our application grow we have to extract this logic somewhere else so see everything is inside this callback that means we can create a socket routes or just a socket thing basically what we need we can go on our back end and here we can create a new directory and we can call it socket inside this I'm going to create let's say socket routes dot JS so this is a socket routes okay so we are calling this socket routes that means we can simply say const routes or I can say sockets is equal to the callback which will get the socket here and just like we are doing everything here so each and every thing can be moved inside this file and finally we can say export default sockets okay now since we have the sockets here we can just go inside this index.js and instead of this callback we can simply say sockets so let's import sockets from our sockets directory slash we have a routes dot JS or you can also call it sockets.js maybe that will be good in my opinion okay so name naming convention is good and finally we have very clean io.connection on the connection we have all the socket let's try this and see if it is working or not so here let's say hey send it it's sent and now we are receiving it that means it's working fine next we can do is like for each and every event we can create the controller so it's all up to you but I'm going to create a controller's directory inside of the socket because this is just for the socket and now I will create a type Queen controller typing controller.js okay and inside this you can see we are doing a lot of things inside this typing started so cut everything and then say export const typing started is going to be this function okay so we need to import from here so at the top I can say import typing is started from this controller and then typing started is something like this similar to this we can also do for our export const typing stopped is like this okay so then you will see here we also need the socket is this going to work or not we will see but first let's import typing stopped like this and now go reload this page reload this page and if I say hey you can see it's not working you know why because here it need this socket which is not available inside this now what we can do here so I think the error is coming because we need to say typing controller.js okay let's see is there any error no no error and reload on both side you say hey and that's again failed because of some different error now it's a socket dot is not defined in our controller where we are having all these callbacks so the question comes how do we get the socket inside this so what I'm going to do I'm going to convert this to a class A JavaScript class so I say export default default a class called typing controller and inside this I'm going to create a Constructor okay this Constructor will going to have a private socket variable and then uh actually we just say socket we are not using any uh like typescript so inside Constructor we get the socket and we can actually Define it like this dot socket is equal to socket we are having now we can move these two functions and making it as a method of this class and now for this socket we say this dot socket and now we have the socket in our class so instead of saying it like this I say typing controller and create a new instance of typing controller so typing controller is equal to new tapping controller and here pass the socket so this will become something like dot typing started and once again Dot typing stopped okay so let's now see on our server if anything is wrong no nothing is wrong everything is fine reload yes on both side typing is working stopped yes send message and everything is working so this is how we extract information to some logic where we have the controllers now so simple we have the join room so we can create a controller called room controller dot Js okay so export default class room controller and here we always need this socket thing okay so if we can just copy and paste it here we do the same thing and this time we need the join room and cut and paste this and we say join room will be something like this so we don't need it and this will be like this dot socket okay so we need to import our room controller so room controller create a new instance of this so it will be like room controller with a small R and room controller that's good and then we can use room controller dot join room okay so now let's see Server is good everything is fine one more time yes working okay the last one is send message so I can create a message controller.js and the same export default class message controller and remember we need to do the same thing for our socket we are repeating ourselves many times so let's create a base controller.js so export default class base controller and here I'm going to paste it and this is not going to do anything and now for every class I will say extends base controller when we do this we don't have to do something like this and just to prove that this is going to work we can go on our message we can go on our room controller we can remove this implementation and say extends base controller controller and we need to import this so it will be like this so imported cool same on the typing controller like this extends base controller and remove the Constructor part from here okay this become super clean is this working fine okay so we have some issue what's the issue issue says that cannot find module called base controller remember we have to do base controller dot JS I forgot this every time so copy this paste it on here on the room controller and on the message controller how about the server thing this time server is saying no issue finally everything is fine wow seems like everything is good and final thing is we need to move our message to the message controller so here is the message controller and we say send message is this one and this will become this dot socket and everything seems fine and similar to this will become message controller so with the message controller capital M and finally import message controller dot JS file and the message controller dot send message that's so easy you can see everything looking really good and now since we have everything we can just final check and yes working super duper fine now since we have these things let's now move and make this application more amazing right now in our application there is a room one which is actually just a demi behind this random ID so whenever I do the refresh and click on the room it's going to generate a new random ID and that will be a new random room so why can't we have a button here which will say new room and then that room will be coming here on the left side and any user can just see how many rooms we have and then that user can join that room so simple very simple thing is first let's remove this chats because we don't need it so first we can go on our client side and then we have the pages we don't need chats pages so just remove it and on the router we can remove this router or route for that chat now what we can do we can go on the header and just like we have this chat like this one we can actually create a button called new room okay now this is not going to move me any other places what we have to do we just need to listen for the on click event for this button and say create new room this is a function we are going to create here so let's create a function called create new room and we will do something inside this so let's see yeah that's good new room but we don't need any room button for now we will see how we can do that later and this button has to be on the right side so what I can do I can create a box here and this box will just going to have both of these things and this will be having SX first let's import this box so that we have it and then we will say that this is going to be here display of flex and we need justify content to space between okay so we have this link and then we say inside a span tag or maybe we can use one more box which is going to hold all the left buttons and then we have a right button of new room so see home is here and new room is on the right side okay so let's go on the home page and here we have a welcome to my chat app then click on new room it should create a new room and move the user to that particular room okay so we have to create a new room and how do we create a new room it's simple we need to navigate user to this new room ID so let's create the navigate it's equal to use navigate okay and this will come from react router Dom so we can do like this is this correct yeah so then we say navigate and here we provide something like this so navigate to Room Slash new room ID which is using this random view you ID and instead of this I can move it here because every time we want a new ID and not the same ID every time we click so let's click on new room and you can see I am on this particular room okay so if I click on another room that's every time we create it's going to land me to a different room that's so easy thing so on any kind of room I am I can go and just start doing the chats so hey yes it's working right that's cool so this is how we we can create a new room button but what we need if we have this room user doesn't know is there any room or not so what we have to do on after this home we should have a button for this particular room which user has created so once the you once the user is creating a new room we need to broadcast this information back to our application so we are having this all these things are good but when we go on any room then yes we say that join room so the user is joining that room so at this time when the user is joining this room we need to broadcast back that hey there is a new room available now let's go on the room controller and here we have the joint room we are just making the join for this user but we can say this dot socket and we want to broadcast to everywhere so broadcast dot emit new room create it okay but this will not going to happen every time this will only going to happen when the user has created so this means we can go when we have created the room we can get the socket so we can get the socket from our room this is how we get the socket so we get the socket and from the react router Dom we have to import this use context we have the socket and we say socket Dot emit new uh room created and the room ID so we are creating a a new event called new room created and on the room controller we have to go and just create another method called new room created and this will get room ID and finally we have to broadcast to everywhere that hey new room is created with the new room ID like this okay so let's register this one on our sockets so here we have the socket after this we can say on new room created room dot new room created that's good okay so we have done this and let's now go on our header and in this case we need to say use effect get the snippet clear it and then here we say that whenever there is a change in the socket and if we don't have the socket just do nothing but if we have the socket then listen for some event which is new room created and we get the room ID okay since we have the room ID we can create a use state so use state which we're going to hold the rooms okay initially it's empties and then once we have the room ID then we simply say that set rooms and then we spread out to the possible rooms we have and then we just going to add another room ID like here okay so it's going to be the rooms now this rooms we have and we can Loop over the room like here and create the buttons good so we have to say simple thing which is like hey rooms dot map and we get one room here and inside this we just need to do this okay and finally just have the room as the room name and here also it will go and take me to the room so State user State a has to be imported cool that's done and now it's a socket is out of context what happened here okay so it says that this socket is not available on the header why because if you go on the client side on the index not index on the app we are having this header on our uh on not on our Outlet so the socket is only available on the outlet so we can simply pass the socket as the prop because it's a normal uh it's a normal component header is a normal component so in that case we don't have to use the use context thing and that's it that's the only thing we have to do let's try this once again yeah that's good and let's start with scratch so now we don't have any room let's click on new room so that's good maybe what we can do we can just go to home and create another one okay let's good Let's do let's create a new room and it should populate a new room you can see there is a new button here also which is giving me the new room but you know I want the new room to be added on my side also so when we create the room yes we are navigating we are sending the socket also we need to set room and add the room and we are doing similar things here so this is for the room which I have created and this means if I click on new room like this that that room is available here and also on other window so on every window actually so user from this side can also click here and join and then start chatting you can see it's working fine wow that's really really amazing okay so what next if we go on the home page and reload this application you can see we lose the room name or the room button here from here so how do we do that how do we persist this room let's use the mongodb database to store the room information so now let's have uh Mongoose in our application so search for Mongoose and go here and you first need to read the documentation and here we have a quick start quick start with npm installed Mongoose save so for that we can go on our back end so CD on the server then install it okay so while this is installing we can actually see what we have to do next on our server side we can go and get started with the Mongoose and for that we need to import it and then we can connect with the mongodb we have so let's require this on our index.js and here we can simply say import Mongoose from Mongoose okay that's good and then we need to do this a weight of mongoose dot connect and then we can move forward by creating the schema okay so how do we do that so first thing is in let's move these import or maybe we can just do like Here and Now we can say Mongoose dot connect and this will going to be connected to the URL for our mongodb so it will be like mongodb URL and here it's actually going to be a promise so there are two way of doing it one you can do the await part here okay once you do the await part you can see is there any error so yes there is a some error so let's see what error we are having it says that uh you must need to provide some URI that means the mongodb URL for that we can go to the mongodb and inside this mongodb we can go to our product and then we have the atlas which is a cloud-based mongodb then click on sign in if you don't have the account you need to create the account I already have so I'm going to log in with Google so once you are successfully logged in you can go and create new database and then it's going to first create a new cluster actually so it is going to be the shared one which is free for us and then we will be able to use anywhere you want so let's create the cluster and since it says the project already has another free cluster okay so we can create a new project actually from here and then we need to just give the name so man suck it okay so let's go on next and add member so we have all the members so create the project and on this project we will create a new database so now it says the build on database so once again we are going to use the Freeview tier so let's click on create so it's going to give us a free cluster for this particular project okay so we are using it and now it says username and password so bit fumes123 is the username and bit fumes123 is the password same uh this has to be bit fumes one two three that's good so create the user and it's created go to the database and here we can see we have the connect now we can connect from anywhere else and then add the IP address and from we need the uh from connect your application and here we finally get the URL for the mongodb so here we are inside this and password is between one to three right that's super nice and finally if I open our server you can see it says we don't need to use it here we have to use it like this now it's good everything is fine and now let's click here reload and no error that means everything is working super fine okay so what next we need to create our models and especially for the rooms model let's do that let's start by creating a directory called models inside this I'm going to create a file called rooms.js this is a mongoose model we are going to create so let's go on the documentation for the Mongoose which is here and it says that you need to First work on your schema so how it's going to be so I can just zoom out and then go to the schemas and first you need to import these two things and then create the schema for your for your rooms so we are having the schema we say rooms a schema okay and then finally we say export default uh rooms schema but with this we also need to say Mongoose model give the name and the schema okay so we say Mongoose dot model and here we have this and we give the name so we say room or we just call room not rooms because this Mongoose will going to pluralize this thing already okay so what it need room just have a name which is going to be the string okay and it will have the ID which is going to be the alphanumeric for now it's a string that's good and for now these things are good in our case and later on if we need we can do more if we want so name and ID that's super easy so that will become the room ID in later on so now how or when we can store this information on our mongodb so first is when user creates new room that information goes to the back end where we have the sockets inside this new room is created we have this new room created function and here we can store the new room information simple okay so how do we use it how do we do that first we need to say import room from uh let's go up a directory another upper directory models rooms dot JS and then we simply say that hey we need a new room so new room and here we pass we provide a name let's say test and then we provide the ID as room ID that's super easy and finally we say room dot save this is going to create the new entry in our database once you have it then you are good to go let's now go and see if it's really working or not so let's click on new room and it's created it's populated here go on the database browse the collection for this project and this cluster and this documentation and here it's retrieving the database and you can see now we have rooms and one room is available so we have the ID and we have the test we are not talking about the underscore ID maybe if you want you can call it room ID instead of just giving it as an ID so I can go on the room model and I can call it room ID okay so in that case we just need to do something like this and now let's remove this collection from here on the mongodb go here reload reload click on new room that's here that's populated here and now if I once again go and reload it so is there any reload button no so we need to reload the full page and this will going to have the room with the room ID which really we need okay that's good but finally we need to persist that means if I reload this page we need to have the rooms from our database for this we need to create a API on our express.js so here we have it and now we have this app.get so let's create the API and inside this API I'm going to create routes.js because this is going to have all the routes so here how do we use this routing thing so first is we can go and paste it and not just like this here we need to First import the express or maybe we can just say I need the router and then we say const router is a new router okay and then we say router dot get rooms okay and here we should provide the rooms now first thing is we need to import room model from our models slash room dot JS and then we say const rooms is equal to room dot find all okay and finally return or not returning like this we say response dot Json is going to be the rooms like here that's the simple API we are having finally we need to say export default router okay that's good and on this we have to say import router from API like from API router.js and then we say that hey app dot use and using the router okay so here we have the router and let's see if this is working or not how do we check it we need to go on our header because here we have the rooms and we need to create another uses use effect where we can fetch all our rooms so we can just say const response is equal to a weight for awaiting the fetch HTTP equivalent localhost 4000 colon 4000 slash rooms okay so now we need to create a function called fetch rooms this will be a sync function and now called Fetch rooms function here and we can de-structure the data by saying awaitresponse dot Json and finally log the data and see if everything is working fine or not okay reload this and now it says we have the course error to solve the course error we need to go on our server side and we say npm install course package once this is installed it's becoming very easy go to index.js I say import course from course and before everything like every route we have we say app dot use of course this is the course for the API only not for the socket and now everything seems okay and reload and see nothing is no error and this rooms is pending it's taking a lot of time so why is taking that much time so this long pending basically means on this we need to call the course error let's see what we are doing next uh some error why because oh I have to the await part which is going to be the async now let's see on the rooms you can see we have the room with the name and the ID cool so since we have the room let's go on our front end where we are fetching the rooms we have the rooms and now remember we have this room state so we can just set the room we have so all the rooms will be like this so we can call this as a rooms we can say like this and that's good so since we have the rooms it says the object are not valid something something so maybe I can just log rooms and see what we are getting on the console we are getting an array and then we have a name and the ID so the point here is we are setting the rooms but when we Loop through the rooms we say key as the whole room object we can say room dot underscore ID and here two part will be room dot room ID okay and here we show room dot name okay so now you can see we have a test room available wow that's really amazing so we have this justify and between we have this box and we say component is going to be the div so how about having it here why it's spread all around because it's not about the component it's about the Box should enclose these two the home button and the rooms now you can see room is here so even if I am refreshing the page I have the room so I can go into the room and I can get started with my chat you can see wow it's working super nice so this is how we get started with the mongodb and the room system with the persisting database let's connect our rooms with a user now currently we don't have any authentication in our application but just for here we can use the random uid to create a user and we store that user ID in the in the cookie so that that will be treated as the logged in user so how all these is going to work let's now see so we first go on header and here we create a new link and first we say this is a box in this box and here we can create another button and call login okay and when we click we say login and here anywhere we can create a function and say login and what this is going to do this is just going to store first create const user ID is equal to a new uid using this one here and then we can store this in cookie so for that we need to go to the client and install our npm package for install oops install Js cookies okay so we are having these cheers cookies that's good and now let's import it so import cookies from JS cookies and we store dot set and setting the user ID user ID as user ID and once everything is good we just say navigate user so navigate to the home page okay and we are done so we need to say comma like this yeah so we have this login ID suppose I am on any room I click on login I move to the home page and if you go on here you can see we have this user ID we don't want this token thing so just remove all that click on login and yes we have the user ID so if we have the user ID we can say that user is logged in okay so in that case we need to First go on our app and here we can check if user is logged in or not so we can say is logged in and we need to set is logged in initially it's false but we need to check for cookies dot get so let's import cookies from JS cookies and then we say get item and the name is user ID const user ID so I said that if user ID is there then set is logged in or maybe instead of is logged in we can call it user ID directly so set user ID like this and initially if user ID is null and if there is a user ID then setting the user ID so we can say underscore user ID and setting it like here okay so if there is user ID then we set the user ID and we pass this user ID to our outlet and to our header so it's going to be available everywhere now on the header we accept it as the prop so from here we are passing and we are accepting as a prop and then we say that if we have the user ID so here we have if user ID is there we need a log out button okay and if user ID is not there then we need a login button okay so log out log in and this is just going to say log out and what the logout will do let's do this log out we'll just do something like this it's going to navigate to the home page page but it will remove item called user ID and that's it so now it's a socket dot on is not a function but where where we did something wrong on the app.js now see this okay so this is not like here it's a user ID is user ID because it's a prop okay so reload yeah we are back so it says log out because we have the user ID and we need to change the state on our we need to change the state on our app also so we also need to pass the set user ID the set user ID on the header okay so logout will also say set user ID as null so we need to get it from the prop okay so click on login it should work like this click on logout yeah so while log in we also need to set the user ID like this reload login logout login logout okay so now we have the user information and the user ID we can say in our cookies this is just for uh learning purpose and then what we can do we can associate our room with the current logged in user or I can say if user is logged in then only user can create new room so this log in new room function will also be available if user is logged in otherwise it will be not available okay so just do something like this so when user is not logged in then there is no new room once user is logged in yes there is a new room thing okay so just to move the log out button on the right side everything is fine now let's implement or associate the user with a room so the very first thing we need to do is go on the database and just remove the room we have so once we remove the room like this and then if I reload we don't have the room wow that's good now when we create the room so let's go to the create room which is on our API routes here we have the get room um this is for the room on the socket controller room controller new room controller we are connecting the room with the name and the room ID only so for the room uh you can say room schema the Mongoose model we also need one user ID thing and for now it's going to be the string which is treating as a user ID okay so here we should also send the user ID from our socket so we say user ID is like this so when we create the new room we create the new room on the header and here is the button create new room everything is fine socket sending the room ID and user ID also okay so that's going to associate our room with the user ID now I am logged in and you know it's a fake login but let's create a new room new room is created let's go reload this page so that we can have the new data for the room and you should see uh it it has to be a new room tab but it's not there that means we're having some issue on our mongodb maybe if I can check on our server everything looks fine and we can see we really have the room with the user ID that's so nice so if I reload yes you can see we have this user here that's super super so since we have the user connected to this and what if I open this room on a new tab so this user will be a different user and this user will be a another different user so if the user ID we have on the cookie is same for the room user ID then we should have a button called remove or delete room then that will be helpful to delete room from the database and other person who has joined the room will not be able to write anything in into the room okay so how do we do that first let's go and here we have the room ID so let's open the chat window inside this chat window we have this typography we also need to say that I need a button so button should be here and this button will be like ah delete room and we need to import this button okay so button is there and it will be like this which should be on in a single line so I say box and a box should say display Flex and justify justifying the content as space between and yeah that's good and we call this as size of a small okay and variant is text okay so that's good finally we can click on this delete room button and it's going to remove our uh room so color is primary or we can call it info all are same that's good secondary yeah this is nice so click on this and it should remove the room so on click remove room okay but we have to create a function for removing this room so this is going to be like here and what a remove room will look like first we need to send a fetch request to a API to remove the room from the database second we need to send a socket so that we can remove that room from the header so there are two things so const response is equal to await and make sure this is a sync of fetch and localhost colon 4000 slash room and comes the room ID so room ID this is how we delete something and since this is going to be delete so we say method is delete okay and that's going to delete it finally we say const not const we need to use the socket dot Emit and we say room removed removed okay and then we provide the room ID okay these are the two things we have to do so maybe we don't do anything because it's deleting so first let's create the API so we have the room uh on the model we have it so we have the rooms and then we say it's a delete rooms slash colon room ID we will get the room ID and we get the room ID say it's from the response a request Dot params Dot room ID this is how we get the room ID but we need to say delete one and we say underscore ID is this thing okay so once this is done so once this is done we can say data is a message message says that delete it okay so this is the API we have created so what I'm going to do I'm going to just commit comment this socket thing so that we can see that is it really be deleted or not so if I open the console open the terminal click on delete room and it says 404 room so it should be rooms with the S okay one more time click on delete and now it says or it says connection refused what happened on our back end we have some issue so backend says underscore ID for the model some issue here we have on this routes so how it's going to work now the problem is this room ID is the room ID but to delete it we need to say like room ID not the underscore ID that should be working so once again go to the network click on delete room and yes you can see the room is deleted and if I now go to the home reload this page and boom that's done what next since we are done with the API thing we need to remove the room from the socket so we send a socket request so we have the remove room so new room created or I say room removed and here room removed function we have to create on the room controller we say like this here we get the room ID and then we are doing this and if you want you can remove directly room from here so instead of creating this API we have here we can directly remove the room like this okay async and we will get the room ID so in that case we don't have to do any fetch so this is really really amazing so we don't need any fetch and we just emit a event called room removed with a room ID and once it is removed we broadcast to every other people that hey room is removed okay so if we get this event on the front end we will going to remove the room from the front end also so how this is going to work we go to the header because here we are having the room information and from this array of the room we can just remove the room okay so we have use effect we have used effect where we are listening for the socket events for new room created to the room removed is also there and we just need to say hey there is a room which is like rooms dot filter we get the room and we say where room dot room ID is not equal to the room ID we are providing like here so we're just going to remove that room so what we have to do just go here and you can see we have this logged in in an incognito window and here we are so let's click on new room so new room is there but it's added here on the test why not on my side the side where user is there so this is happening because of one very important issue is when we create the room we need to get the room full room and then we are yeah so when we do this socket dot emit new room is created then at this time we need to get the new room with the all information we need like the name also we have to say test and the underscore ID is test ID this is just for fulfilling the room structure which we are following similar to this when we do the socket dot on we are saying new room created at this point what we have to do we have to just not provide the room ID but provide the full room so let's go to the room controller it says new room created instead of sending the room ID we have this room from the mongoose so we send the full room okay so let's go back and instead of getting the room ID we get the room and then we add that room here okay so what we need we need to just do something like socket.mit so that it will be emitting to every user including the user who is emitting the event so in that case everyone will get new room is created or room is removed in and with this it's going to be easy so once again let's click on new room oh it says something else it says room ID is not available something bad happened so let's log the room we have and let's go back so we have test room delete this test room so room is deleted easily but when we create new room you can see it says undefined that means on the socket controller we need to provide it as an object of room so now one more time let's go and remove it go on the home actually here go on the home oh it's not deleted so delete the room go and now click on new room you can see this time we are getting the room information so everything is fine okay so this is how we work on removing the room now let's work on the file upload with the chat so here we should have a button for the file upload and for that we can go on our mui the material design and inside this search for icon on the component search for Icon if we go on the component material and we say this is going to be a file so we say attach file we need this attach file go to chat window import this at the top attach file icon we need this icon like here so we have this and we need the icon button actually and this icon button will include attach file icon and this button is normal button okay let's see how it's looking good this is nice so instead of send we have it now we can also say margin and do we have the margin margin right is going to be 4. and is this going to work no so we can use the SX margin right is for 4 is too big so 1 is going to be good one okay so when we click on this it should open or it should start the you can say start select file so what we can do actually we can create a input field okay a dummy input field of type file but we hide this so I say style display as none okay so like here and now if we see yeah we don't have that but when we click on this one we need this input file to be triggered so we need to have a ref for this and say input uh maybe file ref file ref we have to create on this so const file ref is equal to use ref from react now when we click on this button the attach file icon on click we need to say select file so select file is going to be a function what it says use effect is not defined it's it very bad so now we are having select file and what we do we say that file ref dot current dot um we say click okay so we do this click event thing on that input field so it's you can see now I can easily select any file like this okay that's super easy once we have selected the file and once we come back with the selection we should see the file should be on the log okay so how do we do that thing so when we do the change here that means for this input field we have which is the hidden one we say on change that means wherever cell file is selected so file selected or yeah file is selected let's go and create another function called file selected we get the event and we just say e dot Target dot file s actually so let's open this reload click select a file and you can see now we have one file inside it that's so great we have this file we need to use this file so first we can say const file is equal to give me the first one and this is the real file we have so after this we need to create a reader and say new reader actually file reader like this and then we say reader Dot read file as file read as data URL and provide the file we have and all these things will only going to work if we have the file so if we don't have the file then just do return and then we say reader dot on load this will give me the result or actually this doesn't give me anything and here we say const data is equal to reader.result and then we say socket dot emit upload and then we pass the data let's now check this and go on our application select a file click and it says reader dot onload is not a function okay so what we have to do we have to say this reader dot onload is a an MS function like this so one more time reload select a file and you can see nothing happened no error that means everything is fine okay so this is good and now let's go on our socket and here I'm going to create one called upload and for now I am not creating any controller and I'm just having this like this and this will give me the data okay so how this is going to work the very first thing I can check is doing the log of data and see what we are getting on our server so select a file and we get a lot of data here and this means it's working very fine so const image is equal to data dot file and let's Now log the image let's see what's going to happen so one more time if we select it and you can see it says undefined that's not good so basically we get the data and yeah we are sending the result that means the file okay so we have the data and actually the image we call it so what we can do we can use this uh nice little code to upload the file so we just use this and on this upload we give the file name and file name is going to be random file name and we can say test dot PNG and the data which we already have and finally we say socket dot Emit and emitting uploaded with the data we have so we can also call it buffer and we say that data dot 2 a string of base 64. okay so on the uploaded let's first see what we are having on this at this point so if I send an image we get the error and the error is for FS we don't have the fs so import FS from FS super easy one more time let's clear the console here select a file send the file and you can see no error we are getting no error but if we see we don't have anything here so maybe what we can do we can listen for this uploaded event on our chat window so here we have a lot of listeners and one more for uploaded uploaded and let's just log the data we have and click so we have some issue issue says callback argument must be a function received an instance of an object but where so here it should be okay so maybe what if I do something like this oh not here here on the fs one more try and yeah you can see we are getting the data and the full image is there so if I just open it it should render but it's not rendered because of this base64 thing and you can use this image and show it here once you have it okay so what we have to do we need to read this base64 which we have it and add on our message add as the message and finally we also need the type for type is image like here and it's going to be the data Dot buffer okay that's the simple thing and once we have it it's going to be really bad because once you do this you can see it's having all of these things but we can say that hey if you have the type as a chat uh so here we are showing the message so we say that if uh data DOT type is equal to image then instead of typography show the image tag okay so this is the thing like here and the source will be the data Dot message okay so element alt props so just to suppress this text I just say this alt re-render alt attribute image tag as image okay let's do this okay whatever the warning is we are here and let's see if it is working or not yeah it's there now I just say width is going to be 200 and boom see this let's open this on a new page and let's have it here okay so this is not good let me just so here we are and just minimize this one also here we are reload reload click here image image is here so that image also has to be on the other side Y is not moved to the other side because on the room we are using on the socket we are using uploaded now uh here we are doing this and we actually need uh to listen it for everyone and we are doing it so we are listening for everyone but it should it has to be there is it the same room not sure let's open with the same room reload reload uh send it's there but not on the other side this is not good so why is this let's just do this you can see it's not doing it just do the log of one more time the data so let's select so it is only available on the place where we are selecting it should be which should be everywhere so what we can do we can just go on our socket and remember we need some room ID so that we can just pass it on the room ID so socket Dot on its off the room ID and then do the emit remember on the room controller we have the not room controller we have the chat controller our message controller actually we have the two so not the off it's a two thing so two part which we are having so when we do the upload uh we have we have upload upload upload where we have upload yeah so along with this I just need to pass the room ID also good let's go reload reload click select and it's there it's there on the other side now it's on the other side that means we also need to have it on the same same file so once everything is done then we can just add the message to the to the person who is actually doing it so go to the socket we are emitting the event and once again if we are not broadcasting that means it should be available to every person hmm so that's not good but what we can say that this is going to be the message and when we do the upload part yeah on the read when we do the upload and at this point we can say set of this chat like this and the message is actually going to be the reader Dot result okay so we are not receiving it we are making it false so we are sending actually so reload reload image boom it's working super super duper fine so you can see it's there but it's on the both side it's moving to the left because we have to say that if it's a image just like similar to like this and it's actually going to be the style so if data is received then text align or I can say float of left and right so click image yeah so that's good so reload reload one more data yep so left and right right and left I can make it 100 and that's that's looking good finally we are done with our chat application and this is once again a normal chat application not full flash but with the socket thing I have showed you how you can use the money stack and you can do lot of amazing things including a file upload if you like this video just hit like on the YouTube bedrooms YouTube channel and like this video also if you have any comment comment section is open for you we will need in some other videos till then goodbye

Channel: Bitfumes

Views: 18,539

Keywords: mern course, mern stack course, mern stack socket.io, socket.io course, nodejs chat app, socket.io file share, socket.io chat app

Id: sxfnT36v7Uk

Length: 197min 54sec (11874 seconds)

Published: Wed Sep 28 2022