Realtime Chat App with React, Node.js, Socket.io | MERN Stack Messenger Clone

hello my friends today we are gonna be building this chat application using react node.js mongodb and socket io we will fetch our previous conversation from db and when i click one of them it's gonna fetch all messages of this conversation and i can send message to db and we are gonna be using socket io so it's gonna be an instant jet application if i open up in the new tab i'm sending a message and it's instantly here i will write something here have some it's really important to learn absolute implementations because nowadays almost every big application use them so i think it's really good project to start with by the way we created this social media application from scratch if you didn't watch any i highly recommend to watch them first maybe at least the last part because we are going to continue with this design and back-end api okay i hope you will enjoy it if you want to see more web projects like this you can subscribe the channel if you are ready let's get started ok this is our main folder and here is our rest api with node.js and mongodb and this is our client site okay if you don't have this folder you can go to my github account and here you can find youtube repository and inside there is a branch here my social app if you go inside this repository and here you can pull this branch or download as a zip and you can open in the code editor if you download from github you should install first this dependencies to do that i will open two terminals here and first one will be our api site i will open this folder api and i will say npm install i will do the same thing for react application i will say cd client and npm install so after that it's gonna install all files and it's gonna be ready to run okay it's ready right now if you didn't watch previous video i'm just gonna give some short brief here our rest api we have models here post and user and our roots we can register and login with these users and here update user delayed user we can get users get all friends of one user we can follow and i'll follow them something like that so if i run this application it's not going to connect mongodb because you don't have here dot emv file so i will close them and here i will create my eme file and inside i'm gonna paste my mongodb url so we are gonna keep this url in the emv file so even if we upload this file in the github or in other sharing platforms nobody can see this emv file ok so i will close this right now i can start my rest api i will say yarn start ok backhand server is running and connected to mongodb and for here we have a react application in the source folder we have pages on page login register page and here user profile page so i'm gonna create one more page here it's gonna be messenger messenger and inside this file it's gonna be messenger.jsx and my css file okay so i can create my function here i will say rfc so i will indicate here my css file it's going to be messenger.css and here i will give class name it's going to be messenger so let's write here something and try i will run my application yarn start so as you can see it's coming directly to register page because we don't have any user so i will go to login page and here let's say jane gmail.com and my password i will log in okay right now it's in home page so how i'm gonna open messenger here i will go to app.js and here we have router and when we try to go to login page or register page it's checking whether there is a user or not and if there is a user it's going to home page if there is no we can open login and register page so i will do the same thing i will copy this route and here if i try to go to messenger page this url but this time it's gonna be if there is no user it's gonna redirect to this page which is register right now so if there is a user we can go to messenger page okay let's try here i will say messenger and we are here okay i will close this i can close my github and here this folder right now i'm gonna arrange my page here firstly it's gonna be top bar before it is messenger i will say top bar so i have to import this component i will say import top bar from this is page folder and here components top bar okay so i can't write this like that because i can't return multiple components so i can create here one do or i can use fragments okay let's try also so there will be three elements here one of them will be chat menu and here chat box and here there will be our online friends so i will delete this and here i will say chat menu and chat box and finally chat online so i'm going to css file and here i will say messenger our main view i will give first height if i say here 100 vh it's gonna overflow because we have a top bar here so what i'm gonna do i will say calculate and inside 100 vh minus 70 pixels so i will make this container flexbox because our items will be horizontal menu box and online so i will say here chat menu i can give specific views but i will say here flags three and half i will duplicate this and for box it's gonna be five and half and it's gonna be three so what i did here i split this container into 12 parts and three and half will be menu five and half will be chat box and others will be online menu right now i'm gonna give wrapper for each divs i will say chat menu proper and here chatbox wrapper and online marker why i did this because i'm gonna give some padding inside these divs so if i give directly this menu or chat box it can change these sizes i don't want to do that so i will write wrappers so let's say here menu and box and online okay but there is something wrong here it should be around here let's check ah okay i didn't say online here okay perhaps let's give padding for these droppers i will copy this and here chat menu wrapper and chat box wrapper and online and i will give padding 10. let's give background color and see better okay as you can see we have padding so i will write here height a hundred percent so it's going to contain whole height here helps so let's delete this right now i can start adding something inside this menu i will go to here and firstly i'm gonna add input i can get placeholder it's going to be search for friends and class name let's say chat menu input i will copy this and in the css let's write actually after this menu i will save it and i will give padding from top and bottom it's going to be 10 pixels and for right and left it's going to be zero i don't want any border it's going to be known but maybe i can give a line here so i can give border bottom it's going to be one pixel solid and let's say gray right now i can add here my conversations here after this input i can create your divs but i want to open new component here so i will say conversations i will create quickly conversations.jsx and css file actually it's gonna be singular okay i can create my function ifc and here my css file and here class name let's say conversation so it's gonna be two items here first one will be conversation image and conversation name let's create image here class name conversation image and here i will say span and conversation text or name so i will write here a custom image okay if i write here conversation i will call this component and let's see okay it's here our image and name so let's arrange this image and this name i will go to css file and here first it's going to be audio conversation and display flags because it's going to be horizontal i will center these items like that it's here right now i will give padding and here for this image with 40 height 40 it's gonna be circle audio radius 50 let's see okay i will cover this image object width and i can give some space between these text and image i will say margin right 20 pixels okay now for this name i will just say front face 500 it's gonna be thicker okay nice i'm gonna give click effect here i will say cursor pointer okay and when i hover this i will say background color something light gray that's right gray and i can choose lighter one like this let's try maybe lighter okay it's nice i will give margin here okay something like that so if i write here more conversations like this okay perfect so let's create chat box it's gonna be two items here are all conversation and some input to send our new messages okay inside this wrapper i will say chat box top and bottom and here again i will create another component it's going to be message let's close this and here search and inside message.jsx and css i will create quickly css file and class name will be message so let's decide here what we are gonna do so here is gonna be user image and then it's gonna be message and under this div it's gonna be a message date so let's create i will say message top and here bottom firstly i'm going to create image let's paste this image here and after that i will create p tag and inside let's say hello okay i will give class name message image and for this ptac message text so inside this bottom i will say one or echo so let's write here and see at the same time i will say message component i will call this actually i will create a couple times more okay i will go to message.css and here i will say message is going to be display flex but this time flex direction will be column flex direction column let's arrange this image first and see better we 32 height 32 and it's going to be circle and object with core so let's see okay this is under this image because we didn't make this container flexbox i will say here message top it's gonna be display flex okay nice i will give here space i will say margin right 10 pixels okay and for message text i will give some padding inside this text border radius let's say 20 pixels and background color is going to be something blue i will say 77 i have to okay let's change this text color it's going to be just white and i will give some max width because when we write here let's say something long like this as you can see it contains whole screen here i will say max bit it's going to be 300 okay so i can give margin for each so i will say margin top 20 pixels okay nice i can change the state message button font size 12 pixels and i will give margin again okay so there are other users message what about our own message i will come here and i will take a probe from messenger it's going to be oh i will say if this message on and on class i will say align items flex end so let's try i will give own class here as you can see they are in this site right now let's change this color also i will copy this and here if message on it's going to affect our message text i will say background color light gray but lighter and font color will be just black something like that okay i will reduce this like that and i will delete them and here i will copy this and i'm gonna create a logic here i will say if there is own it's gonna be message and own if it's not it's going to be just message so in the messenger let's give here on true as you can see first and third one is from another user and this is from us okay nice right now i can create your input here for chat box bottom let's create text area i will delete them and placeholder i will say write something let's give class name here [Music] i will say chat message input or whatever you say and after that it's gonna be a button i will say just send and for class name chat submit button i will copy this where is our css file here i will take this here and after this chat box i will say chat box bottom margin top 5 pixels and i'm gonna make this flexbox because text area and button will be in the same row and here i will just center them so let's check so i will separate them it's gonna be end of the chat box so i will say justify content space between okay of course i'm gonna make this bigger i will say chat message what was the name chat message input it's gonna be with 80 percent and height let's say 90 pixels and i will give padding inside something like that let's arrange this button chat submit button i will say with 70 and height 40 there is no border and border radius 5 let's see okay i can change color and give cursor pointer and background color let's say till and text color will be white nice but as you can see our messages height is really small if i write here more message like that it's gonna overflow as you can see so to prevent this i will go to this wrapper and here let's say after this i will say display flex and flex direction will be column cause our messages and input and here it's still like this because we didn't say overflow scroll for this box i will say chat box top it's gonna be right a hundred percent and overflow y is gonna be screw okay have some but as you can see it's really close to right i will say padding right it's going to be 10 pixels okay it's much better so we almost finished our design let's create this online section inside this wrapper i'm gonna create another component it's gonna be chat online let's close them let's close them actually from here also and here i will say chat online chat online jsx and chat online css let's create here chat online css okay class name chat online and inside i will create another deal it's going to be friend due and for each friend it's gonna be image container container and inside image and after that it's gonna be chat online page now for this image let's actually copy from this conversation i will copy this source okay so after this image container i will say chat online username or just name let's say john doe actually it's not going to be there it's going to be spam okay let's write your chat online okay and let's go to css file i will say chat online friend our friend container it's going to be display flags i will center items and font feed will be 500 for this username and i will say cursor pointer for this image it's going to be chat online image i will say with 40 height 40. border radius 50 percent and object with car semicolon here okay let's see it's different name chat online image i didn't give okay i will say class name chat online image okay perfect so i'm gonna indicate here online page so it's gonna be position absolute if i'm using position absolute the parent div should be position relative let's write them position relative and for this page i will say position absolute let's give first width and height 10 pixels height 10 pixels it's gonna be a circle and background color will be lime green let's see first as you can see it's here but i set position absolute so i can move this here so i will say top zero right zero okay nice maybe two okay it's better so i can give border for this image i will say powder and one pixel solid and white maybe some margin oops not for image it's going to be for image container okay nice maybe i can reduce this image it's really big perfect so if i write here more friend it's gonna be like this maybe i can give margin top here okay nice so we created our design right now we are gonna use our api and we are gonna send our messages and we are gonna check our conversations and check these conversation messages okay so let's close them i will close this client and here for api i'm gonna create two other models here first one will be conversation and second one will be message and as you remember what we are doing i will just copy this and inside conversation i will delete them and here it's not to be post schema i will choose this this and this one it's going to be conversation and inside it's going to be only members it's going to contain our user ids so i will say type it's gonna be array okay that's all because it's not gonna contain anything it's gonna be just conversation id and members let's say members okay so i'm going to copy this and inside message i will change name it's going to be message and inside first will be a conversation id type will be string and sender type will be again string it's going to contain our sender id and finally i will write here text let's put here comma and text and it's going to be string again okay that's all so i will go to roots so i'm going to create conversation and message roots i will say conversations dot js and one more messages.js let's close them and remember what we are doing here we are calling express to here and then our model and then finally we are exporting this router so let's copy this here and i will export okay i can close this right now we don't need this post i'm gonna call my conversation model i will say conversation so i will copy this and i will do the same thing for message let's change it message model okay for this conversation i will create new conversation and i will get conversation of user of a user okay so how i'm gonna create new conversation i'm gonna use this router i will say router and it's gonna be post method inside i'm gonna use main url here and after that request and response okay so let's create first new conversation object i will say const new conversation so it's going to be using this conversation model i will say new model and inside i will say members it's going to be array i will say request body and sender id i can copy this and here it's going to be receiver id so that's this body as we did before if i open here postman if i write here conversation and if i choose post it's our buddy i'm gonna give here sender id it's going to be our user id let's say something and after that we see we're id it's going to be another user id so this is our body object to use that i will say request and body and inside sender id oops sender so it's gonna take this user id and add inside member and for this one it's gonna take this user id and inside these members okay so how i'm gonna add this inside mongodb i'll write here try and catch block because we are gonna be using async function catch if there is an error i will send this error i will say response i'm going to give here status it's going to be 500 which means error inside db or server and here json error i'm gonna send this as json file okay so to try this i should write here async because we are gonna fetch or add data to database i will say here const saved conversation and then i will say await new conversation and i will say save so if it's successful it's going to return as response i will say response and status code will be 200 which is successful and json sent this conversation okay i will save so i'm gonna open my mongodb here and i'm gonna go to my collections if you remember we have collection here which is social and inside we have users and posts i will go to users and choose two users here first one will be jane and second let's say john i will take this user id here and in the postman sender id will be jane's id and receiver id will be jones id it's going to be conversations if i send it's not going to work because we didn't add inside our index.js i will go to index and here as you remember we called our pulse root user root i will do the same thing for conversation and for message so how i'm gonna use these routes i will come here if you remember for posts we are using this url for users for authentication so i will copy these and first one will be let's take this and conversation and here it's gonna be a message so whenever we go to this url it's gonna call this conversation root it's gonna look inside this conversation root and when we make host or get request it's gonna run one of these functions for this case we are using post method and main url is gonna look here okay it's post method and main url and it's gonna run this function so let's try i will send as you can see 200 and it's gonna return us saved conversation here but something is wrong here because it's null ah okay it's not capital it's gonna be id so let's go to mongodb and delay previous one we made a mistake there so i will go to conversations and delete this so i'm gonna send new one let's check okay it's chain id and john i will refresh page and as you can see it's here members jane's id and john's id perfect so i can create another conversation let's go to user and for other users let's take this one llama and for body i will write here it's really it doesn't matter sender or receiver because it's inside same array so i will say send okay perfect so how i'm gonna get conversation using user id let's come here and i will say router and this time it's going to be get method it's going to use main url and i will give a parameter here it's going to be user id async function and request and response i will open my function and here again try catch block i will copy this and paste here okay so what i'm gonna do i will say const conversation and it's gonna be a weight and for conversation model i will say find so what i'm going to find i should write here a condition i will say members so it's going to check these members and for example for this id it's going to look into these members and try to find this id okay this conversation includes this id and this conversation also so it's gonna take two of them and send us and for example for this id it's gonna look into this members array okay it includes but it doesn't include so it's gonna turn only this one okay so how i'm gonna check inside this array i will say in and i'm gonna use this id i will say request and params and user id okay so i can send this i will say status 200 and json is going to return this conversation okay that's all let's try i will go to postman we don't need this body anymore because we are gonna use this get method and here i'm gonna write my user id let's say for jane i'm sending and as you can see it returns two conversations first one and second one if i write here john's id and send right now it returns only one okay perfect so we completed our conversation route let's go to messages and for these messages i will say again add and get so i will do the same thing router and post method it's going gonna be main url and async request response i will open my function and inside i will create new message const new message and here new message model and inside i'm not going to indicate any specific body element i will just say request and body so it basically takes everything inside body and paste inside new message okay so try and catch respawn status five and json sent this error and for here i will say cons saved message it's gonna be a wait we are gonna await this process i will say new message and save so after saving if there is no error i can send this saved message i will say status 200 and json saved message okay that's great but before let's look into this model what we are going to send from request embody is going to be conversation id sender and text so i will come here let's delete them and i will write here messages and here i should indicate my conversation id let's look here for example for this one jane andrew i will choose this conversation id and here let's delete i will say conversation id it's gonna be this string and for sender who is gonna send let's say chain i will copy this and finally it's going to be text hey john i'm jane of course it's going to be post method let's try okay id conversation ideas standard text and our timestamps perfect let's change this and it's gonna be from john hey jane i'm john let's send okay and for second conversation let's write here something also i will choose this id conversation id and from jane again hey lama i'm jane let's send let's look into our messages it's not here because we didn't refresh okay here and inside and here as you can see our three messages absent so how i'm gonna so how i'm gonna fetch all messages inside a conversation let's come here i can close this and for get method i will say router this time it's going to be get main url async request and response again try and cage let's copy this and by the way as you can see we are not making any error handling i don't want to waste time maybe we can take care of this in the future but for now it's totally okay so what i'm gonna do here i will say const all messages i'll say messages and await it's gonna look into this message model and try to find what it's gonna find i'll write in my condition if conversation id equals request params of course we didn't give here let's give conversation id i'll copy this and paste here okay so basically it's gonna try to find all messages which has conversation id is this id okay and then if everything is okay it's gonna restrain us 200 and json these messages i will save and let's try for example for this conversation let's paste here it's going to be get method i will send and here hey john i'm jane and hey jane i'm john so what about other one let's copy this and here oops i will send and it's here there is only one message i have so so i can close this postman and for our client site this react application i can fetch all conversation of this user right now so let's do this i will close them and this api and i will open my client let's close this pages and messenger okay so how i'm gonna fetch all data here firstly let's check our current user after login process i will say const user and i will say use context [Music] which context i'm gonna use if you remember it's here this auth context i will write here alt context i'm gonna import this from here okay so let's check this what we have inside i will go to inspect and here as you can see there is an object and inside this object we have our stick cover picture description everything belongs this user for followings it's following one user there is no followers something like that so if you are confused about this context and this login process and other things i highly recommend you to watch previous video if you didn't before okay let's continue i will write here i use statehook it's going to be our conversations and set conversations it's going to be your state and initial state it's going to be amped array so i'm going to write here use effect hook so what it's gonna do whenever we refresh the page it's gonna try to fetch all conversations from this current user which is jane right now let's give a space here and inside i'm gonna create a function i will say const get conversations okay it's gonna be async function and inside this i will say const response because it's gonna return as a response i'm gonna use here axios await axios is gonna be get method and remember what we are using is gonna be conversations url and additionally i'm going to use my user id user dot id of course i should import these axios okay i can't do this automatically let's write here axios and from axios of course i should cover this with triang and catch error i will just cancel lock this okay let's see this response what is gonna return us i will say console lock and response let's refresh and open our inspect okay it's not working because we didn't give any dependency here it's going to be amp dependency it wants us because it says missing dependency we should add here user or user.id doesn't matter and after that i'm gonna call this function okay i can try right now as you can see we have response and inside data and this is first conversation and this is second one okay so right now i can update my conversation here to do that i'm gonna use set conversations and instead of this console log i'll say set conversation and it's gonna be response and data right now i can use these conversations so how i'm gonna use this instead of writing this conversation again and again i will use here a map conversations and map and for each conversation i'm gonna return this component if i refresh there will be two components here so how i'm gonna use them i can pass this as prop i will say conversation and i'm gonna send this conversation okay so let's go to this component here i can take this prop so let's check here what we have inside this conversation we have just id and memories so one of them is my id and second one is the second users so i can use this id i will create here use state again const let's give space user and set user and use date it's going to be null at the beginning so right now i can fetch this user what i will do i will create a use effect [Music] empty array here for now so right now i can find this user id i will say const friend id and i will say conversation and for members array find and for each element if member which means this first one and second one if it equals our current user id of course we don't have any current user here i can pass this also i will say current user it's gonna be user because remember what we did here okay so i will take this prop also i will say current user right now i can reach my user id of course it's not gonna be equals it's gonna be not equal because we are looking for our friend right now we have this id how i'm gonna use this i will create a function here i will say cons get user it's going to be async function because we are going to edge data and here again const response and await axios which url i'm gonna use it's gonna be users and here let's remember api and usage route as you can see we have a function here it's going to be users url and after that as you can see we have queries here we can find this user by user id or username so i'm going to use user id here if i write here query it's going to be user id and equals this friend id okay of course i forget try catch error and console lock okay let's console.log this and see what we have i will say response and i will call my getuser function here and inside these dependencies whenever our current user or conversation changes this user effect will be run so let's write them current user and conversation let's try okay find undefined of course it should be members right now as you can see we have response and inside data as you can see our friend it's all information and second one data and this is john have some so i can set this user i will delete this and here i will say response and data so i can use this user right now instead of jordan i will say user and username let's see i will close this as you can see john and lama and for these images i will delete this and again so i need a logic here we are using assets url here i will use my emv and here as you can see this is our assets folder i can use this folder i will come here and say cons public folder it's going to be process and emv and this url so i will say here if there is a user and profile picture use it if there is no use public folder and let's check what we have here public images we have person and inside this person we have no avatar.png we are going to use this okay i will say person and no avatar about png oops okay let's check john or lama doesn't have any profile picture so it's gonna use this one have some so let's take care of this chat box i will go to messenger let's close this i will create another states two states it's gonna be current chat let's make this capital and the initial state is gonna be no we don't have any chat here in the initial state okay it's warning about conversations because we write here twice and second one will be messages okay let me explain okay whenever i click one of my conversation current conversation will be this choosing conversation and i'm gonna fetch all messages of this conversation okay so for this wrapper i can actually write here something else for the initial state because we haven't chosen any of these conversations we shouldn't see this so i will say if there is a current chat so i will close here let's delete this one of course i should use fragments and here okay so if there is no current chat i will write here let's say span and inside open a conversation to start a chat let's see as you can see we don't have any conversation and it writes here i can arrange this let's give class name here more conversation i will copy this inside css file here i can say actually position absolute if i do this i should make this container relative which is chatbox wrapper here i will say position relative okay so let's say top 30 percent okay somewhere here maybe less maybe 10 percent okay so i will say font size a little bit bigger and color something again light gray i will choose here okay i can make this center i will say text align center and i don't wanna add a cursor it's gonna be default actually without a line it's better or not let's check okay i like it i will delete this and close this css okay so how i'm going to change the current chat i will come here for each conversation i will create here a deal it's not going to change anything but i can write here right now on click event i will say set current chat and it's gonna be this c so i will write here console.log and we can see better i will say currentchat okay there's a problem here let's check conversation okay i'll say if there is user and here also okay right now i will open my console i will clear so there is no conversation right now if i click one as you can see a conversation with john if i click this conversation with llama okay so if i have any conversation here i can fetch messages let's slide this and here another user fact okay i will create my function get messages it's going to be async function and i will say const response and axios and get method i'm gonna fetch messages so i will write here messages and here i should indicate my conversation id which is currentchat id dot id okay so after that i can update my messages here set messages i forgot again try catch console.log error and here after response if it's successful it's gonna update my messages and response and data so i will call this get messages function and here we need missing dependencies it's going to be chat because whenever it changes it's gonna fire this user fact so i will write here console.log messages and here for any case i'm gonna add question mark because it can be an error like in the conversation component so right now i will say console.log show me my messages okay it's undefined it shouldn't be let's check our network here it's still undefined okay it's here that's something wrong ah i forgot wait it's really important by the way don't forget this async await and try catch so i will refresh and i will choose john right now as you can see our message is here john and from j sorry opposite anyway so if i choose lama as you can see only one object here and it's a lama imj perfect so i can use these messages here right now so i will delete this and here for messages i don't need them i will delete okay so i will use these messages i will say map and for each message i'm gonna call this component and i will say message and equals this message okay i will go to my message component and here i will say before own message let's create this on also so how i'm going to decide this on i will say if message dot sender sender id equals user dot id remember this is our current user if it equals sender id it means we are owner this message okay so i can use it instead of this text i will write here message dot text and here if i write here message dot created at it's not gonna show us formatted version like one hour ago let's see as you can see so how i'm gonna transform this i'm gonna use time ago library here i will say import format and from time i go js so right now i can use this format i'll cover this and here it's going to be format perfect as you can see it's our message we are owner here if i go to john this is our message and this is john's message have some i can fetch again this user for profile picture but it's not necessary right now we will take care of this later and here what can we do more we can add new message let's do that i will write here new message and at the beginning it's gonna be empty and here for text area i will say on change so whenever it changes it's gonna update our message new message it's gonna be e and here set new message it's going to be event target and value and i will give here our value it's going to be new message target okay so if i click this send button i will write here on click event it's gonna be handle submit okay let's create this function chrome's handle submit it's going to be e i should write here e dot prevent default because otherwise when we click this it's gonna refresh the page okay so what i'm gonna do here i can create here message object to make it easier let's say const message and it's gonna be sender sender id will be our current user id dot id and text will be our new message and conversation id it's going to be currentchat.id it's going to be column okay so right now i can send this message it's going to be async function and i will write here try catch error console.log error and here i will say const response is going to be a weight axios right now i can use post methods and for messages i will create new message here and i'm gonna send this message so after sending i wanna see this message here inside this box so what i'm gonna do here i will say set messages and inside this array everything will be same all messages will be same inside we are going to just add additional message here so you can use here spread operator and say add my response and data so let's choose john hello from react i was sent okay i can see here message is not iterable ah sorry it should be messages here and again as you can see it's here it means it's going our db let's try again test and send as you can see it's here if i refresh the page i'm opening john as you can see they are still here because they are in the rdb let's check here in any case i will refresh here as you can see hello from react and test perfect it works so after sending something as you can see it's still here i don't want to see that so here i will say set new message it's going to be empty again so i'm sending as you can see it's empty perfect and one more thing here i will close this as you can see we added new message but we can't see it we should scroll so how i'm gonna scroll automatically to do that i should choose reference for each messages so whenever we add new one it's gonna scroll automatically the last message so i will use here use ref i will say const let's say scroll graph it's going to be usedrav i will import it okay so where i'm gonna use this for this message but i can't use this here i should write here a div don't worry it's not going to affect anything so here i will say rev it's going to be our scroll graph so i can use this right now so i don't want to write this here because it's not only our messages for example when jones sends us a message he should again scroll so instead of this i will write here another user fact and i will say those effects and here our dependency will be messages because whenever messages change we should fire this user fact so i will say screw ref and current i will say question mark here and then i'm gonna use some useful method here i will say scroll into a view so it's going to scroll to the end of the deal but if i do that it's going to be really sharp there will be no transition so i can make this slower i will write here behavior and it's going to be smooth so let's try i'm sorry it should be a question mark here not here let's try again i'm clicking john as you can see it was here let's refresh again it's going to the last one let's test it i will say test scroll i'm sending as you can see it's here so we can fetch our conversations we can fetch our messages we can add new one so we've finished our chat application for this rest api right now we are gonna use socket io and send these messages instantly for example if i open here new tab and localhost i should plug in first of course let's login as john i will log in and i will go to messenger there is something wrong with this image let's check okay we are not using public folder here because it's calling 3000 let's change it i will go to conversation i should use it here let's try again okay perfect so if i click chain as you can see i can see all these messages here but if i send something and come here we can see anything i have to refresh the page to see this new message okay it should be instant chat so to do that some people are using ajax but it's not the efficient way because you are sending requests to your server we are gonna use socket io so what's this socket io socket io enables real time bi-directional and event-based communication okay that's all i think let's go to wikipedia maybe sockatio primarily uses the websocket protocol with polling as a fallback option okay there is some things here so i will explain you so i created some basic presentation here basically it's our socket server whenever any user connect to our application it's gonna connect this socket server and they will have their own socket id and inside the server there is no db it's not writing any data it's not reading from any db it's just connecting to your computer and using only events what i mean by saying connecting your computer the socket server using tcp ib connection so i'm not gonna deep dive into this so let's say this user want to send an event to this user so this user is going to send this sent message event to server and it's going to take this and say ok this is a send message event it came from socket id4 and receiver is 3. so instantly it's going to set this message to socket 3. it's going to be our socket id and sender will be 4 and this is text message it's hard to understand a little bit i know but you will understand everything we are gonna make an awesome project and here we have a cheat sheet you can use this g sheet also we can see here which methods we are going to be using firstly we are going to connect our socket server let's do this actually so right now i will create one more folder here it's going to be our socket server and let's create new terminal here i will go to socket and inside let's create our not application i will say npm init and i will say yes okay our package.json is here to start this with nodemon i will add here nodemon library i will say yarn add not moon and additionally i'm gonna add my socket io i will say socket dot io okay okay they are here so i will say here start and here not moon index.js we don't have any index.js let's create i'll say index.js and inside this i will call my socket io i will say const io and requires it's going to be socket io so i should indicate here my port number let's say 8900 if i write this like that i can't use this inside my client because by default it doesn't allow anyone to connect this server so i should write here i will delete this and my config it's going to be course and i will write here my react application url it's going to be origin and http localhost and 3000 let's close okay so right now i can write this i will copy and paste and inside this after every connection i will write here console.log a user connected okay so i will close my application here i will kill this process so here i'm gonna add library for react i will say socket dot io and client okay it's ready i can start my socket server i'll say yarn start for client also okay i will go to messenger let's close this old one okay i can go to my messenger here source pages and messenger so i can call this socket i o here i will say import it's going to be io and i'm from so get io client so i'm going to create one more use state here it's going to be socket initial state will be null and here let's create next use effect and here the dependency will be m3 i will say set socket it's going to be io and insight i'm going to indicate my socket server url as i said before it's not http connection here so i will delete this i will write ws stands for websocket and here i will say localhost and port number i'm gonna save right now as you can see this user is connected i will refresh this also join is connected also awesome so let's look at this cheat sheet here what it says we are not gonna use any rooms because it's not common chat application it's just private one and here to set something to all connected clients use this one if you are going to send something private you can use io.2 and indicate your socket id and then emit so here is can be a little bit confusing i created something for you let's open it here if we are in the socket server and if we want to send something to client which means our user we are going to use io if we want to send everyone inside this application we are going to use imit if we want to send just one user we are going to say dot 2 and socket id and then emit and the next one if we are client we are gonna always use socket we are not gonna use this audio and if we want to send something to server we are gonna use emit and if we want to take something some event from this server we are gonna use on i know you don't know anything about this but after practice you will understand everything so i wanna send something to users i will use io and imit and i will write here my event name let's say welcome and here i will say my message hello this is socket server okay we send users but we have to take this message in the client site let's create here use effect for temporary i will say use effect so when our socket changes i will say socket dot on because again if we want to take anything from server we will use socket.on i will write event name not last name welcome and here i will write message and after that i will console lock this message let's go to our app and here okay because in initial state we don't have any socket it's null here so i will write here question mark and right now i'm opening my console this is our previous error and here as you can see hello this is socket server i'm going to second user and here perfect so if i want to send this message to not all users just one user i should write here two and i should indicate here so get id and then emit but i don't know anybody's socket id here that because it's changes whenever we connect this application let's write here let's delete this and right here console.log and socket as you can see it's our socket and here this is our socket id pay attention here i will just refresh the page and i'm looking as you can see it's totally different number here so how i'm gonna send private message to user it's always changing so what i should do is creating here user array i will say let users i said that because we are going to change this array so here i will say after every connection take user id and socket id from user so to take this i should send from client first let's delete this and i'm gonna use another user effect actually you don't have to write like this you can use use ref here let's say const socket and it's going to be usedrev and inside i will write this i o and port number so i can delete this i don't need that so in this case i don't have to use use effect again and again i can just use this socket and current so i will write here use effect inside let's check here again what i want to do i want to send something to socket server so i will use socket.emit so i can write here socket dot current and image let's say add user or send user whatever you say and i will send my user id and here my dependency will be user because it can't change so i will save and here what i'm gonna do i will take this user id from socket so let's check again i will come here we are socket server right now and i want to take something from client so i will use socket.on i will say sockets.on my event name what was the name add user and here i will take this user id and and then i'm gonna use this socket id and user id and i'm gonna add inside this user's array but if i say here users.push whenever i connect this application it's gonna add again and again same user so i should filter this first so i'm gonna create here a function const add user it's gonna take user id and socket id it should be equals and here arrow function and first i'm going to check inside these users if the same user inside these users we are not going to add if it's unique everything is okay i will say if users dot sum and for each user insight if user dot user id equals this user id here we can add this user so i will say users.push and user id and socket id okay so i can run this function i will say add user and first i will pass my user id and second socket id i will say user id and second one socket dot id so after adding process i can send all users inside this array to every client because we can take these online users and we can filter them and finally we can find our online friends so let's do that to send this from server to client i should write here io dot everyone i'm not gonna use two it's gonna be just imit and let's say event name get users and here i will pass my users this array okay to take this i will use it here socket dot current dot on right now we are not sending anything we are taking from server i will write here get users and users and here just console lock this and see as you can see this is jane so get id user id and this is john let's close this tab but before i will open new one and let's copy this if i close this as you can see nothing happens that because we didn't remove any users for any disconnection so let's open again and here i will write this connection function so here i will say socket.on and here this connect and a function here if somebody disconnect from this socket server i will write here somebody or a user disconnected and after that i will remove this user from this users array so let's create this function also const removal user so i will take here just socket id so i'm gonna filter this array i will say users and new value will be user stored filter for any user i will say user dot socket id if it's not equal this socket id here our users array will be this new filtered array so basically we've deleted this user okay here if there is any disconnection i will just remove this user and i will pass my socket id and after that to see these users here i should send them again here i will copy this and paste let's refresh pages first okay there is a problem here because it's connecting a couple times so i have to create here use effect i think because every time this messenger refreshes it's assigning again so i will right here run this just once and make this socket.current this connection let's try again i will refresh it's disconnected and here okay just once perfect there is just one user i'm waiting as you can see john is here also i will copy this and close again as you can see it's just one it's only jane i'm coming back perfect we can see all online users right now okay so far so good so how can i send message i will write here let's say when connect then disconnect i already wrote here and here i will say send and get message let's separate them okay so how i'm gonna send message it's gonna be in the client side or server side of course it will be inside this client because we are the user whenever i send something it's gonna go to socket server first and after to chain okay so i will write here socket dot on so let's check i will take something from client so i will use socket on and after taking this message i'm gonna send this to a specific user so i'm gonna use io2 socket id and image and in decline site when i send this message i will use socket.imit for example fortune i will send with socket image and for jane i will take this message with socket.on okay so i will write here send message and inside what it's gonna include it's gonna include my user id and receiver id and finally it's gonna be text so after taking this i will create arrow function here so i need to find specific user to send this text message so how i'm gonna find this user let's write here another function it's going to be const get user what we know here we know user id so we can use it i will say user id and arrow function and i'm going to return users and i'll say find it's gonna look at each user inside users array and if user id user dot user id equals this user id it's gonna find this user and return okay so inside this sent message i will say const user and equals cat user function and i will find this user by user id and after that i will send this message to this user i will use io and emit it's not image because it's specific user i will say user.socket id and after that emit and let's say get message so what i'm gonna send here i'm gonna send sender let's say just user id and text and of course it's not going to be user id it's going to be receiver id because we are sending message to this user and this is our sender id i can write here actually sender id it can be confusing okay so basically we find this receiver and after that we use this socket id of this receiver and send this message okay let's try i will go to messenger and here firstly i'm gonna send this message let's go to send handler what was the name okay handle submit and here after try or before doesn't matter i will say socket dodge current and this time i'm gonna use image because i'm sending something and here you want name send message and here let's check inside what we are sending sender id receiver id and text i will say sender id it's gonna be our current user's id user dot id remember we are taking this from this current user and after that receiver id so how can i find this receiver id i will just write here const receiver id and it's going to be currentchat and members and i will say find it's going to check every member and if it this member which is user id is not equal current user's user id it means it's our friend in the other word it's receiver so i will write here oops id so i can send this like that you don't have to write your receiver again because it's same name and finally text will be new message okay so finally we sent our message so how we are gonna take this message it's really easy we have a function here so i will write here the last use effect i know it's really messy here i didn't want to separate into that many components but it was not good idea maybe in your project you can split them anyway i will write here use effect and i will say socket and current and on and here that was the name get message and here i will take this data whatever you name it and by the way it's gonna be empty array so i can actually write this inside another use effect i don't have to write again and again where was our first use effect here and here i will say so what i'm gonna do is creating here arrival message arrival message and in the initial state it's going to be null and here i will update my arrival message i will set set arrival message and inside i will write my data but i can't write this directly because their properties are different indeed mongodb if you remember we have sender and text and created that so in this data our sender is sender id i will say data dot sender id and text is same data dot text and created ad will be let's give here comma it's gonna be current date i will say date dot no so it's going to create new date so if there is any changes in this arrival message we are going to update our messages it's the last part let's write here use effects i said it's last but i forgot this we have to write here arrival message and and when our arrival message is changed i'm going to check here something but remember in the initial state it's null so it can be empty also so i will control this if there is arrival message i will say current chat of course it can be empty also i will check it and members and includes if it includes arrival message dot sender then we can update our messages why i did this here that because if i choose here lama for example and if john sent any message to us we are not supposed to see this here because it's the conversation with lama if i'm in the john i can see this message so i'm controlling this so i will say set messages everything inside will be same so i will use spread operator you can write here messages and arrival message but if you do that you have to use here other dependency messages here so you can use here a function let's say previous or whatever you say and if you write here previous right now you don't have to write this dependency it's only current chat that's right here so that's all it can be confusing but it really makes sense if you are confused watch this part again okay let's try i will refresh everything and here let's close i'm opening lama and here jane if i write something here hey jane and i'm coming here as you can see nothing if i open john it's from our db and if i write something again test test as you can see it's instantly here if i send something and send and it's here perfect so it works let's open this like that it's not responsive but i'm writing sending it's here perfect it works okay right now i can choose any conversation from here but i cannot see my friends and i can't choose anything from here let's take care of this as remember we created our chat online component let's open it chat online okay it's here so right now if you remember we get user and console.log this and instead of this i'm gonna create new use date and update my users so let's write here online users and it's gonna be empty array so let's set this online users instead of console.log i will say set online users and that was the name users okay so i can send this so let's use this online users i will send this to my chat online component online users and here i'm gonna send my current user id because we are gonna filter these users i will say current user or current id it's going to be user dot id and finally when i click this it's going to update this current chat so i'm going to send set current chat okay let's come here online users what was more current id and set current chat okay so firstly i'm gonna use use statehook here and i'm gonna create two arrays first one will be my old friends if you remember we have all information about this current user including followings so i will say const friends and set friends it's going to be use date and initial state will be empty array and for the same thing for online friends okay so let's fetch every followings use effect and here for now empty array let's go to api and let's check here inside roots and users get users and here we have get friends and it's url is friends and this user id parameter i can use it i will say cons get friends gonna be async function and i will say command stress it's gonna be await and axios oops it's gonna be get method and here users and friends current user id and here let's import and i will say set friends and here response and data and here i have to write current id and i will call this function here [Music] okay so our all friends are ready let's check this if you want friends okay we can see because i forgot your slash and again as you can see this is my friend profile picture username and id if you remember i didn't want to get all informations so inside here i just filter this i just take user name and profile picture okay so how i'm gonna use these users so right now i can filter these users i will write here another user facts [Music] and inside i will say set online friends and here i will filter these friends and filter and for each friend i will say let's take this online users if these online users includes any of this friends id it's gonna update these online friends and here dependencies let's check here it's gonna be online users and friends okay so right now i'm able to use these online friends let's come here and i will delete this additional friends i will use just one of them okay i will use map online friends dot map and for each online i'm gonna return this div okay let's change this it's gonna be online dot username and here let's delete this source and it's gonna be let's take this public folder first i can take this from here i think okay and i will say if online friend has any profile picture i will copy this and i'm gonna use public folder plus this profile picture if there is no profile picture i will use public folder again and this time it's gonna be person and no avatar dot png so let's check use here question mark because it can be empty okay there's a typo here let's check includes okay we can't see anything i think we have mistake here okay let's check this online users maybe we couldn't get this i will just console log oops online users okay they are here okay it's not returning user it's returning this socket user so i have to check this messenger so i will come here online users okay i forgot just filtering this because it should include only user ids so i'm gonna write here user which means our current user and followings and i will say filter and for each one i will say users. these users from socket and i'm gonna say sum right now i'm gonna check this socket and i will check if this user id matches with our friend id so i will say here for each user u dot user id equals this followings so let's see right now users oh of course it should be users okay it's here perfect so if i go to john john doesn't have any friend so there is nothing here for jane we can see this friend so one more time it can be complex for you i just take all followings from current user because if i write here current user here there is a followers and followings and inside followings it's an array and it includes each user ids of these followings so i will look at these followings these user ids and for each user id i will look into this socket users and if this user id of socket user equals our friend id it's gonna set online users if you make this practice by yourself you will understand better so right now and this is our console log here i will delete this and this also so everything works perfectly one more thing when i click this i wanna set a conversation so how i'm gonna do this i will say here for online friend i will say on click and inside let's say handle click i will create this function here const handle click so what i'm gonna do is writing here oh just this friend okay so i'm gonna take this user and it's gonna be anything function because we are gonna fetch our conversation so here let's say try and catch console lock this error and here i will say const response so how i'm gonna fetch this conversation let's go to our api and hear conversations as you remember we just created new conversation and get all conversations of one user but we didn't write here third option so i will say here get conversation includes oh user id okay let's write here router it's gonna be get and here i will say find let's give here first user id i will write here first and then second user id ok i will say async function and here request a response and inside this try cage an error i will send this error i will say raise status and 500 and json and error okay and here i will say const conversation and it's going to be a weight and for our conversation model and i'm gonna find just one because there is only one conversation includes this user id and this user id so i will write inside my condition i will say remember what we did here i can actually copy this and like that and right now it's not gonna be only one user let's copy this here and this time it's gonna be two users second user id and right now it's not gonna be in it's gonna be all look into these members and for all elements should include this first user and second user and ordering is not important it should be just inside these members okay so i can use this find method so i will say axios and get i'll say and find and slash i will add here actually we can write this like that backtick here and first one will be our current user id what was the name current id and second one this user's id dot id okay we can write this as second parameter doesn't matter as i said right now we have response here it's our conversation so what i'm gonna do i will just set this current chat it's gonna be response response.data let's see right now if i click this john okay something wrong oh i said users it should be a conversation and i forgot this time i wait i hope it will work this time i'm clicking it's not clicking what's wrong here oh extra curly brackets here that's too late i'm clicking okay it's not coming so let's check our conversations jazz here oh i didn't send this conversation of course so i will say response status 200 and i will send this conversation and right now let's try as you can see it's here i will refresh i will make sure there is no error here i am clicking apps let's make this okay last time i will try i'm coming jane and here i'm in dilemma i will say last tests i'll send there is nothing here i will go to john last tests and i will say something have some so we finished our project as i said in the future we are going to create another chat application it's going to include group conversations bluetick writing notification deleting message feature maybe blocking user something like that but for now it's perfectly enough i think you understood how socket tile works so right now you are able to create some other projects or just examples with socket io maybe you can create notification events like send notification and get notification as we did here with messages then you can use it for the notification bar on the top when a user likes your post for example or follows you or whatever you can send notification if you understood this application it's just a piece of cake i think i believe in you you can do this okay i hope you liked it if you learned something new today please like the video and subscribe the channel don't forget to follow our facebook page it's really good opportunity to meet other developers you can share your experiences and find new inspirations and you can ask your questions okay that's all i hope i will see you in the next video goodbye you

Channel: Lama Dev

Views: 521,880

Keywords: react, react chat app, react tutorial, react app, react project, react node js, chat app, instant chat, socket io, react socket.io, messenger, whatsapp, mern, mern stack, mongodb, full tutorial, lama dev, react hooks, clone, react js

Id: HggSXt1Hzfk

Length: 126min 7sec (7567 seconds)

Published: Wed Apr 28 2021