Building a Chat App using VueJS, Socket.IO and NodeJS | Manoj Singh Negi | Recraft Relic

i think there is some kind of problem with the you know with my obs software but yeah let's start again so yeah welcome um and today we are going to build a vue.js chat application using socket io and node.js i already have a sample application in here so yeah let's get started so i already have this uh you know sample application and if you don't know how to start a vue.js dummy project i will link the information down in the description all right so you can see we uh we have this project you know and this is running here to start this project you just have to do yarn serve and this will get started at port localhost 8081 so now let's you know because we are building a chat application now let's start by building our chat app component all right so let's go here and in the components create a new file called chat app dot viewing view and yeah so now we can just you know firstly for most we have to define the template so you can just define the template and here i'm just going to type h1 uh you know h1 and then the you know now name the chat app okay now let's okay now let's try to you know export this so script uh we don't need this so script you know um export default name of the component called chat app and yeah i mean that's pretty much it right so export default chat app now let's go into the view and register this component so import chat app from the dot slash component slash chat app and uh register this component here all right so there is some aspiration but not used okay so we have to use this component and instead of this sample app i'm just going to use chat app you know chat app this right so now uh we have the chat app here here right so why this is not working yeah so you can see the chat app right so now uh we have successfully registered our component now let's start building the you know ui so let's get started chat app now you know we'll define by creating an input and a join button so basically what we want to do is whenever someone wants to join the chat we want to define their name and uh you know then click on join to join the chat all right so we'll start by that firstly and foremost i will go here and create a dev you know and uh inside that div i'll create another div which will you know basically hold our input i give it a class of you know maybe current name container maybe right name container and inside that there will be an input type text right and it's it's clash will be user name and then there will be a button there will be a join button okay so there will be a join button join like this so button join button right and this uh the you know class for this button will be class join button okay so you can see it here but i don't know it does not looking good so i'm going to you know add some styling so let's go here and add style right and we need scoped style so we don't want the style to escape this component you know and affect other components so i'm just going to scope this style and now let's style uh let's you know start styling this i'm going to give this a class as a parent container right and in this inside this parent container uh the width will be 100 the height will be hundred percent right what i'm doing um width and height should be hundred percent its display will be flex so i can you know center it out or center the input justify content will be in center and align items as well in the center and i'm going to give it it's uh you know the position to be fixed because it is not taking the width high within the you know height of the 100 of the body because body is not that you know body is not you know covering the full browser but after giving it fixed it's going to you know um take html as the parent the browser window as the parent so it's going to expand you know and cover the whole area instead of a lime item center i don't think this looks good instead of that i'm just going to give it a padding top you know padding top which will be around 150 pixel so this now let's style our input um dot user name let's increase its height first right um font not font but the height height should be around 30 pixel and then the font size will be around 20 pixel and then there will let's see if that works okay maybe [Music] this seems fine i guess right i mean okay all right so let's give it a padding 5 pixel and margin bottom 5 pixel maybe the reason i'm giving it margin bottom because i want this join button to be here so for that what i'm going to do is i have this container named which is the parent of both of these what i'm going to do is i'm going to say name container display flex display display flex not like this flex and flex direction to be column and then this joint will come down right so now i am going to style the join button a bit so dot join button and uh dot join button its height will be what should be its height let's give it the same height as the input height 30 pixel um let's give it up you know not a padding because it already have a padding right so let's see let's just increase this font size right font size to be uh i don't know 20 pixel maybe yeah this seems fine yeah okay so now let's uh this uh okay so this seems a bit you know bigger the input let's uh just limit the width here let's see yeah okay now uh let's tax align the text at the center because that will look good i guess right yeah and let's give it um the font size not the font size but the font weight to be bold won't wait to be bold yeah this looks good now right so now we have this button you know whenever we what we want to do is whenever we click on this join we should you know connect to our chat server and we should be able to chat so in order to do that you know we have to create the ui for the chat yes but first let's define our local state you know let's start by defining the data uh data i'm going to return the local state and inside that local state i'm going to take if the i'm going to take a variable called joined which basically um track if we are joined or not all right so it's just going to track that right and uh what just happened all right so join false now this dev will only render if it is if the user is not joined right um so i use the vf directive to say only show this container when the user has haven't joined the you know the chat now i'm going to define the method called join and inside join right inside i'm going to say this dot joined is equal to true right and now let's see if that works so i go here click on this nothing happens yeah because it will not happen right so so because there is no click here so we write one sec so v on click i'm going to call join right and let's see if that works so manoj click on join and then it's going to you know basically hide now one other thing we want is we want to capture the value of this input so in order to do that i'm just going to define another one second i'm just going to define another state variable let's go here and say current user which is empty by default right and i'm just going to use v model directive v model and going to bind the model with the current user variable right so and uh when we click on join i'm going to console the value of current user so this dot current user let's see if that works okay manoj click on join and you can see the you know value here so now we have captured the value and we have clicked you know we have we also have hidden this element when the user is joined now let's start by creating our chat ui which will be in like after you know you click on the join so i'm going to start by defining uh dev here right and this and this div will only be visible if if joined right so if we have already joined the chat then only uh only then this div will be visible right so let's start by creating the input where we can you know type our text messages so that will be a text area so i'll start by creating div in our div here and then a text area inside it so text area right and uh do we need this i don't think we need this but yeah let's let it be so firstly we start by giving it a model so the reason we need a model is because we want to capture the value of of whatever the user is writing so i'm just going to say text here and i'm going to bind that model here v model will be equal to text right and then we'll give it a class let's just say text message and uh then we will give it i don't think we need a type because it's a text area so uh and the other thing is we want to send a message when someone hits enter so there will be no send button there whenever we we have written our message and we want to send it we'll just hit enter so for that i'm going to use key press uh key up so key up dot enter equal to uh you know send message so send message right beyond key up dot under send message now let's define the send message method here and we're just going to console.log the you know the the message which will be this dot text so now let's go here and receive that works so manage click on join then you can see this uh input when i say manage hit enter you can see you know the message there or say hey how are you when i hit enter you can see this text uh getting this folder so now we have this text area let's style it because it's not looking good what i want to do is i want to move this text data input to here and uh two at the bottom and uh it to be like you know the full width or it should have its full width as of the window all right so now let's start by you know defining this so where is the text area we have a text message class right now let's firstly define this here and let's say um wait to be hundred percent first that's first right and then position yeah why i want the position to be absolute i'll tell you in a bit so position absolutely uh position to be absolute the reason being we want this uh this you know um input to be here but uh so and that's why we are basically not doing its opportunity to be absolute so for example this um div we'll call it text input container for example and we go here we use it or down here and we say it's height to be 100 vh so it you know it basically um covers the whole height of the view and uh yeah so that's basically it now if we go here in the text message position absolutely we say bottom zero right so it will automatically move the you know input to down here right okay so that is good so now so now uh it's bottom is zero pixel you know that's good let's give it a height let's give it a height of 70 pixel and bottom is zero already right uh let's give it a padding so you know like 10 pixel padding right so you know the message starts a bit you know we can join right now i think what we have to do is i think it doesn't have a right uh box either yeah you can see right it doesn't have the right uh box sizing let's just go here and put the right box sizing okay so now uh we all we have our text area right now let's create that you know the messages list so we have the message so whenever we hit enter we need it to append to our message list right so for that firstly and foremost i'm going to keep a you know state variable called messages which is which will be like the array of the message that we are going to random and then i'll have a div here inside if i'll have a div here uh and uh this will be basically you know uh this will be the message like the list container so i'm just going to say list container and uh so now we have the list container right so now we're going to just render our messages let's define our so we say it has id or random id and we say it has text right so text um hey how are you like this and uh then we have uh like the user which uh you know whoever is the sender of this message so i'll just say manoj for now right uh now i can basically render this here so i'm going to use v4 directive v4 message in messages i'm going to define the key as the id key equal to message.id right and [Music] now inside the dev i'll have a b element which will show our user name and then i have the message which will be message dot text let's see if that works right so i reload the page and i just say go here say manoj join and you can see write the message here now whenever we hit enter we want to append to this message all right so let's create a method for that uh it will be add message let's see if that you know works right um yeah so let's start by add message and we'll uh start by creating our new message so id will be randomly choosed so id will be new date dot get time so by that it the id will always be unique and then there will be the text which will be the uh this dot text and then there will be user which will be this dot current user right so we are basically keeping track of the user right because if the current username is managed then it should be manoj if it's suggesting it should be just in you know and stuff like that what okay the prettier kicks in and now it's uh not letting me do anything so one sec form a document let's save this just fine no no message has signed a value but never use yeah that's fine we'll use it so now will you will get this message and will say this dot messages equal to this dot messages dot concate message right now let's see if that works so i've reloaded it uh and let's see if this works i go here i say i am justin i join the chat and say i am good manoj how are you let's see and hit enter okay nothing happens um yeah because i'm not calling the ad message right so i have to call that message this add message let's remove this dummy message because it's creating confusion so let's uh so we have removed this message now let's go and start so manoj or justin okay manoj hit join say hi hit enter what is happening energy property concrete of undefined uh all right so it should be messages not message this dot messages dot com gate in a reload manage join [Music] hey how are you hit enter and you can see right but the other thing is this is not getting removed right so let's remove this so whenever we send a message we just say this dot text equal to empty and let's see if that works justin say hey how are you hit enter and this got empty as well as you can see you know that my name and my message here so now this is done right so we have a list now let's try to populate it using uh you know using uh you know different users messages and for that we have to create a chat server where we can you know um basically send our messages and you know and also receive message from them right so for that we are going to use socket io so let's start by installing i already have installed it here but you can i'll link down the information in the description it's just yarn add socket i client but yeah i already have that so now let's import socket type link so i'm going to import it inside the script import io from socket dot io client right and yeah so socket i o right now so this plate here is being kicked in let's just and right uh so prettier is giving me some error let me see what is what are there so i o is different that's fine warning insert this insert is at 28th line yes and at the 45th or fifth here as well okay that's fine so we'll use i o so to use io what we have to do is when user is joining we'll say will obviously connect to the you know the instance which will create in a bit but you know it will be local host 3000 all right and we are going to save this instance in our local state so it will be socket instance equal to i o this right so now let's start by creating our uh you know chat server so i so i have a dummy node.js project here but you can simply create it by using npm in it i'll link down the information in the description so in this uh project i already have a server.js so we are just going to you know install uh some packages and just get started so in order to create a chat server real-time chat server you need two things which first is express and the second is socket io so you can just say and add express and socket io get i o so there is a difference between socket iron circuit i have clients the socket table client is a front-end library which will which we will use to you know send messages or receive message in the client side in the browser and socket io is the main chat server you know main real-time server which we can use to create connections between the different uh users basically all right so we already have so we now have them installed let's uh you know import them express is equal to require the require express and then const so now we have to create http server we'll do that by requiring the http the native node.js module http now uh will uh you know extract server from the socket io require circuit dot io right now let's uh create our express server equal to x plus you know and const server our http server http dot create server right app you uh i think you don't need express if you don't want to but i just needed to you know test uh you know if the ebays are working properly or not but if you don't want express you can just you know go with normal http right and now let's uh create our i o server um which will be new io will be like the socket io server server and we are just uh going to take this http server inside us and that's it now let's define our listeners so basically socket type server lets you define what will happen on the connection you know what we what kind of uh messages or what kind of uh identifiers you want to listen to or events you want to listen to so we're just going to do that so io dot on connection so whenever there is a connection so whenever there is a connection we get the socket that current socket so example if this is basically the user connection you know so if there are like two users there will be two sockets so for each socket i'm just going to console.log that user and then we have a socket id which is unique socket.id is connected all right so we're just going to say that and then we're just going to say socket dot on disconnect so if user disconnected uh disconnects for example it uh the user closes browser or closes the tab then obviously the socket will get disconnected and in that in that case we are just going to say console.log user again we have the socket socket.id left all right so that user left and uh we are just going to [Music] now listen to 3000 port which we defined in our frontend application as well and we'll just say console.log chat server is running at running on 3000 right let's see if that works right so let's start by just calling node server.js and executing our script and it says chat server is running on 3000 and let's start by uh you know connecting in our application what we had to do is where it is um here what we have to do is when uh okay so this basically connects to the localhost 3008 so i think it will work let's see so manoj join yeah it's trying to connect but it's not able to the reason it is blocked by course so yeah so near in the newer version of socket io you need to enable course if you don't then you know it's going to throw it the reason is because we are in a different port eight 8081 and 3000 so socket is uh basically blocking you know for securities and it's blocking the traffic between two ports so what we have to do is we have to go to you know server and enable codes to enable course we have to go here we can provide course options so which will be origin can be from anywhere we can request the you know we can request the uh connection from anywhere and methods we allow the cat and post to you know if it is doing long calling so yeah so get post now let's restart our server and let's see if this works so right let's go here and we also have our terminal open here so you guys can see if something pops up so manoj click on join and you can see user this this is connected now let's open a new tab and see if that works as well and i just go here justin click on join and you can see another user is uh you know added so now uh that is great you know and if i click like if i close this then you can see user this is left right so now we have a mechanism to send messages now let's start by adding some events so i'll just say here socket dot on message if you receive a message and we'll will you know we'll also receive some data with that message i'm going to say socket.broadcast.amit so now what we are doing we are building a group chat not a one one-to-one chat so in this case what we are going to do is will whenever a socket send message to other sockets we are only going to send that message to other sockets not to the socket itself so for that we use we are going to use broadcast so for example if there is abc and if a sends the message socket.broadcast will send uh that message if we emit the message it will send that message to bnc not today right so let's do that socket. broadcast dot amit and i'm just going to uh define another event listener called received message received right message received and the data and i'm going to send the data as well right so now let's go to our front-end application and define uh these listeners as well so we have the socket type instance and what we're going to do if this dos socket does instant on if we receive if we receive message received uh you know then will have the data right so we have the data and we are going to append that data to messages all right so let's see if that works so this dot message is equal to this dot messages dot concate data right and on send message we are going to send the message right so what we are going to do cons message id new date uh dot get time tactics or this here what we are going to say this dot socket instance why there is error i just have to put a semicolon so this dot socket instance dot i think it's amit right so ammit and uh will emit the message message like the event message and our message as well so what is happening here whenever we are sending a message firstly formal when you click on join we join the localhost and we basically register a listener that whenever we receive message received event from the backend will just take the data and append it in our chat history and when we send the message what we are doing is we will emit the message event and will send all of this data so the backend can send it to other users let's see if this works okay so i go here reload this i think i have to restart my chat server as well yeah because the broadcast damage code is new so yeah okay so now i'm going to go to chatab.qe and let's say manoj join and i go to the next tab and say justin join let's see if i send a message and manoj will receive or not and uh let's do that side by side okay so i'm just going to close this ah not like that man let's see if that works so hey i am manoj okay so it doesn't seem to be working why it is not working to this socket.ambit message instance.emit message message ah you can see i i'm always messing this up so it should be this dot messages right so now let's go here and see if this works i reload this one i reload this one as well so now this is justin join and let's say manoj join now let's uh say hi my name is manoj hit enter and you can see that the uh justin is also receiving the message hey nice to meet you nice to meet you yeah so i'm i'm able to receive you know different uh users uh like message now let's create another tab right um localhost it's red one and that's uh you know join again let's see my and just say join and say hey i am mary and you can see right just a minute both are receiving the message so yeah guys this is pretty much it uh this is the chat app we built in view js using socket io and node.js um i'll you know i'll put the github wrapper for both front-end and back-end in the description so you guys can go and check it out and yeah just let me know you know what kind of stuff you want me to do in this live coding sessions and yeah till next saturday have fun you

Channel: Recraft Relic

Views: 871

Keywords:

Id: kxNUYySiAXA

Length: 41min 35sec (2495 seconds)

Published: Sat Jun 26 2021