Luxe Chat Application with emoji, sending files and typing - Socket.io 4, ExpressJS and ReactJS

hello guys and welcome to another liberty video today we are going to build an awesome lux chart application i will use socket.io and express to realize logic of instant messaging on backend and react.js to build our fronted part socket taiyo is a javascript library for real-time web applications it enables real-time bi-directional communication between web clients and servers it has two parts a client-side library that runs in the browser and the server-side library for node.js so let's go to our lookshot app inside of here you can type your name and the name of the room you want to join let's be alex and alex room push sign in and once you join you will see the indicator it shows how many people now online and a little input at the bottom with three buttons first one for sending messages other one for sending emojis and the last one for attach pictures let's now open the additional chat box let's type lucy and the same name of room well now and now inside of here we have two active users alex and lucy and i want to demonstrate what functionality this chart has so when alex type something lucy immediately see that alex start typing some message to her and vice versa when lucy types something alex see that she types some message too and you can easily send some emoji well i used the emoji mod packet for this for this functionality of this window this push-up window uh well send and as you can see everything is working great and the last one uh you can easily send some picture i'll choose this picture send and alex send the picture to lucy and vice versa lucy sent some picture to alex so these are some functionalities of my looks chart application but the main focus is the real time data transfer that we will be doing with express.js socket.io and react so this video tutorial is suitable for everyone who want to improve their knowledge of vr.js and one of the great advantages of this video is that we are going to do a full deployment of both back-end and front-end so you can use this chart application online for communication with your friends or just put it on your portfolio all code with the version of this app you can easily find on my github account i will put the link to this code in the description of this video tutorial and i will be grateful uh if you put the star to this repository and so let's get down to business guys and let's start writing the code right now [Music] so let's start to do our chat tab and i need to create new folder for it chat app chat look set so open our visual studio code uh just drag and drop it here now now we need to open it by git bash console well uh in our work we need two folders the first folder for client-side and the second folder for server side so let's create it just need front end for client side and back end for server side so let's do cd in cd and cd backend uh in front and we need to create react tab yarn create react app and dot so let's do it and for back end uh we need we need to install the first of all we need to create our package.json so yarn init dash y p so it is here so i want to do our backend in use syntax and because of this i will use typescript however on front part i do not want to do this if you want to update my code on front end we type script you're welcome so now we need to install dependencies for backend so yarn add course not more [Music] express socket.tire type script types express and types note well uh so that's that's all dependencies uh which i need uh on backend so let's do it and on front end uh we need to yarn add socket dot iron client react router dome react scroll to bottom and emoji mart so it's okay the tire react rotor dome react scroll to bottom and emoji mod that's all well uh let's go to the next step in our package uh json we we will we see all our dependencies here um and i need to create some scripts scripts and the first script will be start and this see this index.js and the next command we use it will be server node mode so it's like this but something different so not moan source index test that's good well uh and in our work we need a file called testconfig config.js testconfig.json and compiler options flip yes five here's six oh next attribute it would be target target yes five next attribute module it would be common chess come on well the next attribute module resolution node all tier will be dot slash test i'm at the creator metadata would be true experimental to create this would be true also and source map will be true so that's all well we are going to delete all our all on the unnecessary uh boilerplate code that create react app provided us well uh first of all we need to create a new folder called components and uh well let's start our end part then start to see the differences when we remove unnecessary code here unnecessary files so i don't need test deleted well i don't need this to file and this of course don't need to [Music] well that's all so don't need it here all rip well here uh okay so that's all i think the official page so our app and now let's prepare our app js for our work so and react from react import hash rotor as a router from react router dome well the uh main idea why i use hash rotor it is when you will upload if you want to upload your app in the internet maybe for example for heroku you need hash rotor because another router will not work on on the internet so and inside the components folder we need to create two files chatroom dot js and join dot chess well and here we need to create our components so would be chatroom and it would be join so that's good and now we need to import or join from from join oh sorry from components and join and the same idea here for our chatroom just need to replace join by chatroom that's good so what about here we need to create to need to create our router and inside it we need to make two road so road exact path would be equal to slash component in here do not on here it will be joined and the next road it would be chatroom without exact oh i'm sorry i forgot to import in here so that's good so if we are correctly importing all these things inside of the app we can actually run it so i i forgot to do this so let's let's try it out let's try it out chat well something oh something going wrong let's so something is wrong well let me check it a few seconds components chat room seems to everything is okay so let's restart our app so i think it uh it is because we use hash router uh we can see our road now so um oh let the chat yes everything is okay but um hash rotor add some additional sign here well everything is working fine but we need to continue i'm sorry well i'm great so everything is working great and we can do the next step so well uh we need to go to our backend part now we do the preparation on the front end well it is not so new folder source oh i'm sorry rename it we need src folder and there we need to create the index test and action stats files well index note test and actions test part well now in index test we need to [Music] import our express so import from express so i use i will use new syntax here because of testconfig.json so i import instead of required for example in other examples so i import all as express from express and the same idea is for course the course give us the chance to use our react app with our backend so of course import create server from http and import server and socket from sucky dot air and const app is equal to express and constant port is equal to so and of course we need course policy because as i already said we needed to connect our front-end and back-end and don't see any errors so app use course that's good and do the sound preparation for our socket attire so const iro is equal to new server inside here server and [Music] course as origin so that's that is great let's check it out oh i'm sorry i forgot to add our server so const server server okay is equal to create server app well that's good and we need to check our server work so i use server listen port as i already mentioned here our port so e and and console.log we will use backticks here app is running on birth donor signed and port and great this should be enough and we can run the server and actually see our server running so if we go inside of the terminal uh that is inside of backend i have uh well i have both terminals open as you can see so well uh let's check our comment here so start everything is correct and let's try to start our server yarn so everything is okay app is running on port 8 000 and as you can see there are our folder dist where uh where from uh we start our server it is uh compilate index test in index.js right and we can start our server so and as you can see this message in here so let's go further i want to start create our i o connection so let's go to the next step and do some preparation for our backend chat so i dot own connection and here socket socket socket and console file connection created so it is good let's do some format and let's do uh some road here app.get maybe just for tests function request response well and response we will get res sent back end is up and running and well we need we can go to the local host 8000 and check our message here oh i'm sorry we need to restart our backend server to see this message so yes that's great well so now we need uh to actually do the real-time messaging since we are already on the back and we can start with that well um so i'll already do some preparation here uh we here we have our server work we have some io connection created so i need to come back to our front-end part and do some changes to our files here well so i want to start with our components and join so let's start well in my work i need import import link from our react router tom and well uh now i want to to add some css styles and some pictures uh that we need in our work so i go to here and open my front end so well and i need to add it in our source folder so it could be here so uh it is all the files uh files of styles for all our pages and of course icons too and some of the some of them we need in our work now so i import just import says says and join join.jss good well now in here we need to add use statehook use state and name set name well so in here we don't need anything but we need to import our new state from react grid so we need to use state you state in here too and we need room room and set room and the same idea we don't need something anything in here so and i want to to start to build our new component so the first class name it will be join alter container inside it could be div so i don't need join anymore here uh join class name container h1 so h1 join and here we need another class name heading so in here we need two inputs for name and for well we already create joining container so drawing inner container and here we need another div with input inside it well type text placeholder name well on change event so event oh i'm sorry event and the error function so set name event target value so that's good and the last attribute of input it would be class name join input join input and well good the next div [Music] well this for name and the next gift is for room so type the text is the same set room here well and class name will be join input and g 20. well the next we need so we close in our div and the next we need link so on no one click will be here and click event on click event if there are no name or no room then uh then we use event prevent default no so and [Music] here uh where we going when click or link well it is hectic's chart name well is equal to dollar sign name room is equal to dollar sign room so that's good and from other hand the next step we need to add button here so class name will be button m empty 12 oh i'm sorry 20. type submit type submit it will be signing oh i'm sorry well we need to do something like this well our button will be inside our link that that's great so looks like everything is okay i need to just uh prepare it great and now we need to add so we already add css styles so now we need to check it out to check it our join so let's do it oh i'm sorry something is not correct here i need to yes let's go to our attribute inside our link and well great so everything is great so we can now check it out so pushy re room and sign in so as you can see uh named yuri room is you go to room and we go to the uh company chatroom so now uh well now we need to create to contain our company chatroom by useful info let's go to the next step let's start work with our chat room jazz sole chatroom jazz and now well we need to add some import so import io from society client great and i will use i will use two hooks here start from it use effect use effect and use ref so constant socket giraffe we need to use his ref here and socket drive we will use it uh in all components here and all attributes and all variables so we start with it socket ref is equal to user f well and now we need to take our two parameters so we send props here and here we do cost no cost name so do some destruction from prop smudge params so if you don't know this syntax uh you need to read about them because it is a useful feature so on name and oh let it be just like this i think well drops much params and we need our 4l so url http go host 8 000. i use effect um well so i have his effect here maybe i just use it so and and now inside of it uh well uh on this step what am i do i need to give our give the room and name we which we take from our road uh well in here we need to give it to our backend so i use sockdraft dot current is equal to io and inside it are oral and here this and here we need to query and our two arguments room and name so that's that's great that's good so and uh we do all the preparation on the front end to connect it uh to back end and we need to do some few variables some changes to our files on the back end so go to our back end or so and here on our back end what do we need to do so we go to our connection by our own connection uh and uh just can copy this paste this for to speed up our typing so in here we need socket dot and shake dot query well and let's it will be useful for us and let's let's see uh those parameters if everything is okay we will see these parameters in our console so uh let it be query then handle this console so and we need to take these two parameters room and name oh sorry oh great semicolon so so so i want to use yarn run so in and now in the console we we have undefined undefined it means that we need to add parameters to our appjs file in the link so let's go to our app.js on the front end and do some changes to our file name is equal to name and room is equal to room good after that we need to refresh our page so let's do it and as you can see in the query here on the back end we need we already see our two parameters so our room room is room and name is yuri so and now we can actually do join and disconnect well now we can actually do uh the other logic of our i don't want to come back to our back and so i want to do all the stuff which we need on our front end so let's start from our actions so in actions.test we need to add add user remove user and get users in room functions so let's start with we need to create some variable users which is equal to empty array so the first function we use in here it is the export export cost add user which is equal to id room and name in here so name is equal to i just make some uh i just want uh to see our name and room uh with small letters so i need to update these variables name stream and i'm sorry and to lower case and the same for the name of the room so the next step we need to const existing user is equal to well users users find well user i user dot room file free equal here and room and a username so user room and is equal to and user that's not good so name and do some condition to control our name and our room so it would be if if it is not name or it is not room we will return some error return error or not this error just not this error so the error username username and room are required and this then other conditions so existing user and return error username is already taken that's good and well we need to make another variable of const const user which is equal to id room and name and make some method push to our area user i'm sorry i'm sorry users push user semicolon and return so let's check our all over code looks like everything is okay but users find user that yes uh everything is okay let's pretear it a little bit that's good well and go to the our next function uh it would be remove user remove user and we need only id here so const index is equal to users dot find index i already have it in my tips so a const index is equal to user's find index uh so if user id is equal to id and we need condition here if index is not equal to -1 then return user splice user splice index one and number zero number of our array so great uh we have done another function so everything is correct great i'll go to the next step and the final function that we need in our work it is uh get users in room we need room in here i don't need it so users roman here and i need some users filter filter user room is equal to room is uh so looks like everything is uh correct we already add our free function that we need in our work so let's go to the next step and start to add our user on the [Music] back end so we already have it uh socket handshake queries so the next step we need cost user is equal to add user and inside it we have id which would be socket id and name which would be the name but it can be just right like this so and room is equal to room but i just write it like this so that's okay and the next step need well we add this so these tips is work only on the typescript files so click fix and import that user from module action status that's good and the next step socket dot join user room semicolon so and i'm sorry so the user room io dot in we use our user room which we joined to and emit new action to them do it so let it be all users data user room and users get users in room and in which room the user and we can import it from actions we already have two actions from our actions so and now we need to use our console so i don't need the query anymore so let's do it get user syndrome it would be this function that's good good so great well undefined because we don't have any users in our room so user room emit all users data and go to the next step so so we need to add functional for sending messages and typing events so let's do it and the first of all let's check it out but i don't think that it is work but let's do it let's just check it yes something went wrong but maybe we just uh don't do the functional on the front end and that's all so uh go uh i'll go and go and write our back end to the end so console.log and after that we need listen uh four new messages and it is a socket on uh said message not messages message send message and here data and now you in well i in user room i'm sorry it's unnecessary step here oh i are in user room emmett emit and send message comma data so that's all for sending message for now and now let's do the functional for listen typing events well listen so start start typing message data and so user room emit start typing message data well everything is the same in here for typing message well and the same thing for stop typing message that is all the difference between it and of course we need to add the same thing for the disconnect disconnect without any data well without it i need console.log well and in here i want to add some variable uh socket id left shot good and after that remove user socket id with id socket id and let's import it from our actions and let's do i in here is the room emmet user lift chat user leave chat e and and user so and the final part socket dot leave our user room and vs string that's good so that's that's good that's great uh be to all stuff with our back end and can make step ahead with our front end well i'll let to let's let me do prettier for this to prepare our code so i think it's okay and now we need so i do all the stuff for the server part and now we need to come back to our front end part and we need to add some message functional and active users well so let's uh change our chatroom jazz uh we already have some stuff here and now we need new some new components so it would be your file dot infobar.js new file indicator dot jazz messages messages.js and the new message form new message form so let me see is every name is right yes it is right so you message form and let's import let's do some stuff here status component just with names indicator let me erase c rock stateless great and the last one wrap stateless new message form that's good well we don't need these files to these files anymore well i can close it so and do some stuff here let's import let's import wow let's import your message form from new message form great and for component like this indicate i'm sorry indicator chess info bar to change and the last one is the last one is messages so good and of course we need to add some styles so important messages css and well it says this message just message messages well looks like we add all we need so well now we need to add a few hook a few hooks for our functional so let's start let's start the party so use use state messages it would be airy canary so messages set messages in the next one we need new message view message set new message and it could be a string well we need to import our view state here so the next one we need users here users and set users well the array in here and the last one we need for user and set user and empty use state here so looks like a is correct just do this well let's go to the next step we need after our after our socket ref dot current we need to set user and it would be name now name is equal to name from here but i just do the name so great and the next one in the next one we start to use our actions which we are already made on our back end so circuitry f current on all well i just want to copy and paste it all users data is all users dot and here so here we type users and here we use set users and users so that's that's okay the next step we need to do functional for send message so the same rift current on but now we use send message send message message const incoming message owned by current user well it gives each user own of the those message so owned by current user and [Music] message dot sender id is equal to socket ref dot current utility well that's all right and the next step we need set messages and go further messages arrow function and we need to spread array of messages so b this message by current user message center id sender id so is equal to socket ref current 80 socket ref current onsen message message well messages and spread our messages very incoming message blind comment message that's good and here we need to play room or name have been changed we use this use effect hook well the next step now we need to add our function send message is equal to error function so there it is some condition if uh socket not sucking thread current then return well const message object message object is equal to well sender id in here and sender id this socket ref current id type text oh that text and body is uh new message and the last one user is equal to user but just do this stuff just user so that's good that's great and after that we use set new message to empty string and take this well socketref current emit and emit our message object to our action send message well send message and here message object semicolon well good i already done the send message logic so well looks like everything is correct let's go to the next step and the next step we need to create const handle send a message handle send message which is equal to event and event prevent default and send message new message set new message well and now let's uh do the stuff in here well we will return in here some well diff oh we don't need it anymore the class name is equal to e is equal to alter container class name another dd for class name container container is equal and do the props now is equal to room so for bar okay for bar the next step this all messages messages in here and in messages we have our messages messages messages so the next tag we will need this new message form and then here new message is equal to new message a few props so and send set new message is equal to set new message and the last one handle send message is equal to handle send message well this well that's all right and after this div we have this the last one indicator and those users like props so this would be nice great well what do we do now uh we already did our components in here and now we need to contain them let's try to do this from infobar.js also just copy styles from from this import css info bar dot css and import our icons goes like oh circles icon from and close icon dot png and online online so because icon online icon i just take this my nikon png so uh in info bar we have only room just take this room in here and do some stuff in our info bar so div class name is equal to info bar oh well another leaf left in there left in our container well don't need it anymore image source online icon mine icon and class name class name online icon that's great so not not great so it need to be like this well the next it would be our room in here h3 so for left inner container that's all and so difficult name right in our container and we have some anchor here craft is equal to this and the image without any clause name it would be close icon and alt call zack so that's good everything is okay correct prettier well and we do the stuff for this file well go to the next file indicator.js and two i will do the same stuff and so indicator info bar and in here we need to add online icon so line icon and then the color indic on i'm sorry indicator success so great and an indicator all we have it is users so sorry in indicator of all we have it is users users in here so let's do our stuff class name text container well and inside of it curly braces users and and some conditioning here so here div h4 active active users div and active container so inside it i just do the paragraph and some stuff users that map well users.map and inside it you have name well we have name and and do some lee three with attribute property key is equal to name and class name of course activate them they're solid so and then here we have the name i'm sorry image last name so i don't need class name here to be like this or source online a icon could be like this good and we need to close our tag browser tech well and so it looks like everything is okay in here well great and we need to format it a little bit for pretty view so good well and go to the next step we need to contain your message form so in here i need to import our chat css file and import our send icon arsenal png well in message form what props do we have in here so uh new message comma set new message and handle send new message oh that's all right and here well we need to const event that's not good well event and set new message event target value and in here we need to handle you message handle new message handle new message change so in return we have we have form can do new message change set new message yes that's that's good well and go to our return uh we need form in here but for without action just with class name and class name form on submit and click on submit handle send message well inside the form we have text area um i don't need that but class name well text area this uh text class name is equal to text area the same as the name of the tag type would be text text oh well value it would be new message and on change handle new message change so and in placeholder placeholder we have say say something and three dots in here so to be like this good well what do we do next we need to create button button i'm sorry i'm not anything else i don't have any n emmet button button okay just like this and button we have a few attributes the class name [Music] will be send button well and inside an image image img so inside the image class name class name upload image well this is just the class just uh in in this case maybe in next steps we do the same button with the image and uh it just have it just has uh the same styles as this button so so image class name source and alt and alt send icon in here in source and the same in here so let's do like this right here well would it be like this could be a plot just send the icon it doesn't matter for our purposes so the last part not the last part the next part so we need two messages and inside here we use our import from react scroll to bottom we use our scroll to bottom from react scroll to bottom and and now we need to um create another file call it chat chat message dot js chat match.jazz drug status component that's all we i i will come back to it later so in messages from chatroom in messages we have only one props it is messages so scroll to bottom oh well we don't need returning here just can't do this stuff do this stuff scroll to bottom scroll to bottom with class name messages that's good and inside it we have div with class name messages container and what's happening in here you don't need this just this so in here class name message messages container and we need some interesting tag o l here with with class name messages list well so let's do this stuff in here so messages dot map and here you need um message and i so and i don't need curly braces here just just this places an active k is equal to e well and put the chat message in here chat messaging here with message is equal to message so good stuff like this well and we don't need it anymore wow great so i will import chat message from this chat message and the last one we need to con contain our chat message by useful information so inside here we have message and i adjust the structure message to parts that we need later so i need body well and go to chat chatroom yes chatroom owned by current user or not installed by current user and of course user name of the user well that's that's okay i need to make some few condition here so the first condition will be if body [Music] is not equal to empty string else doing other stuff and another stuff will be return no eternal so the first thing we do it the first condition and the second condition inside this condition if else i'm sorry wrong brackets return no and here return so return now if owned by current user then we do well this stuff else we return other stuff so let's start our chat message so thief the has last name message container justify end message container justify end inside it class paragraph class named sent text sent text pr then name and oh that's good that's great well the next stuff div nah here if it has class name message box and background blue the ground blue so and here this is name this is not name this is so message text color white color white message text well and in here body div leave so that's all for this stuff and the next in isles message so the same stuff but with some difference so message container justify start well background light message text color dark and the same stuff or not the same stuff so the body in this case will be so justify send so message container justify start background light message box and in here message text color dark body and after that so we close the tag in background light and here we have after close the tag of the body we have our name and send text pl 10. so great so well now if everything is okay we can check it out and i hope so let's cross our fingers that everything is okay and so good yuri and room sign in so something went wrong well so something went wrong so let's do our well let's uh let me see what can do so maybe i just take some mistakes in here let's try to to start it once more well yes something went wrong with our app but this so uh something wrong with our function get user syndrome so let's let me do some maybe maybe i do some stuff in here maybe some mistakes maybe it uh do some mistakes for this one so so our users are undefined somehow it is so we don't have let me see what can do now so what can do these mistakes looks like something wrong in our actions so let's try to let me think about few minutes and so remove user find something wrong with add user and because of this you don't see other users const existing user search find so i will stop the record and i want to find my mistake and after that i come back and i will show so guys i have found all errors i have so the first error and the main error was in action stairs i just well i just retype this this string of code and everything is correct with our user so uh the main error wasn't here well uh the other errors so we don't see our info bar so let's try to plug in yuri and room just room so sign in yes now we see uh the active users and we see the info bar on the top of the screen so well we don't see this info bar it happens and now we see get users in room after i retype this function i don't know why this is incorrect everything was correct but something went wrong with this function so now it is uh everything is great well as you can see i come back this is not the error it's just just the right style of writing the code so the main error in here and the second error with our info bar white is not showing i uh come to to this file and just retype the import of css files info board success so after that info bar come back on the screen and i will see it so and uh the last one object object it is in the new message form i forgot to do this i forgot to do the structuring so it is my error so if i do this everything is correct and now we can now we can open to two taps of our chat and start to conversate to do the conversation with each other let's just model it so let it be lyra and a room just room sign in and as you can see active users yuri lehrer and we can type something and lara type something and yuri that's okay so that's everything is great everything's correct well and well we do the good stuff and so uh as you can see they get users in room we have two users now fury and lara well uh what do we do now now i want to add the emoji to our chat i will use mlgmart for this and add additional hook for convenience so i show you how to do this how to do this so the first of all i need to close all the unnecessary tabs well join me denote it in here so uh well now we need uh our new message form where we uh face to face with our error with object object and now um [Music] well i need to import styles for our emoji mart and do some changes to our code to make our emoji work so import and emoji mart i'm sorry the multi-mart css emoji smart dot css so great and i need to import picker or picker picker from emoji mart well and the next step uh we need a new icon i'm sorry i need new icon so i need the multi icon from here [Music] let's clean it so good well and after that what do we do next so we need the hook use state four showing our collection of emoji so you state and uh what do we need to do next we need to use state in here initial oh well we put b show show emoji set show emoji we use false use state so the next the next const that we need cost handling motor show is equal to arrow function and in here we will use set show emoji and that show emoji and inside inside it would be some variable aerofunction oh i'm sorry some variable arrow function and inverse this variable some variable in brackets so let me see oh that's that's all right and the last one we need handle emoji select handle emoji select and so we need to set new message for it and here we use new message a new message well new message plus equal event native so and i use a in here well that's all right if you don't know this sign you can easily check it by the internet i well that's that's okay the message that's okay so uh we do all the stuff we need for reading by the function so we need another another button in here for showing emoji so button i want to and in here it would be emoji icon and the same the same class of image so and so class name would be class named css chart it would be oh it doesn't matter so um so everything is the same uh bottom class name send button type button type button no submit button and on click is equal to handle emoji show well that's okay um i'll class because name node at all it is it is the same like send button but another image so after that we need to add some well add some div in here show emoji well and another action it would be another div and picker and speaker in here well and in here um [Music] i use on select well you can use documentation for emoji mart to understand all of these attributes it would be useful for you if you need to use emoji in your work handle emoji select so that's all right and we need to use emoji size it will be equal to 20. so when i need to i'm sorry i need to use pretty for all of this code and well and that's not good something went wrong okay let's do some what do we do wrong in here so you stayed false set show emoji well i don't know what happened happens happened but so it does not don't want to open well let's try to understand where where is our error well maybe yes i understand where is my error it is in here or maybe not so leave bigger on select handle emoji select maybe i do some mistakes oh well it's something strange with this well maybe maybe something crit or wrong click handle emoji show well something in here just maybe no yes i understand well this capital lies in here and everything is correct now so as you can see we have all our emojis we can do it and send tor lera or from other stuff from lera to yuri well that's okay and this funny funny mistake but it happens sometimes so uh go to the next step and i want that you pay your attention what happens here when we open this emoji emoji container when we click outside uh that this container not disappear not height so uh it hides only when we push the button again it is not user-friendly behavior uh well let's upgrade our code with new custom hook let's create folder hooks uh in here in in here in the component folder and and we need to add new file called use outside click dot jazz and do some stuff inside of it so uh what do we need here so i i need a rc and use outside click well and now we need three hooks in here use ref use state and use effect or three f use effect so now our const ref is equal to use ref no and do another use state so use state use state well with initial value in here and now uh we need to take our hook from here yes take our hook from here and so do this stuff initial value here so and the next that we need to do we need to create some error function const handle click outside handle oh i'm sorry click click outside is equal to event handle click outside is equal to event need it so if condition if rf dot current and not ref no traff current contains contains event targets but this is yes i think it's great so if and then if this condition is right we use set show emoji with false so that's good things even target and now we need to use effect here so use effect graph and just a little bit javascript document document dot add event list listener click handle click outside true well and after that return some arrow function with the same but it changes remove event listener and at the end of this we will return we will return show emoji set show emoji and ref use outside click that's great so and we need to do some changes to our new messages in a new message form js file so let's come back to it well the first thing we need to do it is import our use outside click from this from this well new folder hooks and use outside click that's okay well and now we need to add our new hook in here these two uh this variable and this is this cortes is equal to i use outside click and uh it's in initial stat false that's all right and after that uh and after that we need also to add oh i'm sorry i'm sorry this is not cortes this is the structuring and we need ref here well and ref must be ref must be in here is equal to ohm sorry is equal to ref so let's check it out yes everything is working great let's try it yes wow uh this is a convenient hook so we can check it and very good this is behavior that i want from it well now it is time for file uploading and of course we need to add some code or files for it let's do it and we will start with our chatroom jazz let's do it so chatroom jazz well we need to add some new hooks in here it would be file set file well that's all right the next step what do we need to change here so we need to add some condition in our message object so if no if condition so if file is took place else something and else we uh use our normal object it is our message but when file took place uh when file take it its place we need another logic in here well it is the same message object but sender id but type file and body file mime mime type uh file name oh i'm sorry file file type file doctor type comma and file name file name it is file name and the user will be a default user so next so set new message in here and add set file in here on source yes semicolon here well and the same as socket drive current damage and message message object well that's that's okay that's all right and go go to the next step and the next step would be use a new function new function select file so after it function select file event and if type of here's some check that type of target files not undefined if so we do our logic if not we return no so type of the e target value uh and e target value it must be an array and the first element of an area is not equal to undefined so if so we uh set new message like e-target files e-target files dot files would be name and set set file e target files else return null so that's that's all right i'll select file e and now we also need to use the select file as probes in here so that's all right just so that's good now let's go to our new message form so let's do some additional stuff in here well now we have select don't need it so now we have select select file in in here and we need to use it well and we need to use it so now what do we need to do to use the select [Music] the first of all we need to add another button and label so let let it be we use label html4 file input this for our file input and inside it uh div class name upload button class name class name upload button well image class name upload image upload image well well i need just i don't know then you just touch icon emoji icon touch icon here and don't need to state anymore in here because we do all stuff in our use outside click emoji so touch icon we use touch icon we use here and let it be plot image so well we do this stuff only for label upload button so label is okay and now we need to add some input in here for this label type will be file off turn the file we need id file input id file input class name input class name input and on change on don't change it on change we use select file well looks like everything is all right input button send button id file input class name input on change select file type file so that's all right so now we need to [Music] do some little changes to our chat message jazz and but before that i want to to create new file image dot jazz uh it is uh for our image stuff so uh c and import so in here we use two hooks it is used date and news effect great and of course we have props in here you state you state you state like this image image src set image src set image src well and use use effect is perfect like this well in in your in use effort we add our props and add blob format well because of in this case we don't have any database i just use blob format to send our message well constrider is equal to new file reader and after that reader dot read this data real props blob as in here pops blob and after that reader dot on load and is equal to function set image source and set image source would be with reader result so that's all right and after that we just return the image return the image source would be image source and alt will be props file name or props file name file name well that's okay and style is i will use just inline styles it doesn't matter if you want you just change it later so it 150 height height after well that's all right all right pretty dear so well looks looks wonderful looks great looks wonderful so well we create uh we already create [Music] our image jazz file so let's go to our chat message chess and do some additional message okay well now we need to add file name in here a message party as file name so and now we need to add some condition for for blue so some condition for blob let it be here so if type is equal to file oh well const blob because blob it is new new blog and inside of this we have body and just type well oh i'm sorry we need type type type in here too type yes when type is file we use this logic so after that uh what do we do after that so if i'll write it then inside so blow up new blob body type so looks like everything is correct and i need to continue so i just take this stuff copy this here and oh to this stuff all of this stuff so and now we need to change something in here we need to import our image import our image without this so we import image without this well and now everything is the same part [Music] instead of text in here we need to use our image so image inside of our background well inside of we don't use it or we don't no this is great but we don't need to use some some colors for image just an image so and file name file name is equal to file name and blob is equal to block that that's great so the next step we do the same stuff but for our another condition else condition so well in here we don't need our color and instead of this we use just image file name blob so and name it and if uh it is not file else condition so we uh just use uh the condition for our text message that's that's all right you can save it well after our changes we need to check it some something crushed our server we need to rebuild it well good so i just and here and here and start our server well looks like everything is correct nothing's good and we need to check it out so let's cross our fingers the difference is good uh room signing so good we don't crush anything and little bit lara and just a room sign in well uh let's try to send our dog well everything is working great our our doc is our file is sending successfully so um and now we need to add our final part it is when somebody type something everybody in the chat see who types uh so let's do our final part guys and uh first of all we need uh to create new hook use type in jazz uh your hook is typing in hooks folder so let's go to the hooks folder well hooks folder and new file he's typing dot jazz so import um i don't want to do this this have it it needs too many times so i do this is typing is typing so user effect well maybe i just copied from this uh [Music] just need to use a use date and user effect user f i don't need this ref in here so use typing uh well we need free you state in here so let it beat your state he's typing satis typing set striping forward these false and escape pressed escape pressed set escape rest it is false too and next part countdown set the set countdown countdown set is go oh i'm sorry uh set is count down so and here you state five seconds so well const start typing start typing well is equal to oh is equal to uh set is well set escape pressed true oh well let escape press 2 set countdown oh not discount down just countdown set countdown five set is typing true and the same as in here well and the next would be stop typing stop typing set it set escape pressed set is k pressed false well and the last here's the last function it would be cancel typing cancel typing and in here set countdown zero well that's okay now we need to use effect use that in here so all right escape rest and countdown well return [Music] so return we need returning here let let it be like like this before we do some stuff inside user effect so let enter well just let it roll and after that if condition else if else if and so if can if condition if condition not his case is oh not here not in here not escape pressed interval would be it will be equal to set interval well um okay set interval and inside set interval set [Music] set countdown inside it uh set countdown c is like an arrow function c minus one well and it's good and after that so set interval in here so set interval comma and one one thousand well else if is if escape pressed or count down count down then clear interval clear interval and interval so that's good after that we need another condition if countdown is if if if countdown is equal to zero well then set is typing to false to false well well everything is great and we need to clear interval at the end of the function on the end of this effect hook well that's okay and we will return we will return all of this stuff so he's typing start typing stop typing and cancel typing well great so that's good uh after that we need to add two new files uh type in messages and typing animation jazz so let's do it so new file typing so chess well that would be urs react status component type message type pink messages and the new file typing animation tie pink animation dot jazz so well and then here the same thing the same typing animation so let's go to the next step uh what do we need now so let's contain useful information by useful let's contain it usable information to our tapping message so type in message oh well we import typing animation typing animation typing animation from typing animation in here and import import says and here well what typing animation justice well that's all right so well that's all right um and what do we do here uh we need to add class name message item message item well in here we need to use typing animation oh well and some additional stuff so message item so that's all right uh typing animation [Music] on the same thing import css for it typing animation oh i don't want to stand i'm sorry target message not typing animation here typing message so that's all right typing message in type and message and type in animation css and type in animation css so typing animation says says it would be class name dots container well uh paragraph span not this band just this pen id is equal to dot one so dot one dot two and dot three well great and from our higher component parent component we take some name and [Music] name is typing name is typing so let's do the formatter by prettier let's yes everything is great and in our typing message we have some props from parent component to it would be it is a user and here name is equal to username well that's in everything probably with all the stuff that we need for these well so we create preparations for type and functionality now we need to change our existing files uh well we will start with we will start with chat so just typing is outside click chat room jazz so i want to import use typing use typing from used from hooks and just typing that's great oh i'm sorry yes that's all right well it's typing from use typing and what do we do next so the next we need additional stuff in here uh we need um in users type in users and set typing users set typing user typing users set typing users and we have empty array here well the next step we need to use some some stuff from his typing everything of this uh we need to use here and is equal to use typing like this well uh very good what do we do next the next the next one so we need to add two additional uh actions in here in our use effect well let's do it so circuit ref start and we can go to the our actions and just copy from it start typing message in here typing info well type in kin4 and in here we don't need it anymore and here we use the condition of typing kin for i'm sorry i can gain for typing info send ready dot sender id it's not equal to socket ref current id uh then then const user is equal to typing in for user so well and now we need our hook so set typing users and inside it users is equal to oh no not as equal it is arrow functions so users an array spread operator users comma user oh that's all right it's okay well am i right in everything yes i write in everything so go to const user sender id well everything is okay in here so let me do another function so circuit ref current on um stop typing message well well this everything is uh the same but not in here and here we use our users dot filter and inside it some some variable u u dot name not equal to username well that's good well and what do we do next now we need to add to function uh so let's do it the third function it will be start typing message cost start typing message is equal to if well this is the same like this if circuit current drift return the next one so circuitrif current socket drive current emit dammit start typing message send ready user so sender id socket ref current id user oh that's all right this looks like everything is okay drift current return start typing message so everything is good and another function stop stop typing message it is the same but stop typing message circuit sender id circuitry of current id user well everything is the same but action is uh different from previous state from from previous section uh well that's that's all right well in here uh we need some one handle send message we need to add some so cancel typing cancel type pink in here send message set new message okay well cancer type pink we use in here and well the other stuff so we need another user effect another user effect so in here is typing well in condition if he's typing then we start typing message well after that else stop typing message well it is good in messages typing users and typing users so where is typing users will equal to typing users and in here we need and all handle start typing is equal to start typing well in here and the handle stop topped our handles stop typing is equal to stop typing well that's that's all right so looks like i use everything in here let's check me out once more so use typing is typing typing users said typing users that's all right well in here we need a structure in this typing and after that we add our two actions in here we type in info that's all right well and well and in here we add our two functions that's all right and use effect finally you use effect so so everything is okay it's all right and we need to go further to the next step oh well let's type in to the next steps so uh the next step we need to rebuild our messages and add typing users in here so messages typing users well after these we just add our typing users map user well well messages messages or messages like blue plus e no i'm sorry uh nothing here this is in here messages loss of class e messages left plus e and in here we need typing message well typing message chat typing message typing message and not message user and user is equal to user well so that's good good stuff messages plus e well that will do that is great so the next the next step uh we need to change new messages message form well from chat room we have handle start typing and handle stop typing well the next stuff that we need to add well in text area i need to add on key press and is equal to is equal to on is equal to handle start typing and on k up is equal to handles handle stop typing well so it is time to check it out i will close here and here well let's cross our fingers maybe something went wrong but i hope not so hurry sign in and lara signing so let's well lara is typing and when yuri is typing here is typing well as you can see everything is working great and we do the great job guys so that's all for today do not forget to subscribe to my channel and click bell icon to receive notifications of new videos that are released on the channel goodbye guys see you in the next videos

Channel: Allure IT

Views: 1,033

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

Id: SZEJNHTKR2A

Length: 219min 30sec (13170 seconds)

Published: Sun Sep 05 2021