Easy Real time Chat App using Angular, Node and Socket.io

hello my dear friends i'm happy to see you again and it's gonna be my new video regarding chat app uh the stack of technologies that we are using here is gonna be angular not node.js and socket.geo for some of you it might be interesting to understand some new technologies and etc and i hope you will enjoy during watching the video so please subscribe because put the like button because a lot of you watching it without subscriptions and i really appreciate it if you subscribe on my channel and another one point that i want to make here the reason why i was absent for a long period of time because uh currently i'm busy in my current job and also i started teaching some students but this course is almost finished so i will try to do more videos for you and enjoy the video and let's begin this new video so first of all what we need to do it's uh we need console oh i forgot how to block new videos okay wait in terms yeah we need it so i already created a folder for our app and also because we're gonna use angular and node.js we need to differentiate this so for angular i can i use client folder and for not it's going to be just here so first of all let's do npm 8 here we don't need anything here for now okay npm we need gonna create a package.json file and for backend part on js especially we're going to need a few things the church that we're going to need course but let's install it of course then express another one build our app and socket dot eo that's the whole thing that we need for this and to [Music] uh create angular app we're gonna use angular cli for this so it's pretty easy to do with it you need to go to place it not what i needed they change something probably yeah so i'm glad that you still i and here you need to install global cli and to create a project you just need to do ing new and actually i'm gonna remove this folder for now trash yes and create we're gonna use another terminal in g and new client okay it doesn't know g comment let's try in another way here our folder here we're gonna run it sure i don't have it here okay let's run in terminal new person i don't need this chat i need chat folder here and engine you climbed why it doesn't know okay let's try them to install i'm going to put wrong but i had it before i'm sure that is at all you know some troubles could happen during but here also we need a new file for server we're gonna call it server dot yes and it's gonna be our second part three new client yeah now it's working okay let's uh work on server side for now also in package to json we need a comment to run a server for this we're gonna use let's call it serve and by this command we're gonna run on the mod server but yes like this and here to [Music] some basic uh during the install using cli and glove will ask some questions do you want to use strict mode uh routinely do you need to know what do you want to use which pre-processor i'm gonna use this css because it's easier for me but i'm sure for most of us we already knew what it's uh preprocessors for css so just easier so let's start working on our second part we're gonna need here express equal require it's gonna be express then let's copy of course then gonna be our course then we need to initiate an app you need by app and here called the function express then we're gonna need uh hdb for this we're gonna need provide a module for http and create a server and pass here our app with this we're gonna establish our connection and also we need uh to do here http dot listen uh on port let it be 3000 and call arrow function once callback once our port is running like server gonna print something uh server is right like this and then we yeah in general it's gonna be the most basic thing to start our server but we're gonna use socket and maybe you asking yourself what is it uh secretary is a thing that like real time um messages event triggering on backend front end once someone emit an event so it's real time thing happened on clients and multiple clients could connect to one server and once one client trigger an action another client will receive it so it's like streaming data between clients so we see for example here like different things happened and on socket.you you could to read different documentation uh try to understand how to work with it and just in general it's just a thing that client in our case is browser connected to server and once some other client for example connected we could broadcast different messages like chat for example client type something we through we emit this event on one client extend action to server and then from server we broadcast this to our all clients in specific room or we could emit the section to specific user so it's pretty cool thing to do so we're gonna start uh doing things from server side and then on client we're gonna use what we created on server so you use a socket you need first of all create a variable that i for example which is required we're gonna import our socket eo then and immediately call it and pass here our http server with some parameters so by default here available course and some other parameters that we don't need but in our case you could specify uh which method methods allow it by course uh type of get post etc then uh origin which allowed not all but we're gonna allow all origins so it's not our case so here you can pass different parameters for your socket. connection then what we're gonna use then we need basically we're gonna create some we don't need it right now but let's create it uh some basic request response endpoint just a getter and here we just first sent hello like this doesn't matter actually then what we gonna need because it will be chat but actually not multi-room we need uh to have the list of users for this i'm gonna create a variable called the user list and uh for our case we're gonna use uh map it's almost like arrays but identifiers here could be unique you can use different methods methods like set get clear get keys and etc so it's pretty useful in some particular cases okay to establish our connection we need uh was an event for our variable use that we created with sockets we have a connection event for our websocket server and uh here we have one parameter once client is connected to our server we're gonna retrieve uh from it socket uh circuit contains uh different parameters it could be we could process query username for example that we're gonna do later on uh it has unique id and etc so it's a basic uh information about your client what are you gonna do this uh we first of all gonna create a few functions which uh gonna take care about our user list one of them will be at user here we're gonna pass a username and id of our user it's basically we're gonna have the list of users right now connected to our kind of room but we do not gonna create like multi-room chat with it's gonna be just one room but still with a list of users so what we need to do here if uh user list uh already still don't have this username so if user in our user list will be unique by username then we're gonna do user list add that set um the key will be our username and uh here we're gonna use set off ids so we could have the same username but the list of ids will be different and here elsa if someone already we have the user with this name in our list then we just get the sets of ids by username and add a new id inside our set and another one function that we're gonna need here is to delete user once is connected we're gonna need to delete we have the same parameters here username and id and we just check if user list uh he has this user name then we're gonna do something we're gonna retrieve user ids user list get username then we check if user ids size so if this username doesn't have ids i'm gonna do user list delete this username so let's begin with connection to do something we need to actually once the user connected we're gonna do there the next thing here we're gonna get the user name to get it once it connected we're gonna pass it in query on our front-end side but on backend we have a property in our socket handshake and can check s query and in query we're gonna pass username you'll see how to do it later on and here we're gonna add user with our username and for this we're gonna use socket.id and then that we're gonna add by this our user to the list then to all connected uh clients we need uh broadcast and here i need our user list and here it's gonna be an array of gonna use spread user list and here is the name of why we are doing this because user list keys has some methods it's not a collection it's uh and it's not an array it's a array with some methods and it's not possible to pass here methods with the list of users so we need to get from keys only strings and by this by spread we like remove methods and get only string parameters so it's really useful and what broadcasts do it emit an action to all connected clients so to emit uh just for one we gonna do the same but without broadcasting when we use socket emit that means that we trigger an action only for current connection but broadcast for all connection so it's the difference and also here we're gonna need uh a few more things once on the front-end side will trigger emit message we're gonna retrieve from front-end message which we need to broadcast to all other clients message [Music] and here we're gonna send it uh as an object one property is gonna be message sg and another one is going to be user name from which user we get this message and here we pass username like this and another event once uh client disconnected we need to remove it from user list it's a standard action for secondary eo also here we could have a reason why it happened it's like few basic scenes but we don't care about this we're just gonna call here remove user username and socket dot id that's what we have and this seems like that's all what we have for our backend part let's actually check and p.m run if it's working yeah and something is going on local cost 3000 we're done with uh server side the next part that we're gonna do we need to uh work with our english thing here we're gonna need uh to install socket uh the name of it i forget load io client package this one we're gonna use uh for uh i need to do it in client folder this one we're gonna use to connect to our dragon site and here let's run build to do initial build here and what we're gonna need we're gonna need to let's create here containers and components folder folder is set components in general in angular we have kind of two different components one of them dummy another on smart smart actually doing different kind of logic like get data from server doing some actions but the dummy components doing minimal thing so that's the biggest difference i would say uh generate component now let's call it uh chat read in a block yeah chat about this i need on the let's remove it here it's another front level i needed app control and here we have chat and in our app component to run our project we can use npm run start here in package.json if you use cli you will have some basic scripts which helps you to work with angular and in app component we just call app chat like this and it is at our app component yes chat component we needed to add to module collaborations here chat component and import it support like this yeah compile it and it's gonna be on i believe on localhost zero yeah chart works okay and uh we're gonna need uh another stupid component um like one of them was uh smart this one is gonna be stupid uh this one we're gonna need to to input username name component a lot of mistakes the names etc rename compo and let's keep username as it is but maybe i would say i didn't want to refactor everything so first of all let's start with our uh what is it shot component uh let's define here some things for html probably i'm gonna use bootstrap for this no let's look like this no i don't need it i would say container container it's for our chat then we're gonna use here app a username component and we're gonna need uh some title i would say attempt programming then container for our chat box inside of it we're gonna have uh two things one of them is gonna be user list here we have chat box i user list here to user list and later on we're gonna print here the list of users once we retrieve them from backend so let's call it plus chat box user active like this and here later on we're gonna have the list of users and not there one list i would say here we're gonna collect all messages that we get from uh second messages and we're gonna edit later let's work on empty callback let's work probably on our username component just to cover this part and that's it so for username we're gonna need okay already something we're gonna need just give here and we're gonna need input where user could type his name and uh inside this input we're gonna need here uh username variable by default it's gonna be empty stream and here we're gonna use uh ng model you have uh the way data binding and here username and to use it we need to import forms modules or module thumbs launcher i don't know why it doesn't want to import module here forms right now we're gonna be able to use ng model here and then what we need to do next is to have button on which we're gonna click leak and that username and the function is going to be called set user name let's say copy this and use in our username component here what it's gonna do i wouldn't put it on it here remote uh we can i have so in angular it's possible to define input output from the child component and here we're gonna use output pass the username from child component for this we need to define new event emitter with type of data that we're gonna pass it's gonna be string and code and here in set username simply we're gonna do this user name event commit it's gonna it's like they work with socket hero looks the same as with events in uh android what what talking about zero arguments but get one here we want to have white what function is gonna return believe yeah not sure what okay no no and then we need to handle this output username event and somehow we need to uh update the username so let's call it username update and here we have an event and this event is gonna be the variables that we retrieve from component child and here also i'm gonna add ing if so if we already define a username then we don't need to see this thing anymore so and this one we're gonna copy and inside of our chat component we're gonna define a another variable user name equal green empty and our function for username update can retrieve a parameter name it's going to be string this return void and uh what we need to do here is uh username call name uh then here the most interesting part is coming uh here we have uh we will need message uh equal uh string it's gonna be used for chat box then we have a message list here to show them for each client uh it's gonna have uh like uh it's gonna be collection of them first property is gonna be message another one uh the username gonna be string and the last one is mine to understand from it's our message or another user and it's gonna be collection by default it's gonna be empty and also we need here user list it's gonna be collection of strings well yes and the last one but not the less important it's gonna be socket it will have type any and for this we need to import uh all s eur chrome pocket your client like this so let's establish our connection we're gonna do it once uh we said uh getting don't need it i believe here we're gonna connect uh once the user is set his name so here we're gonna do the next thing this socket equal you so socket your client that we and it has a function to connect uh you here we're gonna have uh localhost 3000 but also it's useful to use here some variable and here we're gonna need to yet i would say oh let's have here on some brackets brackets don't remember the name of it and here user name a equal name this thing we need to pass to backend as if you remember we edit here and jquery username that we're gonna pass this query so the same thing we're doing here gonna pass our query username funny thing uh so we need to handle socket on the event when we get the user list so for this we need on here user list when this event happened we're gonna use here a callback on backend we're gonna retrieve here user list actually it's gonna be green array of streams then we get into this error function and this user list equal user list basically just set it to our user list then we need to do send to backend probably to do up here once we update a username we need to emit an action to set a username yo can i use name and then we need to handle action when we broadcast messages of this one once someone uh type a new message we need to handle it we check in we like kind of subscribing to messages from a server and this one is going to be an object host message property stream and user name and error function here and once we get data let's check that we have data once we get data we gonna do the next scene we push this message in our message list push object message data message uh user name data username and find gonna be false and we need another function once we want us to send a message uh here it's gonna be type void and when we sending a message we need to do this socket emit message event message with this message then we need to do the same thing here to edit the message list but right now it's going to be this this and it's going to be from us then we need to and this message we need to set again as empty line like this let's switch to back to html right now we have user list messages list and everything that we need output username event not username component what does it mean ours here punch error ah i don't have wrong import angle core this this automatic imports doing from hell so let's switch to our chat right now we have user list message list and whatever we need so let's print here user list for this we're gonna use in g4 directive it's a structural directives we have like general three type of directive directives in angular components one of them it's a directive but with template url uh structural and attribute directive those structural uh directives they somehow [Music] change the dom and attribute directive change just appearance of our elements so here we're gonna have user of uh user list and inside of it we're gonna print our user is then regarding chat box uh for each message we're gonna use ng4 the same here message of message list and here we're gonna need to use attribute directive in cheap less g plus and what it's gonna do it's gonna set a class mine if message mine is true and by this we're gonna [Music] a move to the right to the left side oh it's pretty useful thing here we're gonna need uh maybe yeah let's copy this name messages let's call it just a message inside of it it's gonna be one more if i would say the names yeah that message let's call it message box and here we're gonna need to have b uh where we're gonna add uh class name and here we put message username here we add separator here and this one gonna be a message and the last things that we're gonna add here it's gonna be the things that by which we're gonna be able to type a message for this we're gonna use ng model again here and it's gonna be message and here we need button click and here and send message function okay like this hello hello hello uh hello yeah the styles a bit broken but general already something i would say so just need to add some styles i'll do it without your attention but yeah and then i'll show you the final result so we just add some basic styles for our app looks like this username friend hello and i've just finished the video about chat app so looks like this nothing critical okay it looks not so bet i would say it could be worse but uh i think it's good enough so we did it and i really happy about this because i didn't see and didn't do anything regarding videos for my channel and i'm happy back and i will try to do as much as possible so i hope you enjoyed the episode please subscribe press the like button leave a comment i will be really really happy and see you the next video bye bye

Channel: Competent Programming

Views: 4,688

Rating: 4.8688526 out of 5

Keywords: chat app, websockets explained, chat app react, chat application, web development projects, web development, web development course, real time study with me, web development full course, socket io, web socket, socket.io chat, real time, socket.io tutorial, websockets, socket.io, node, nodejs, express, javascript, js html, angular tutorial, angular 11 tutorial, angular 11 tutorial for beginners, scss, chat app tutorial, nodejs websocket, node js project, typescript tutorial

Id: 7wqXt9iU3rk

Length: 53min 3sec (3183 seconds)

Published: Tue May 04 2021