Super Awesome Chat-App With Socket.io and Vuejs | 60 Minute Full Tutorial

hello and welcome to bid films and this is for socket dot IO real-time chat application and what we are going to use obviously socket dot IO because it is free totally free instead of using pusher in various chat app I have demonstrated but this is very easy to setup also it is free so why not use socket dot IO and I have created a demo app for you so let's see what we are going to build at the end of this video so I have opened three Firefox windows with localhost 3000 it just demonstrate three different users so whenever you have come to this chat application he has to give a name so let's give a name here so I'm good and three connections zero online no problem but if I give SATA okay so three connections one online that means apart from the person which is here and then let's give with films and you have noticed that it says but films have joined but if I close this tab for bed films yeah bit films is lived and this means when the user join when user leave we have the real-time demonstration not only that if I type here so I will say hey and look on this side it says uncle is typing great and what if I enter yeah I enter and hear me that means I have sent hey and here Santa has received this message in real time no refresh just real time because of the socket and here it's the bedrooms so why not grab the bed films and that was thought that was uncle not victims so let's go with films here and let's type here hi all so Batum says hi all to these two others uncle and sarthak and this is super cool so if you want to use this app you can go to bit gems and github repository of bit film that means github.com slash bit rooms slash chat app with socket dot IO and you will get this application what I have just showed you here on the demonstration and now let's go and start creating this awesome thing so let's just close this thing because we have to create it right now so first thing first let's go and open a terminal for this socket IO folder and here I will say NPM in it what this will do this will just initialize NPM package but if you don't have an PM it's not a problem you just have to go to node.js dot o-r-g and you can download node on your machine and if you successfully install NPM or known you will get this version or node version both are hair great so as I have told you npm in it in it install in it okay so package name socket dot io that's okay no problem words on description in the entry point get repository then keywords okay everything is good so this is nice so i will close that and everything is here inside the socket dot io folder so i will open this folder with my vs code so here you can see we have this package dot JSON file and it has all these things but what we meet here so let's now go to socket dot io website and here we have this get started tab so let's click on this one and this socket dot IO is super super awesome thing it's like magic it uses your WebSocket system and it just make things real time you don't have to worry about having a configuration for the real-time on your server you can actually create a real-time system with normal PHP back-end MySQL but that will be slow as written here also but socket dot IO is super super fast so we have done this part that means package store Jason we just need to install Express Express is a simple note framework and now here I will simply use NPM install save save to package dot JSON file so save and what we are going to save or install Express and version 4.1.10 so hit enter it will install and if I see after this install we will have dependency here on the packet or JSON which is like this super easy so now we have this package locked or JSON file and node module which contains various things which we don't have to care about okay so let's now go back here and now we have to create our entry point that means the index dot J's file which we have here so mean index dot J's file we have to create that because this is the file which will initialize this package or whatever you call it project oh good ok so let's create a new file called index dot GS and here firstly I will get server but where I get server server is like require Express and there's done so if you see here yeah it's not server it's app ok so app not server ok and then we need HTTP that means actually now we need server so here HTTP is equal to require HTTP and dot server and inside this server I will pass my app it's just a simple part you using Express Cheers and now we need to create a route so it will like app don't get whenever we get to the base URL slash then we need a function I will use arrow function and here we just have to thing request and response so first one is request second one is response okay so here what we need to do we need to give a response dot send sending let's say we are sending an h1 tag which having hello world or hello socket dot IO hello socket dot IO so this is good we have created this route but where we are going to show this that means where is our server for that we have to create this server or we have to listen for server so now HTTP dot listen and listen on port 3000 like this and this is not inside single quotes and then again function arrow function and whenever this is done we just have to say console dot log connection done simple thing but how we will start the server okay so small starting a server we need to say node and whatever the file we have to initialize and our file is index dot J's it's super easy you want to say hello to go to an extra chips file and start the server so index dot cheers now hit enter so it's saved connection done because we have console.log that thing this means what we can actually say here if I go to Chrome I will say localhost colon 3000 and hey hello socket dot IO which is because we have passed this file but it will be very hard if you want to send whole page and write everything here so why not send of file so instead of sending this one I want to send a file and this file is index dot HTML so we need to create this index dot HTML simple thing so let's create this file index dot HTML and here I will say exclamation and HTML and let's remove this and I don't have these things the s sng s certain that one also and page title is socket dot IO chat app good ok so either going to have a h1 tag here and I will say hello from file simple one again so let's restart our server because we have made changes in our index dot GS so let's do one more go to Chrome refresh ok it says path must be absolute this means we have to say the absolute path which is like here we have to say directory name and then we have to say index word directory name and slash index dot HTML so once more restart the server go refresh and hello from file pretty normal things nothing I mean nothing comes like socket so let's go and get the socket so now we have to initialize the socket how we will get the socket first so here you can see again use NPM install socket so open terminal and let's open new terminal and here socket dot IO so let's install this and it says some error which is like the problem here is our package Jason name actually is socket IO so instead of socket dot I will only use socket so that it will not clash with the dependency we are going to install and now it will install socket dot IO yeah so this is good and we have installed that and now we need to initialize the socket also again we have to use this kind of notation so let I we will call socket as IO so require and require what require socket and pass our HTTP that means our server so this is good and then now comes important part we have this kind of BS sending the file we are having the server now we need the socket connection so to have the socket connection to listen for the connection we need this one so it's like IO dot on and connection when there is a connection then we need a function which will simply say console dot log and there is a connection simple one so let's now go and restart our node server because we have me changes here and again some problem which says find modules socket ok socket dot IO once more and yes connection done but there is no console of there is a connection why this is because on our index dot J's we are not connecting to the socket so how we can connect to socket from our user end or from our HTML point for that again if I go here we need to have this script and this script on our HTML path so why not grab that and paste it here and this is simple saying that okay get this socket IO dot J's file and initialize the socket this means whenever we initialize this this page loads it initializes and then it says yes there is a connection and there is connection will console.log here so once more rips re open yeah reopen the server so this is good and let's refresh it and yes you can see there is a connection if i refresh once more yeah there is a connection because every time it disconnect and connect simple and here we have one more thing io dot on this connect okay so simple one again and I think this is this connection let me try this console dot log disconnected and restart okay so there is a connection there is a connection two times there is a connection one more time but if I close this okay so disconnect may be so I think the problem is it's not Skye oh it's simple socket so we need to say socket on disconnect and then it will connect so one last time and it says socket is not defined spell it corrects a Turk okay so refresh and another problem socket dot disconnect why is that because we need to accept this socket from this function Wow very nice okay refresh there is a connection disconnect and then connected so you get the idea how these things are working let's go and see what next we need to do okay so these things and yet they are showing the disconnect part these things are good but what if we want to connect with our user or whenever user do something we have to omit an event and listen on this socket so for easy so let's just install view Cheers so let's get the CDN so view GS CDN and the bujji's library now let's grab this minified version so copy this with a script tag and here on our HTML part I will just after this socket paste that and now initialize that so I will say here latch view is equal to new view now maybe if I call it app that will be good so now we have to bind it with some element so element will be having idea of app so why not delete this one create a div having ID app and now inside this I will do everything whatever you want so just say on the created cook I will simply use console dot log and create it so let's drag this one on Chrome so open dev tool refresh this page and yes it says created that means our view is absolutely working fine and if you don't have that view dev tool that's not showing here so you need to install that so why not close this open once more okay maybe I think we need to have that too this one that is minified version and the minified version is for production and not for what we can say not for testing purpose or development purpose and now you can see view tab is here so view dev tool is here and it's very easy just install this extension good nice very nice ok so this is good end last thing we need to have what we can say we need to have a bootstrap boot strap and CDN once more so bootstraps idiom let's grab this one also for just selling purpose so let's grab that and here I will paste it simple enough so this will just say dot container and this will give us a container and here what I will do I will just show you how this socket things works so what if I will say here whenever there is a create part that whenever something creates this page loads then we have to say socket socket dot to emit and we are going to emit an event and now name the event event is created and then we need to pass something if we want if we don't want and that's not a problem so let's pass sarthak not a problem lots of not at all okay so go to index dot J's and here I will now say socket dot on and just like we are listening for disconnect just like we are listening for connection we need to listen for our created event which we have created here so maybe I spell it correct okay and then we are getting the data data we know it's Martha and now we need to again emit an event so this time we will say socket socket dot broadcast and let me do one thing I will say I Oh dot emit let's try this one and emit again once more created hook and again let's pass the data and let's see the result so here we are emitting event on the server we are listening for event again we omitting event from the server and again we have to listen for that so socket dot on created function get the data and here let's console dot log data let's see the result but as we have made changes let's restart the server great so refresh and hook socket is spell a spell correct why I am doing this okay so let's refresh and you can see sarthak is here because it's now coming it's always coming from the server so what if I don't want to listen for my own emitted event because this event is emitted by me and if I try to open another tab this is again emitted by me and I'm also listening for that so there is one more thing if you don't want to emit event for yourself also you can use socket dot socket dot broadcast dot emit this will just brought us to other not you so as restart the server refresh and you can see we do not have static here but if I go here yes sarthak is here so refresh here no soiltac yes once Altec is here one Celtic is here also okay so this is the way we can omit any event and listen for the event this simple simple part is this how you can omit how you can listen on server and on the server you again omit and listen on the client-side simple thing we are going to use this thing to create our chat app and to save the time because we have done lots of thing to save the time I will go to my github repository so ditch her bit fumes and chat with socket dot IO and I will grab the HTML part so this HTML here you can see we have lots of things and why not create these things because there are many view GS hooks so maybe you will get confused so let's open get good strap and document component firstly grab the card simple one with a header and footer so not put our only header maybe this one okay so yeah yeah this one okay so let's grab this one and paste it here okay so this will be like my a logged in chat app because Aladin can do all this kind of magics okay so these things remove this and no styling bro and I want it here theme so BG background of info and that should be a class ok good so let's see how it's going to look mmm too white so why not give a new div having call LG of let's say 6 and of such of LG of 3 so this is good and move this card inside here how about this nice Aladin chat app and Aladin chat app has text white great so this is good and now we need an input box so let's go to forms and this is the simple form so let's copy form here and now because we are on card so we can say dot card body card - body and like this is that God - body we will see yeah correct so this is good and now we don't need this ID we don't need this something whatever it is I will say simple type hell and no small tag and no label and just a simple button and maybe button has to be smaller so BTN FM and this is good and let's say add not submit ok refresh good but this ad has to be here I think we don't need any button we will use direct form submit so at submit dot prevent and we will say send this is the method we will create in our view okay and let's initialize the model of new message so new message will be here so let's create a data and data is new mesh search base which is initially null good and let's see what we need okay and we need another data messages which will be an array so that on this Ally we will save v4 message in messages okay and here we will show message simple thing so these things are good and this means if I type here hit Send oops this has to be text okay once more hit send it will send or actually it will add that message here and add that message here or so by using the socket so let's create a send method so methods method name is send okay and in this end what we need to do firstly we need to move new message from here to messages so this dot messages dot push this dot message or this dot new message new message and as we are pushing this we need to use socket and socket that M it an event called chat message chat message and then we need to pass this dot message okay and this has to be new message and as we omit that let's empty out this new message part so what we are doing we are just moving new message to messages array then we are emitting an event then clearing out new message let's go to index dot GS and now here let's use socket dot on and the new event is chat message here get the data and now again we need to emit and obviously we need to emit two others not to itself so chat message and get the data here so here we are emitting listening here again emitting and we have to listen here so socket dot on chat message and get the data once more and let's push it to messages dot push and that will be the data so it's super easy we are pushing here but this one is for others this one is for the user who is sending message this one is for who is receiving the message so let's go refresh here refresher and we need to refresh the connection that means restart the connection so once more refresh refresh type here hey hey is here let's see here yeah you can see it's becoming a real-time system one or two one thing when we receive something we need to have on the left side and when we send something we need to have that on the right side so maybe it will be like what is the type is that type of sending or type of receiving so whenever we are passing the message why not pass is like and JSON object and I will say type is because here we are pushing it so type is let's say 0 0 means ascending and let's use this here and it's like data dot message so data dot message and this is receiving so type is 1 it's just my convention of saying type 0 means send and type 1 is receiving so it's now time to have some kind of system here which will just move these things so I will use span and inside this span I want to have this message dot message okay and let's give a class but we have to bind the class and I will say the class name is float on right okay float on right when message dot type is equal to 0 okay so let's see how it's going to look so refresh once more here here also yeah this is on the right side because I am sending from here and because here receiving we are not having that why is that maybe here if we are checking ok data dot message okay so we are pushing to okay so problem is we are just passing that message here so it will be not data dot message it's simple data okay so let's go refresh here refresh here and I will say hey I was doing just one before I met you okay so this is good and looking nice but we need some other features we have seen in the demo part which is the typing so typing means whenever there is something change in this text box yeah that is nice so why not create a watch property in a view there is a great thing which is called watch property that means it just watch it your data and which data we want to watch it is new message and it has some value okay so whenever we have some value then what we need to do we need to again emit an event socket dot emit an event which is called typing okay and now if there is no value let's stop the typing so it's like stop typing to emit events so two events so we need two listeners for that so let's create let's get two event one is typing and that should be here also typing another is stop typing great so again we are listening for that event and we are once more omitting event so let's once more listen for that so socket dot on firstly on the typing we need to listen and whenever there is a typing so let's create a data which is like typing is initially false okay so here we will say this dot typing is equal to true let's see what we what will be the result but before that let's create a stop one also so stop typing and this will make it as a false okay great so here it is and it says - take what happened today okay so let's move these two side-by-side so that you can see it clearly so this is here and this is here okay so these two are here so refresh here refresh here and what if I type here so let's open view def 2 and here let's just open it typing is false if I type here and go here it says nothing typing is still false what happened maybe here what will be the result problem is we have not restarted the server so let's restart the server refresher refresh here also and click here type and yes you can see it is true this is good so whenever we have typing true we need to say here like small tag and make this not inside a lie where we can show that we can show just here after a Laden app or just above this a lie so a small tag having we will say if typing is true so V if typing is true then we will say user is typing okay so this is good once more refresh refresh refresh and hey you can see user is typing and if I remove this user is not typing if I send this messages here typing message is gone so let's make it little cool so giving a class of text white and float on write text white float right hello okay user is typing great so I think float right is not working not a problem good so usually stepping is good and next thing is we can move this user stepping on the right by just saying here text on right so maybe this will get on text right but this time we have to say text float left so if I go here hello so here it's on left okay it's not working let's refresh once more hello okay the received one is on the right and send one on left send one on okay so do one thing this will be 1 so if receive the message then move it to left otherwise has to be on the right so hello Yeah right on left and if I type typing messages on the right good so this is nice and next feature is like we need to have some kind of system where user can give its name so let's add here just above the card one simple h4 and firstly I will give a div and here we need another form so let's copy this form from here paste this form here and here we will say this is the form to have add name ok and v-model will be simple name and give your name this will be the placeholder so whenever this is here so let's give h4 of set your name ok and now let's see how it's going to look ok set your name so we need a submit button so let's give this call of let's say 9 and then input button it's a submit button and value will be ad and then class will be form oops not form BTN BTN SM and BTN simple FM is good and margin left of 1 let's see how it's going to look ok it's having some problem ok so class BTN BTN BTN info mmm this will work good and let's give it as a row so that it will add up here great but let's create a new data called name which is initially simply null so yes it is not so what I want to say that if data is null or let's use one more data called ready which is false initially so what I am going to say if V if ready is false so if ready is false then show this otherwise B if B else simple so let's see so we are saying that if ready is false then don't show this chat app part just show this message that you need to send a you need to add your name and just after this maybe I think we need another one for showing the name so this will be V if ready is true and here I will echo out a quote show name so we just need to add the name so add name we need to have this method here so add name will be like this dot ready is equal to true because we are using V model here where is that we are using V model so it will already fill the name property so let's see what I am going to say here it says ok ok so the problem is I have used B if hair also so maybe I can use V else if that works yeah it is working so in this root element you can see we have let's open yeah ready is false name is null but as I type uncle yeah name is filled but ready the still false so as I add it yeah it is becoming true and uncle is here so maybe this one can be V if off ready is true ok so once more try NKU our ad and yet chat app is ready here simply here also if I give Sark yeah nice so this is good so as the user type here we need to emit an event that someone has joined so here ad name whenever the person adds the name we need to have socket dot emit and this will be like joined joined who joined the this dot name join name so we have joined name so let's initialize or listen force okay dot on joined and give data and broadcast to others for the joint passing the data now again emitting so again we have to listen for that so let's listen for that socket dot on joined then data which is actually the name so let's use this dot online persons what whoever is online we need to say here this dot info dot push and pushing and Jason which is like name is whatever will be the data and type this is the type of joined so how this will going to work so firstly we have to initialize this info so info is then array okay and let's see call this array here just after this container or maybe after this one we will use simple P tag here and inside P tag we will use V for to loop through item in info okay and here we need to say item dot name that means who have is joined or lived so then it's like name and then item dot type but this will only going to show V if ready is true when you are ready when you have given the name then you can see who is entered or who is lived so this means whenever someone leaves so what is the function of having leave so this will be like window dot on before unload and whenever there is this kind of event that means there is a unload that means it's like closing of the window then again use a socket and emit an event which is like leaved okay so leaved who leave this dot name similarly let's listen for live so joined lived data and lived so listen for leave also so there is that yeah join here so leaved and this time type is not joined it's leaved so let's now see how it's going to look refresh this refresh this and I will say a and K you are no information because this one is not has ready so Sarek hit enter hmm we are still not getting here what is the problem as usual then my problem restart the server ok refresh refresh and give uncle here and give sarthak here and sarthak is joined uncle is joined but this is stay here we need a system to disable this or dismiss this so it's I think easy why because when we are pushing this thing we are showing then after some time set timeout after let's say five second we can say this dot info become empty similarly here empty so let's try this and refresh refresh in key you are at so our tuk at one two three four five six okay five second and it's gone so if I close this tab sarthak lived and this is exactly what we want so once more get back this attic yeah here so let's say hey typing and send this but we need some kind of system that it is send by me and it is received from uncle okay so this means whenever we are sending the data that the message we are sending so we are sending here instead of sending this message only we need to say message by also so let's again say message and messages this then user is this dot name similarly we have all these things when we are listening to so we need to say data dot message and and user or by is data dot user so this is good so message dot push all these things but here also we need to say bye that means when we are sending we are pushing it locally so by is simply me okay so this is easy not a problem give uncle here okay gave slanted here okay so let's say hey it's high okay so it's not showing because we have not get that thing so just after this let's use a small tag and this will give message dot bye and it's has to be it has to be like : I don't know what we can use that here so let's use uncle here start tuck here and I will say hey a user typing I think we need to say uncle is typing we will do that so hey uncle but hey comes here uncle goes there so maybe we can move this inside this is pen so it's like this once more once more Santa comes here okay this time let's get becomes like hey hey from Santa hey from me and the venerable we are saying that user is typing we need to send the typing name the person who is typing so let's say this don't name and on this server we need to listen for yeah we are passing the data data data everywhere so just listen here name and why not call typing is name so it's just easy whenever stopped typing as false but whenever there is a typing event then we are just having the typing data the name of the person who is typing so here we are we are showing your showing typing users typing instead of I will say typing is typing don't confuse this typing and typing typing this one is actually the name of the user who is typing so let's call this ankle sock and here hey and Chris typing great so here I can say hi Santa is also typing okay so he is coming here hi come there we have an awesome chat app with socket IO noches Express view Jesus just yes Wow very nice and the last thing we have to do here is number of connections we have so again go to index dot J that means on the server side we have lots of things so joining part typing part check part so let's move this here created disconnected and I think we don't need this one even we don't need this connection okay so let's try one thing console dot log of object object dot keys of i/o dot sockets dot connected dot length so it will just give you how many connections we have so if I go refresh here refresh here also console log open this console log so actually that will be this one this console so here done connection is one and connection is two so if I now open one more tab so you can see connections three so number of connections is described here so why not instead of consoling log IO dot image an event event name is connections connections connections good so this is the connections and on the client side we just need to listen so let's create a data for the connections so connections is 0 so when we need to listen so let's where we going listen oh let's listen here so socket not on connections and when we get the data so data this dot connections is equal to data number of connections so let's give here a span class of float right well right float right and he'll just echo out connections and this is actually going to give the number of connections and like 20 or 3 connections so this will give number and then word connection so refresh refresh anchor vo connection connection and here's our talk zero connection okay that is because my problem restart the server okay so refresh this refresh this so give anchor here three connections because one two and three three the Psalter three connections and if I close this one okay so again it's still two connection so maybe we need to have refresh okay after some time it refreshes so smart cluck new connections if I open once more call it with fumes three connections okay so three connections are here and in that way we can achieve whatever the things we want to have because we have the power of socket dot IO in our project and we can make these things real time and having everything on our project like a new like a super super cool app so if you have liked this episode please please don't forward this channel if you if you want support bit films then just go to patreon.com/scishow be a huge help and you will get some reward like some free coupons for udemy courses and if you can't able to do all these things there's nobody you are my friend bro just go and subscribe to this channel and like bit films on Facebook Twitter and Instagram so we will meet in the next episode till then goodbye

Channel: Bitfumes

Views: 29,403

Rating: 4.8133335 out of 5

Keywords: socket.io node.js tutorial, socket.io tutorial, socket.io chat, socket programming, socket, websockets, websockets tutorial, websockets explained, chat app, chat app socket io, socket io tutorial, socket io, socket io node js, 60 minute tutorial, bitfumes, laravel chat

Id: wYqzv_oxyl8

Length: 55min 35sec (3335 seconds)

Published: Tue May 08 2018