React Node Socket.io Realtime Chat App

hello guys how are you doing today i'm going to build a very cool real-time chat application using react node and socket io so you can see here i have three different screens open and obviously uh we will do a bit more work on the styling side of the app but the main functionality is here you can see you can click here and you will be joining the chat functionality all right so it looks like this pretty cool so we immediately give user a unique name and you can see the message joined as this unique name and there's a welcome message as well all right so another user joins the chatroom he gets unique name as well and another one gets a unique name as well okay so they all um get this reading message and then they can start chat for example hi it's me indigo here and everyone else get the message in real time obviously and now here cool this is moccasin okay so that's this user and then this user let's say um magenta all right so you can see this way you can build a cool real-time chat application using react node and socket item all right so before we start coding this awesome project let me quickly show you um some of my courses you can find in udemy if you're interested in um mastering monster back to front then you might find some of these courses really helpful so you can check out this one this one is a learning marketplace something like udemy so it is a really cool massive project that you can use in real world and in fact i have built my own e-learning marketplace let me quickly show you that one is codecontinued.com so this project is pretty much based on the uh the code base that is used in this course all right so you can see this is a platform where our users can join they can become instructors start creating courses adding lessons and you know go through the entire workflow of becoming instructor or they can just continue um using the application as a student just like in udemy and you can see they can enroll into free courses paid courses a whole there's so much more going on here so this project will prepare you to build something like that not just another toy project but the real project where you will gain real skills everything starting from absolute scratch so if you are interested in building search real world um full stack application check out these courses you can search more and then you will find you will find a lot of my courses here in the very first page okay so check that out there are some other cool projects as well you can see this is a e-commerce application you'll learn to build in this course and i have the demo for this one as well uh cloudspace.com [Music] okay so this is the awesome ecommerce application you'll learn to build in that course if you're interested make sure to check it out all right and finally let me also show you one i have too many courses there to be honest that one is react node aws you will build a multi-user kind of a community platform here if you have heard of something called hacker io hacker. it's a clone of this this project it's a very successful project and i have the live demo for that one as well it's uh [Music] stack.com all right so you can see here some of the things the images they are broken at the moment but you can see you can go to the react category you see all these links submitted into that category and you can see the most popular ones there's a login and registration system all right so such a cool application you'll learn to build in this course and i have many other courses as well for example let me show you one more all right one more if you want to build a search engine optimized real-world multi-user blogging platform then you will find this is a very cool authentication project as well and that one of that one you can search for next next yes if you search so this is also using next and i should have yeah this is the one multi-user seo blogging platform this is a really cool project as well and i have the demo site for that one as well one man code.com all right so this is a really really cool application that you can use in real world all right so people can sign up and they can start creating vlogs okay so more than one user can create blogs and they can manage their blogs they can update delete and it is all using next day so it is fully seo optimized we have a contact form as well plenty of blogs you can click on the blog again it's using um reads text editor we got categories we got related blogs commenting system there is so much more all right so that let's let's stop there because i have too many courses if i'm going to introduce all of them to you we'll be spending hours here all right so let me close this all right and we're going to start building this awesome chat application from absolute scratch all right so let's go ahead and start creating this beautiful chat application so first decide where you want to create this project i'm going to create inside this udemy folder all right so here let me create a new folder let me call it let me call it real time real time youtube chat all right now let me create two folders inside this we're going to have a node.js and socket io server and react and socket io in the client side so we're going to have two different projects backend and frontend all right so let's start with creating the folders so let's create one with the name of server and another one client all right now let me drag this folder into vs code all right now here what we're going to do is first we're going to work in client side and then we're going to go back to the back end okay so here you can use the integrated terminal but i like to use a different one just so that it is a bit more there's more clarity all right so let me use terminal [Music] all right so here let me navigate to this folder cd udemy that's the folder i have this folder so let me get inside that cd real-time youtube chat and here we have two folders client and server let's start from server sorry client so cd cd client and then we want to create a react project here and here make sure you have latest version of node you can check the version i'm using the latest version version 16. if you don't have the latest version you can always go to nodejs.org and download the latest version all right so i'm inside the client folder i'm going to create a new react project using npx create react app and then we don't need to give the name for the folder because we are already inside this client folder so we can just use dot all right so let's hit enter it will install the fresh react project within this client folder [Music] so it looks like it will take a while so let me pause the video once it is installed i will be back all right so you can see it has been installed now i can get inside this project so cd client oh sorry i'm already inside client okay that's fine so what we can do now is we can install some npm package that we're going to use in this project so let me use npm install we're going to use this react to widget so react chat widget this npm package which will give us this nice looking of the chat widget right you saw in the beginning of the video so we're going to use that we're going to use react router router dump for the routing we're going to create multiple pages even though we're not going to do anything i'm just going to show you how you can create multiple pages because this chat ui doesn't matter on which page you are you could be on homepage you could be an about page it doesn't matter how the ui will be there right so i'm just trying to create a scenario where you might be using it in a real-world project right so in real-world project user will be landing on the homepage then he might go to about page services space things like that but the ui will always be there for real-time chat all right so that's why i'm crying um trying to create a few more pages just to give you the the real real world feel all right so that's real crowded dome and we're going to use socket eye in the client side as well socket dot io dash client okay let's hit enter now you can see socket io is something you can use in client side and server side both okay so this is the package we can use in the client side and for the server side we just need to install socket io which we will be doing a bit later all right so i've got some version issues react chat which is requires 16 let me use this with force just go up and run the same install command with dashed as force okay so looks like it's successful next we may use bootstrap just for a quick um layout and styling so let me use that as well nbm install bootstrap all right so that's done let me quickly check the package.json file make sure everything is installed so we got react router socket dial we have the bootstrap as well and react chat widget profit all right so we got the necessary packages as well now let's start the server let's have a look and we'll start [Music] let me make this a bit small and have a look at this [Music] all right so we got the react app nothing there at the moment so let's go ahead and start creating a few pages first so let's quickly go to source folder let's create a new folder pages and inside here let's create one page for home let's create another one for about and let's create one for um contact all right so let me quickly create a simple component console equals to we can just return um div with class name since we have a bootstrap we can use class name container and type this create another d with the class name of row and inside here let's say h1 give this a class name of text center and let's call it home base let's make sure to export default home okay so we got a homepage return we got some issues here okay we got a bit of a typo as well let's fix that up okay prettier is not auto formatting the code something's not right const home all right so what i did is i took a pause from the recording and all i had to do is quit vs code and restart again and it started working for some reason it it had some issues i have the prettier plugin so that will auto format my code as each time i save so if you don't have that plugin make sure you use that that's really helpful that's called prettier all right okay so i've got this home page let me just copy that and paste in about and let me change that to you can do that using press the option in your keyboard and then just click here to multi-line about so that's how about page let me copy that go to contact paste again let me just option hold the option key and then just click here click here let's change this to contact perfect so we've got these three pages let's try to show those pages so you i'm sure you already know the basics of react so we have the app.js this component is being rendered in this index.js you can see it has been imported here and it has been rendered using the render function this is the first argument the app and second argument is the target element by the name of root which is here in the public folder you have div with id of root so this is where the react app is being rendered all right so make sure we import those pages here in the app digest so that we can show those pages so here in app let's import some of the components we need from react router so import by the way this code you can find in the official docs as well probably it's a good idea to copy from there so let's go react router don't let's search so they have the quick start on the web so you can see here this is the basic example they have imported a couple of components and they have the navigation link and they have this functionality here on each route they are rendering certain components i guess let me just copy that import okay so we importing those components from react router dom and here let me just get rid of all that and instead i'm just going to use the browser router we are importing as router so let's use that component to wrap everything up okay so inside router we're going to um so it's component based on the path so on the homepage we will show home component and in the contact you're going to show contact all right so router route path for home page we can show the component called home and let me just copy that paste two more time next one is for contact we're going to show contact base contact component and about we're going to show about let me actually put this at the end okay so we got three page home about contact let's make sure to import these components okay so let me use much line again import home from pages okay so for this one about and for this one contact all right so we have those components we import and we render it okay so that means now after component previously it had just basic the logo and some text but now we are using this router and it is showing components based on the path all right so come here and give a refresh and you can see we are on home page because we are in the forward slash right now if you go to about let me make sure it is a small smaller let me go to about okay so we have the about biz if you go to contact we have contact base now you see it is repeated that's because we can pass one more property here exact otherwise what it does is it shows the home because it is power slash and anything after that it shows that and this one as well all together so to avoid that you can use exact all right so now you can see on contact you see the contact page on about you see about if you go to home you see home page perfect okay so that's great now since we have installed bootstrap why don't we just uh import that as well so import to use bootstrap we can directly import from node modules so to import from node modules you don't need to give a path like that okay so directly by default it will import from of this folder so import um actually let me just double check bootstrap bootstrap dash dist dash css bootstrap.minified version of css let's import that i'm pretty sure it will work okay now you can see immediately the font styling has been changed and since we used text center class name it is centered in the middle of the page that's beautiful now i don't want to spend time on styling this app so let me just use padding 5 display one bg alert okay so that class name is not there it's the new version version five doesn't have that okay all right so let me use that let me copy that go to contact apply that so that looks a little bit better about perfect so we are on the homepage if you go to homebase you might write some paragraph lorem by the way lauren have some another plugin yeah you can use you can install and use in vs code it will help you generate some dummy text during development for example i can type lorem and hit tab and it will give me some a text here you can see it's pretty cool okay so i can go do the same thing here horizontal line p and i can give lorem i can give number as well 200 and it will give me 200 words i guess if i go to about 200 characters next one let me go to contact horizontal line learn 300 okay perfect so we've got these three pages now if you want you can even add a bit of navigation which can be shared on all the pages and if you want to do something like that maybe you can put that in app.js itself okay so why don't we create a nav component you could put it in a different page i'm just going to put here just for the sake of simplicity and by the way um you can always use curly brace and use written keyword or if it is going to be just one block like it's a one div or one a nav something like that then you you can just do it all in one line as well so for example let me actually quickly go to bootstrap and grab a very simple navigation example make sure you are using version 5 the latest one go to the docs and here source for nab not the nab but just the navs okay and let's copy something like this really simple one let's pick this one this is centered so let's copy that come here and let me just paste that all right now you can see this is a plain html which is which looks kind of similar with jsx however we can convert this one so only difference here is class you have to change this to class name but for this you can use another plugin in vs code that is called jsx to html so i have that plugin already installed so in that case you can just select right click and you get this option convert html to jsx so you click here and that will convert this html to jsx so it's nice and easy to use all right so if you didn't have that the only difference here is the class name previously it was class now it is class name all right so we don't need this active so let me get rid of that so we have one two and let me just get rid of this disabled one as well and let me just copy it one more time okay so we got these three links let's go here actually before we even go there we have to use this component so nav component you want to show on each and every page right so in that case you can put here nav so inside router we have net which will be shared by all the pages and we have all these routes to solve different com components all right so let's have a look okay so you can see we have the navigation that is saved by all the pages now at the moment they don't take us anywhere so what we can do is we can um use the link component which is already here from react router so we can use that so instead of a instead of anchor tag we can change them to link link and instead of headstave link will require you to use the two property and this is for the home page we can give this name of form [Music] make sure you replace a with link let's do that first here here here and here okay so that's two home this one we can do about let's call it about and for this one contact we change this to slash contact all right so let's give this a try now you can see home about and contact we can click on about we can click on contact you can see there is no page reload because we're using the react router dom it's a component based routing beautiful okay so we got this basic website here now what we want to do is we want to add the chat functionality we will show the icon here floating icon here when the click we will show the chat widget and they can start typing the messages and you can see the replies and all that you know their standard chat functionality so let's focus on that so we're going to go to homepage so let me just close out the tabs let me close the sidebar as well all right so here first thing i want to do is import the widget from the package we installed earlier we want to import the widget from react chat widget [Music] i'm sure you have already installed this one if not make sure you install that and with this we also need to make sure we have the css for this one as well so react chat widget slash library styles.css so we are importing the css from node modules as well okay so now we have the wizard now to show the widget it's very simple so we have this written div container so at the end let's show that widget widget okay and if you do that when you save immediately you will see this beautiful widget how cool is that right that's awesome now at the moment nothing will happen you type the message it comes here but obviously we didn't get any replies because we don't have the a server we don't have the socket dial anything like that but you can see it immediately is quite impressive so the next thing you want to do is handle the user's input when the user types this message you want to grab that so that you can send to the back end and get the replies things like that right so first focus is to grab this user input and do something with that so we're going to just uh start with console.log let's see how we can grab that and console.log all right so for that with this package we get this function called handle handle new user message all right so for this one we can create this function we can use the same name okay so let's do that here const this function name and this will give us new message when you use the types in we get that message here all right so we get that as an argument so we can try let's try console.log let's say new message incoming [Music] and let's try printing that message all right so by the way this um example everything you can also see if you visit the official talks in npm okay so if you're more curious about this one make sure to check out their npm package as well okay so let's give it a try hello and as soon as i hit enter you can see new message incoming hello what's up okay so this is how we can grab the user input that is great now before we continue doing anything with the user input let's try to greet them so whenever they land on the land on our page and click on that widget for the chat let's immediately show them the welcome message some kind of message here right so let's do that so for that we're going to use the use effect hook so let's import that first use effect from react [Music] and use effect runs when the component mounts so actually let's just um yeah let's do it here use effect it takes a function as an argument we give our function and second argument we pass the empty array okay so what we want to do here is this component gives us another function add response message okay so we can use that function so whenever the component mounts we use that and we pass some message as a string let's do it welcome to this awesome chat okay so this way we can add response message and this component is uh smart enough to receive this message so you come here you can see immediately welcome to this awesome chat okay so let me give a refresh so you can see as soon as user lands they will see this kind of notification give a page refresh you can see that and when they click that notification is for this one welcome to this awesome chat that is beautiful perfect now the next thing we want to do is when they type something in we want to send them some kind of a response right so that means before we give them some response we want to send this message to back-end and from back-end back-end would know how many connected clients we have at the moment so all those other users messages we can send as a response okay so here at the moment we just console logging that's fine now what we want to do is now send the message through the back end api so we get this user message sent to the backend so that backend knows how many connected clients are there and then we can so all the user's response here i guess the add response message for the moment let me just hard code response okay so when user type something in we this user expect to get some kind of response okay so let me give a refresh okay so we greet them with that message user will type something say hi and then the restaurants will be coming from the server at the moment which is hard coding but obviously it will come from this server okay that's perfect so that means we want to have our own server which can receive this message and then with the power of socket ios functionality we'll be able to broadcast this message back to the clients so that means we're going to take a break from client side and head over to set up our own server so let me close this go to server and here we don't have anything at the moment create our own server using express and socket io all right so here this is the client side running let me open another tab command t let me go back let me get inside server and here first we want to use express and then we want to use socket all these npm packages to use all those packages first we need to initialize our project with npm and that's quite easy we can get inside this folder first and then we can run npm init that's why okay so that will create a package.json file and now we can start installing npm packages so we want to install express we want to install circuit io and we also want to install node mod all right so let's hit enter okay so that's done we got those packages here perfect now we can create the entry point for our server let's create a new file let's call it server.js okay so here to create our own server we can import now in react we import like this express from express but in node.js we can't use that because node.js just doesn't support import by default but there is a way what you can do is you can install another npm package called esm so let's do that npm install es esm okay now we're going to use asm um when we run npm start so we want to run npm start command so when we do that we want to use um esm so node moon first of all nodemon will continuously run our server node1 dash our esm and then we want to execute this file server.js which is going to be the entry point okay so let's save this file now with that we should be able to use import okay so that's import express now to use express we need to invoke this as a function so cons we can put that in a variable app equals to express we invoke express and then um it wasn't actually necessary to uh create express server i could just create a socket our server but i'm doing it because um most likely you want to have a standard rest api with express and you might also want to add real-time functionality all right so this way you can continue using it as express server and also be able to use as a circuit io server okay so for that we're going to use the core node.js module called http okay so const http equals to require by the way we can use require and import all together no problem there so require http from core node.js module so this is not something we have to install from npm it comes by default with node all right so require http and this gives us this function called create server okay this is a function and we pass app which is the express app so you can see here the using the http module we have created the express server as well and now using this http we can uh create socket ios server as well so it gives us this functionality um this flexibility okay now let's quickly give it a try as rest api just so that um if we need to we can continue using add using it as rest okay so request response we get these object so we get the request send some kind of response get the request same send some kind of response so express is basically a request response handler you can think of it like that so in between obviously you will do a lot of things authentication database queries things like that but the the in the in the heart of express you get the response you do something with that you send the response like a request response all right so if we get request to slash api let's try to send some dummy data let's send json so you can see i told you these are objects these objects have a lot of these functionality a lot of the functions one of them is json response dot json so you can use that to send json data as a response so let's say data and let's say hello from node.js api again so this way you can create um rest api as well now we need to listen so we can use http listen we want to listen on the port number you can give any port number let's use 8 000 and that's all you need to do but if you want you can use a callback function as well let's use arrow function let's write something um let's say server is running on port 8000 okay so that is pretty much it we can give this a try let's see how is our express server is working okay so we can try making requests to slash api now before we even do that make sure to run nbm start now nodemoon will start up our server or something is wrong something happened here let me have a look so okay that's a typo that express okay express our ess sorry about that okay so we have our server running on port 8000 we can give this a try let's try making requests to localhost 8000 slash api and we get this domain data as a response so our express server is sending us some json data perfect now you can continue building your rest api no problem however uh here we want to focus on socket io right so we want to create a socket io server so for that what you can do is you could write everything here but i would like to modularize the code so let's create a new folder you can call it anything you can call give it any name let me call it control controllers all right so here um this real time we're going to build a chat app so let's call it chat chat.js all right so here in this space we're going to create x um create socket io server and have all the functionality we need all right so that means we need access to http all right so just like um the http is creating app um the express server here we need this instance of server http in this file as well so that we can give it to socket dial to create the real-time server okay so that's that's easy what we can do is first we can import this file let's quickly do that import we want to import that chat from controllers slash chat and then we just need to pass this http to this set control to check invoke that and pass http simple as that all right so this way http is accessible in this file all right so make sure you import that and pass this as as an argument and come here and let's try creating a circuitry server so we can export a default this function we receive http and here first we're going to create um socket i server let's call put it in the variable io equals to require we can require socket.io which we have already installed from npm and we can immediately um execute so immediately execute with http as for that's the first argument second argument we can pass some to avoid course error okay so of course [Music] we can set the origin you can you can i think you can give this wildcard to allow from connection from anywhere but in our case let's uh restrict it to our client side which is running on port 3000 okay so you can give array of the domains more than one if you want to so let's use http colon slash slash localhost column 3000 [Music] okay so that that is all we need to create um circuitry server now our server should be able to receive the messages sent from the client okay so whenever that happens we build a connection okay so this gives us this function io.on connection on connection think of these names as the the endpoint for example in the rest server you could have something like api slash users and in that case you might go to the database fetch all the users from the database and send some adjacent response so this uses is the end point right so that is um that is the the kind of identity all right so the similar to socket i we give them the name the event names we call them like that so you could call you will be writing your custom names here but this one is a default one okay so i on connection when the connection is established you get the socket all right so through socket you will be able to receive the message you will be able to get information about the socket for example the socket id so let's give it a try console.log socket.id [Music] all right so as soon as the connection is established with the client we should see this socket id in in the console okay so to give this a try we can go to our client side let's head over to our react app and try to establish a connection to our server all right so let's go to home and we have already installed that package so let me just import this structure circuit on the io from circuit io dash client okay so we import that and let's put it in a variable socket as well which is going to be io and we need to give the url here http colon slash slash localhost 8 000. so that's our societal server url okay so we import io from this package and then we pass the url to this all right so with that um we should be able to establish a connection so handle new message so we have that in that case what we can do here we can send this message to our server right we can give this a custom name and send it back but before we do anything let's just go and have a look in the console because at this point our client must have established a connection to our server so we must see this console log and you can see we have got the console log circuit id perfect now let me just try let me open a new window and let me try again localhost 3000 and you can see another circuit id the has been counter locked beautiful okay so that's great now the next thing you want to do is just you don't want to just print out the id instead you want to send this message the user whatever type they typed in so this message you want to send to your server right so server knows all the connected clients so once we get that message here we can broadcast to all the connected users that's how real time is possible right so when you use the type something in everyone else the connected users will be able to see that message okay so let's go back to server in fact before we go to server let's just go to home and here let me just comment that out right so what we want to do now is we want to send this message right so socket we have the socket here dot emit using this emit function you want you can emit the message so you can give your mail um this so you can give this a unique name okay so this event let's call it send message so this is something you can write anything you like just try to write something that makes sense so we can call it send message and we can send this message new message now when you emit the message with this name this should be we should be able to access this in the backend all right so let's go to backend and try to access this message with this name let's go to server so each time user enters some message we should be receiving that so let's go to chat so instead of console.log what we can do is we can listen to that event so socket dot on okay so connection has been established so we get that circuit instant so socket dot on send message so that's the one we're sending from the client side right so on that we get the message here right so we can log that using a callback function so you can see circuit.on function takes multiple arguments first one is the name the name the event name and second argument is the actual message which we can receive in a callback function here let's choose arab function so in this callback function we receive that a message and for for now let's try console.logging that message from client message okay so when you send some message when you type something in we should see that in the server console let's let's have a look hello and you can see message from client hello cool all right so let's try another one let's create another connection how are you and you can see our server knows all the connected clients and all the clients whenever they're sending the message it is able to receive that's beautiful now that's great but just console logging is not not super cool what if we could broadcast this message to all the connected users that would be cool right so we can do that using uh socket.emit just like we did here in the client side we emit this message with this name so we can do something similar in the server side as well all right so here in the chat let me do that socket dot emmet let's emit um we can give this a unique name just like we had the send message coming from the client we from sorrow maybe you want to send something like receive message all right so let's send the message back to the clients all right so we are emitting this may receive message to all connected clients here all right so we have the two users at the moment let me give a quick refresh and actually you will not see anything happening here because even though we are emitting this recent message we are not actually handling this in the client side so why don't we do that our server the client side will send the message to server server is sending that back to all the connected clients so we should be able to receive this message back here in the client side with this name recent message let's try that so add response message um let me just go on top here so we emit send message and then now we can check for the server message so socket on to send out we you use emit to listen you use on so on receive message if you get this event coming from the server on this event we get again we can use the callback function where we will be receiving the message right message coming from the server so in this case now you can come here instead of this hard coded response cut put here and here you can put message that coming that is coming back from the server okay so this way whatever message will be coming from the server will be from multiple users right so in that case let me just give refresh one more time so we have two clients here let's say hi and i've received that message back hi this user hello receives his own message again it receives his own message as well but it is duplicate that's not really cool okay so you can see that's not really useful so what we can do is instead of here in the server instead of emit you can use broadcast so emit what it does is it emits to everyone including the user who is sending this message himself so that way he receives it twice and that's not really helpful so what we can do instead of emit you can use broadcast so the difference between that is broadcast will broadcast this to all the clients except the one who has who is sending this one so here instead of circuit.emit we use dot broadcast socket.broadcast.emit receive message and we uh send it back to of the connected clients okay so let's give it a try [Music] hi okay so we got that hello um right here okay so i'm chatting with myself nothing's happening here me here what we can do here is let me go to home instead of writing it here we can put this in use effect just like we had this automated reply in the very beginning we can move this code let's move here okay so that will be the first uh default message and then anytime we receive a message from the server we can add that as response okay so let's let's give it a try now hi hello how are you okay i think okay so i have the type here broadcast that is not right so b are oydy okay so that's one that's right one broadcast that could have been the issue let's try all right i guess now you can see it has been two now anyone there now it is three so now it is receiving message so when he sees the notification you can click here and he can see welcome and then there are further more messages as well here i'm here and you can see i can see my message and they received that as well cool we can open one more window here let's try this one who's here it's late night and this guy says recording real-time chat match okay that's pretty cool all right so you can see we have multiple user real-time chat that's awesome now let's work on this widget here in the home so this widget we can pass some additional props as well so you can see we have the default title and subtitle so you can change that so let's say title you can call let's say welcome again that's caps lock now you can give subtitle chat with our let's say customer service something like that okay so that's how we can customize title and description we can even give the the profile avatar as well so i think we have we should have the logo here we have the logo let's go to app and we have the logo so we can import that in home so that is one step up so go one step up from here and then from there we have the logo so that's the one we're importing okay so instead of this logo you could have the image file anything that doesn't matter so you import that and we can show that as profile profile avatar and let's use log import in body okay let's see okay so we need to make sure imports are always on top so this one we can put it on this perfect now you can see the replies have of the logo there what's up not much all right so you can see the user himself has this blue background and other replies will have this one now it would be nice if we knew what's the name of the user because at the moment it's really confusing right so why don't we give each user whenever they join our chat room we give them the unique name by ourselves automatically we give it to them that way we know who is who we are talking with right so that's really important to know otherwise it's it's kind of very messy all right so let's see how we can do that and by the way to do that we can use a npm library that will help us generate some unique names so to give unique name to our users we can use this npm library let's install that in our client folder npm install unique names generator [Music] and if you want to know more about this package you can also visit the npm page for this library all right so once that's done let's start our server again and now let's go back to our home page and let's import that first [Music] import from unique names generator and so we're going to import unique names generator we're going to import the colors and we're going to import animals so what we're going to do is we're going to use this function and we're going to combine the names we will use the column names and the animal names and we combine them to generate unique names so first we can generate the unique name we can put that code somewhere here const random name equals to unique names generator okay and we're going to pass this object with options for example dictionaries so we're going to use colors and animals and style you can give this style let's make it all uppercase all right so that will give us some random name you can even console.log here if you curious so we can use that so let's use that when we send the form um send the message let's not just send the message but prefix with the username all right so let's use backticks curly brace dollar sign so we're going to send the message along with the name all right so dollar sign curly brace random name does and the message so that way each message will have the username prefixed in the beginning and another thing you can do is come down here and in subtitle instead of writing that we can um show the user that user he or c has been joined as this unique name right so let me use backticks joined as random name perfect okay so with that each of our messages we should have the username are prefixed in the beginning all right and for this to work we don't have to do anything in the backend everything stays the same we're just sending the message when we receive the message we add that response okay let's give this a try um try one more time let's give refresh all right so this guy opens up you can see joined as aquamarine tiguan all right so this one is joined as this name and this one is joined as this name so maybe instead of welcome we might even we should use that here let's copy that and let's call it welcome welcome username and then we saw that actually let's just remove welcome just doesn't look good and just leave it like that random name perfect okay let's give it a try so we get the username join as that name all right anyone there okay so we've got the message here okay so welcome this user said hi this user said um something else [Music] right here okay so me is rose i could have said rose rose here [Music] and let's say this user he is as black acenda again all right so you can see this way users can chat in real time cool let's wrap up this cool project cheers guys good night

Channel: Ryan Dhungel

Views: 3,851

Keywords: react, node, socket.io, realtime, chat, nodejs, react-chat-widget, react-chat-ui, react-chatbox, mern-stack-chat

Id: P3xT_CddGtA

Length: 70min 37sec (4237 seconds)

Published: Fri Jul 09 2021