Ionic Realtime Chat with Socket.io

[Music] hey everyone what's up the sign from the tactic and the ionic academy in this tutorial I will show you how you can build your own chat application with ionic and a simple nodejs again with socket IO so I've already created the starting backend template and you can find all the code for this inside the tutorial as well basically we just need this package Jason with two dependencies for Express and socket IO and perhaps the main entry point and then we got the index file where we got this IO on connection block so whenever somebody connects to our back-end will listen to three different events so one is add message this means somebody has sent a new message and then we will emit so sent to all the connected clients a message which will have the type or the name message and the object which is our actual text from the message the name from the person and time step then we also listen to set nicknames so our people will be able to pick their nickname we will set it and then we will also emit a new event with a event here joint so we can catch in our app that somebody joined the chatroom and finally we got the disconnect event where we will broadcast that somebody left the chat the app is running here we can run it with a note in XJS and perhaps call npm install before doing this yes guess that's it so once this is ready you can start your server and simply let it run in the background yes and there it is so it's now running on this port and we can leave this for now with the next one right here okay so I've already started a new blank ionic app and we can go ahead and first of all create another page which will be our actual chatroom so we will start on the home page like it is already configured here and then we will go through the chatroom we also need an NPM package called NG socket IO well perhaps we don't have to use this but it makes our life a bit easier if we're using a socket IO connection to a back-end so okay it's installed so we can go to our app module and import the socket IO module and also perhaps this socket IO config from NG socket IO and then we need to configure our connection the type socket i/o config and this needs a URL which is in our case and the localhost lock we just saw inside the console additional options not really needed at this point so to add it to our module we now go to our imports and say socket IO module for route and pass in the config ok that's everything for the set up now let's continue to our home page that's set on the home page we want to join a chat with a name so we need an input field for our name and we create an ion label set nickname and then below the ion input of the type text and we just use an NG model here we don't need a special form so we use nickname placeholder nickname and that's it and below the item we need a button to actually join our chat so I on button and on click we will call join chat and finally we disable this button this a build on if our nickname is still empty so in that case we will not join as nickname okay if we launch our app we see that it's not really disabled okay we haven't set the nickname eeeh so we go to the type script file and say nickname in the beginning like this and then we need our first connection with socket at this point yes import socket from ng socket IO and inside our joint yet now we start so once we want to join the chat when we click this we call this socket connect so this is the first thing we need to call to actually be recognized from the backend and to be connected through the socket the next thing we want to do is send a new message to the backend and this is done by calling image and in the beginning we want to set our nickname which is this dot nickname and finally after these two actions we can go to the actual chat page so we push the chat room page and we also pass our nickname like this okay perhaps no I think there's no lock inside anyway we see that nickname and we can join as somebody and we get to the next page which is all we wanted um but this is placeholder and you it okay so now we were able to set our nickname and get to the chatroom page but we haven't implemented a chat so let's continue with this now and the chatroom page first of all needs an array of messages in the beginning it will be empty and we will get the nickname through from the previous page and we will also be able to send new messages of course we need the socket connection here as well and we also need the toast controller from ionic to show toast once somebody joined or left our chat ok let's start easy our nickname comes from the left parent so just get it like this and we're good now it actually gets a bit more interesting so we create a function get messages and this function returns the messages but not just one time and we return an observable so this will help us to stay up to date as we can publish new events on this it's observable you will see how in a second observable okay so I said new observable and we got the observer and below we returned our observable okay so what our observable does is actually listening to the socket connection and whenever the event message is broadcasted from our server so you see when somebody calls at message to the server the server emits message so we're listening to message and we will get some data at this point and this data can be used to say observer next data so anybody who subscribe to gas messages will automatically then get this new message so in the constructor we can go ahead and call get messages which is an observable we call subscribe so we will all the time get a new message when someone something happens and we simply say this touch messages does push the new message okay I hope this is clear so far so the observable listens to our socket connection and broadcast whenever a new went comes in we catch this and put it to our messages array to send a message we basically do the same as we did before with our nickname we call this dot socket image to send a new message of the type add message and we pass text they start such so afterwards perhaps set our message again to an empty string and that's all the messages stuff what we need as well okay like get messages we need the same for our users so get users returned observable but here we are listening to users changed event we do all of the things we did before and here we're again using get users subscribe some data and now we can get the user object from data user because again if we go back to the server whenever somebody joins or left the user change event is broadcasted along with the user and the event so we can get the user out of this and we can also check what the actual event was so in case it was that somebody left we can display a toast message and implement a little help of function show toast with a message that's sorry let toast equals this toast controller come on create the message is our message perhaps a duration of two seconds yes sorry about that and finally toes present okay now we can use this so if somebody has left the chat we call this dog show toast and say use the left of the user so this should just be the username and otherwise we say use a joint again with the user something missing with C okay some additional stuff perhaps I only you will leave it makes sense to unsubscribe or disconnect from the server if we are not anymore in this chat so simply called disconnect once you are done and now our chat is actually ready as far as I think so let's see well whatever we open this private window to the left and now let's see I will join as silent and here I will join as fake sign we see already use a joint fixed time so this is working what actually is not working okay use the left is also working fine what we haven't implemented is the actual chat view so let's open the chat room and do it remove this go ahead chat and inside our ion content we will use the grid system to position our chat bubbles a bit better and first of all we iterate over all the messages of our array select message of messages and then we will craft two different column blocks so the first one will be just nine units on the left side and this will be used if the message that from is not equal our nickname we will also add some styling in a second and also actually we don't need conditional styling here right but I will edit anyway let me copy this in and perhaps we could do all of this styling on one block whatever I was ng class you could now say if it is or at the class my message if the message is from my own nickname or at the class other message if it's not from me so this was basically the idea behind this but as we are already making the ng-if here it's kinda useless but we will keep it for now oh this is the class username and we got message dot from and sorry oh yeah but yeah that's fine so we got the user name at the top then we got the actual message dot text so this will be the content of the message and then we also got the timestamp which is created on the server side so message that created and we use the data pipe to make it like this okay and now we got the timestamp as well this is the column for message from somebody else and although it's a bit to placate I will use it like this and use offset three here so our own messages will be pulled to the right this one uses nine from the left and this more or less nine from the right side of course will be used if it's our nickname again ng class is more or less not really needed here but we keep it the rest is the same and below our iron content we also add an eye on footer because we need of course a way to submit new messages so I on role as will be the message row and inside again using the grid layout the input for our items saw Sun just comes through my window while I started recording this but I'm too lazy to move so bit hard to see my screen but I will get this done okay we got the text input we got a place holder which is message then we got the ng model which should be our message object and that's all for the input the column closes and then we got still three units left in our grid layout so we can add a button ion button and we make it clear color primary perhaps this is also by default I think anyway and this should also be disabled in case the message is an empty string so inside the button we are not using any icon today I think I just set okay finally we need some CSS but I will put this in you can find it in the according to toriel it's just some styling for the username some petting and stuff for the message a background for both my message and other messages so we can distinguish them we got the time and finally the bottom message row so let's see how do we have any arrows let's see it looks good so far so let's try again we join as Simon okay I on iPod here it's that's not right it should be of course input thanks Simon and we are joining and fake Simon also joined the chatroom so my first real message we send it and we see the message is from us so it's a bubble on the right side we got our name the message and the time and here we see this is the fake diamond so the message is from somebody else so I am fake would be my own message and you see so it's kind of funny to work with this circuit stuff as you can see it's really super simple the server is just a few lines of listening to events and also the front end is not really that hard to implement we just listen to some events using observable and emit our new values with some CSS we are able to craft this beautiful little chat view if I leave now the fakes I'm the channel now the one thing you need to remind here is that this is a super lightweight just example for socket IO we're not storing any messages so if this person joins again the person will not see the history of the chat so this is just like whatever live chat without any history if you would want to have something like this you might want to pop in some MongoDB or whatever database you like store the messages once you get them add some API calls you get a historic church or the history of a chat but you see that it's really quite easy to connect to socket IO with our ionic app and to build a real-time chat app or whatever real-time if you plan to build so I hope you enjoyed this video if you did make sure to subscribe to my channel for more ionic videos and also check out the ionic Academy com if you're interested in learning I own ik I will see you next time have a great day and take care you

Channel: Simon Grimm

Views: 32,124

Keywords: ionic, nodejs, socket.io, ionic chat, ionic build chat, ionic chat app, ionic socket, ionic socket chat, nodejs socket

Id: MGjRiinm67o

Length: 23min 7sec (1387 seconds)

Published: Tue Aug 22 2017