Real-time Chat Application Using Node.js & Socket IO | Node.js Training | Edureka Rewind

Key Takeaways

hello let's look at a Hands-On demo session we'll be creating a realtime chat application using socket.io so the major sections of the chat application would be like this so we will install B packages so that the applic can support es6 syntax bble would transpile the es6 syntax to es5 syntax we will create a start. JS file install all the required packages the socket.io and the express packages we'll start the Server create the HTML form the forms would be used to basic forms for chatting or sending messages we will connect the application in HTML file so write some JavaScript Cod code so that our HTML file can send messages receive messages which are being sent and received using socket.io configure socket.io on both client and server site so socket.io Library again since it's a chat application so it has to be present on both client and the server configure the HTML page to emit the message emit message meaning send the message and uh check the working of the application so we will be creating the chat application using es6 template so let us first configure bble environment so let's initialize a npm application and install all the required bble modules bble core bble preset environment bble register and bble polyfill let's open that directory in Visual Studio code let's open the terminal let's start with installing the P packages I'll install them one by one there are times when when you try to install all of them together you might face some errors it might happen to be on safer side I am installing them one by one so that is bble core first then bble preset environment bble register and B polyfill B reset B register and B polyfill also when you're installing packages so the famous packages that you use that we showing here the bble packages Express soer IO the famous packages usually don't have any problem they are maintained by many developers and sometimes even many companies but there are many packages which might be developed by small developers like un me individuals they might not be maintaining it properly or the code might not be that accurate or might be having some other problems so a new feature in the recent times that I've seen in npm packages once you install it npm also tells you the number of vulnerabilities found in the package so let's say if you're using package that is not very popular you see it has many vulnerabilities try and don't use that try to find a better safer package or more popular package that you can use in your application so we'll create theb RC file and uh put in this code so we installed the packages we created the B RC file now in start. JS we'll import the bble register so and then we'll import the app the app.js and then export it so basically in start. JS what we are saying is is basically the whole app has to use Babel or bble would transpile the whole app when we run it or when we create a build so let's do this for start. JS let's indent it a little bit and always indent your code properly that's a good practice it's also good for other people in your team so this line bble register compiles file when loaded and uh presets contains set of plugins to convert es6 features to equivalent es5 so bable preset environment basically has for example Arrow functions you know need to be converted into the normal function where you write the function keyword so that's one example of where the es6 syntax is converted to es5 there can be the object destructuring where you use the three dots so that needs to be transpiled so there has to be equivalent Syntax for that so in that case there is no equivalent syntax I mean for the the arrow functions we have the normal functions so you can directly replace that syntax but in object destructuring we don't have equivalent Syntax for that so there has to be some code to be able to do that so there are a lot of es6 features which are not there in es5 so there has to be code which kind of a fallback code that would actually run that feature in es5 as well and we start the application code in app.js now let's go ahead and install the express and uh socket.io as well install Express let me just look at the name of the npm module is it socket.io or socket IO yeah socket.io now in the app.js so we will import Express and import socket IO and basically start our server let's go ahead and do that IO object gives us the access to socket.io library so we can use the iio object to do the socket iio stuff that we want to do in our application and here we are configuring the port and make server listen to the port so we've also mentioned the port number that's for us it will be90 if it's set in the environment variable it'll take that one now in the public directory we will create a simple index.html in the index. HTML so this will be user facing we'll import the socket.io client Side Library so we can directly use it from the socket io's website s also we will use jQuery for know basic stuff the usual stuff setting values and events and stuff we'll uh configure a button nickname I used to set the user so right now for now we are like putting a simple text box and a button over here that will set the nickname so like username like who is chatting and uh a chat box and a button to send the chat message let's do that before we create the public directory and uh put in the index or HTML file let's set the express to use the public directory as a static directory so whatever is in the public directory is served statically nothing is processed on the server side let's create the index or HTML file now create the body copying the whole HTML that we have so this is basically bootstrap syntax so let me go ahead and copy the bootstrap CSS and JS as well so we have loaded jQuery before the bootstrap JS you can even load jQuery and the bootstrap JavaScript at the end of the body tag but it's okay for demo purposes also please load jQuery before the bootstrap JS version 3.4 yeah any version about three these days is good it's latest don't use the old versions The 1.8 or to unless you want to support really old browsers so we have the bootstrap library from bootstrap CDN it's good to use that CDN unless you have a really fast server so we have a simple page setup mainly we need to concate on this form form has the text box to set the nickname which we just talked about and a send chat message area now moving ahead so in the app.js file so we have set the public directory told Express to use the public directory as statically serve directory so here one thing you need to understand socket so with Express we create our HTTP server to do all the HTTP stuff you know serving the HTML CSS Javascript file also node will do the any node js processing on the server side which needs to be done but when you're working on something like socket.io or let's say even websockets there's a separate socket server so here we have a separate socket IO server there will be actually two servers running one will be the HTTP server and another will be the chat server or the socket server or the socket. iio server to be exact in this case so we'll have to include this line in our app.js so we've done this in just one line what you could do is like this also it's up to you so this is like the basic form that we talked about the place to set the nickname and the area where you send the chat message the send chat message button now let's start with the socket.io stuff so first on the server side so we already started the socket.io server now handle the socket traffic to io. sockets Doon connection set the nickname property of a given client sets IO object to listen to each connection to your applic so what happens is so we have one server the socket. server now there can be n number of people chatting let's say there are three each one of them opens a browser and initiates a chat so let's say user one opens the browser our server is running types in the nickname and you know some message and and clicks send so there will be a socket. IO code on the browser also which will send a message to the server using the socket.io library and then this callback will be fired saying hey we have a new connection and uh on the server side we will set a nickname this can be nickname or username anything but in our case we are using nickname so this is Will basically handle the incoming socket traffic and listen for new connections so relay chat data to all clients so what we are building is a simple chat room so in a chat room as you know one person sending a message will be received by all the users in the chat room so socket on chat so these do on do on consider them similar to events that you've already used in JavaScript and those events have a call back so when a chat is received the call back is called we get the nickname of that person so if we don't have the nickname if there is an error or something like that we set the nickname to Anonymous like hey we don't know who the user is in case something like that happens and then we using emit emit is something like broadcast you know you just broadcast a message and that will be received by all the users in the same socket connection or in the same chat room so we will create a payload object set the message property and the nickname property so when user one sends a message the message is received by the user received by the server over here we will take the message take that person's nickname whoever is sending that message and then broadcast it to all the other users so sets your backend application to display user message on the screen so everybody in this chat room will receive this payload and here we are writing the client side code so this is in the browser the socket.io code in the browser so first we create the socket object using io. connect so once you have the socket.io library imported so similar to jQuery when you're importing jQuery you have either the jQuery with J small and Q capital you either have the jQuery or the dollar object available for you globally to work on it similarly for socket.io you will have the iio object you create the socket object using io. connect and similar to the server site code here we have socket. on chat and uh Nick was our the nickname button so when you click on that we set the nickname so we emit our nickname there will again go to the server and get registered when you're sending a chat message so this was the chat button hash chat ID chat so when the chat button is clicked we take the text from the chat text the box where you write the chat and you emit the chat so this will be received on the server where we wrote socket. on chat so let's go ahead and implement this so where were we we've installed socket.io started the server we have a basic HTML form we started listening to socket.io okay we need to implement from this point now we have an idea of what we want to do let's start so we have created an array array of users we will keep a list of all the users that have connected to this socket iio server we have the i.on connection so whenever we have a connection this call back is called let me import that socket we receive this socket object from the call back okay so for the new connection we have socket Doon connect we get the new connection we'll be able to see this console log messages over here in our terminal typically in most of the cases when a user who is already connected in in the chat room when the browser closes automatically the socket connection closes and that's when the disconnect event is called and we get the call back we get to do our stuff we can remove the user from our list or you know maybe let's say we have a database where we maintain a list of users you can do that or maybe emit a message to all the the users saying hey this guy left the chat room things like that so we have the Nick event over here where we set the nickname also we push that user into our users list again every place we are doing console log for debugging so if you can see we have the emit in mostly all of the events so whenever a user is disconnected we emit so that all the users know that hey this guy left the chat room whenever the nickname is set so we have a new user and the nickname is set we emit the new user so all the users get the updated user list and whenever a chat is received we emit that chat so that it's sent to all the users so we already did this i. socks.on connection we set the nickname chat on the index or HTML side we need to set the need to write the browser side code of socket io on the index of HTML so we have the socket object using the global IO object similar to the server we have the on chat so the chat event the user list event here we are setting the click events so whenever a nickname is set or a chat is sent so on the client side the socket Doon a event name means something that is being received from the server whatever we are emitting we are emitting the user list we are emitting the chat so if you look at the emit functions we emitting mainly two things either the user list or the chat so that is received on the browser side using socket Doon so whenever the user list is updated maybe on disconnect or a new user is connected and the we get the new nickname we emit the user list and we receive it over here like this or when the server emits a chat we get the chat over here like this and then we will update the text area that we have with the chat messages add a new line this is what the user would be taking the action so setting the nickname nick. on click and the user would emit the nickname which would be received by the server over here socket. on Nick so it's very simple you emit from the server on the browser side you have socket. on to catch that event similarly when you can emit from the browser side and that would be received on the server side using sock.on so in a way it's pretty simple to understand so we emit the nickname when it is set and this we are just keeping a flag for our small logic so if nickname is set we can just you know hide the button so user who's already in the chat room can't set his nickname again so a simple logic and the code to send the chat to the server sending a object with message property and then making the chat box value empty so what next so let's run this and see how it works we can do is we can open two windows so open a new incognito window so that will be like two separate browsers with two separate sessions we have a nice chat box okay so we'll set the nickname over here as user one set nickname okay so we received the nickname over here as well since we started the application we are in the chat room but we don't have a nickname so what I mean by that is if you look at the app.js the incognito window the user is connected but the nickname is not set yet now let's set the nickname over here as well user to perfect so active users we have two let's send a chat message hello from user one send chat message okay which is received instantly at both places hello from user 2 I think there's a small bug I pressed enter while I was typing the message so we received this event of setting the nickname might be a small book but it doesn't crash the application so let's proceed so we have this working nice simple now let's try and close the incognito window user to removed so the disconnect event was fired as soon as I closed the window but the messages remain we're not doing anything to them great we have this working nice and you can see the console lock messages that we have everywhere setting the nickname the user list so this is the array again setting the second nickname user two we have the new updated user list chat sent by user one at this Tim stamp user one saying hello from user one so here is where I think I pressed enter and we got again so this might be some small bug ignore this for now uh user to sending the chat at this time stamp hello from user 2 okay disconnect user two I close the window updated users we have the new user list only with one user so very simple but very effective very powerful so let's proceed I want to track the location of the user how should I implement it in order to determine the location of the user we need to determine the geographic location of the user's IP address so to do that we have a public IP npm module we have the node IP locate module so public IP is used to determine the IP address of the device and then IP locate is used to determine the geographic location of the IP address so it's a two-step process and then node local storage is a web storage that allows JavaScript apps to store an access data in the browser with no expiration date so one to get the IP second to get the location of that IP and then this to store it now determining the user location so we import all the modules required which we just talked about now variable defined to store the city name of the user so we have sets the value of the specified local storage item so we have the IP locate and public IP so when we receive a nickname IP locate V4 so IP addresses are of two types version 4 and version 6 IPv6 and ipv4 IPv6 is the new version of IP addresses simply because you know we had IP version 4 the usual one that you have seen till now you know like we write 127.0.0.1 or you might have seen 192 168 1 or 0. 100 something like that so basically the IP addresses where the range was 0 to 255 for each of the four numbers those are the IP version four but since there are so billions of users now on the internet worldwide again it's a finite number you can calculate how many IP addresses can be there in the world so IPv6 was introduced which is again devices I think use both there's also like you get the both addresses not sure maybe sometime in the future we might only have IPv6 ip4 but it's a slow progress we can't just change things drastically on the internet like that so public IP version 4. then once the IP address is resolved we get the IP address we have the call back then we use the IP locate pass in the IP address that we received and then once that promise is resolved we have the call back function with the results results will have the city which we will stringify the response and then store in the local storage saying user local something like that then what configure the HTML page to display the location so send location and payload to display the location in chat window and then we append that so we showed the list of all the messages in the text area with the first the time stamp and then the message so we will also append the location over there so let's see how this goes so public IP node IP locate and load local storage let's install and let's try and run this stop the server first first let's import all of them in the app.js now let's implement this let's console log the results so we will know what we are receiving Also let's console log the IP as well stringify the results. city and store it in the local storage now on the client side also we need to send that in the payload okay what we need to do in this case is since these are called back so we have this call back once the IP address is resolved of the user then once the location is resolved we have this call back what we need to do is send the response over here since those are call backs if we send the chat response over here then it might be the case that there is the chat is emitted first and then we get the IP location so we don't want that also what we will need to do is so in the payload we need to send the message the nickname and the location in that case we will just append so time stamp location nickname and message send it like this time stamp over here now we have a city in the response so I'll just say we can keep a pipe symbol over here separate them we have the nickname and then the message so we'll have the time St the response the nickname and the message will be emitted in the chat perfect on the client side when we receive the chat let's look at the client side when the chat is received okay so we just take the whole so we just doing it a little differently from the what is shown in the slides we're just sending a string so we just have that data it will just simply be appended into the chat box so since these are call backs so whatever chat emitting you want to do you should be doing it in also since you know promises can be rejected as well we should have a catch call back as well to catch the in case of rejection so first I'll set this to be a variable now we don't have the location yet so I'll keep it as it is so this is the default one we have the time stamp we have the nickname we have the message now all we need one more thing is the location which we might get since these are promises depend on these external modules the IP address the location in case they fail so we need to keep this catch call back as well so even in the catch we are sending the response we're sending the chat but then in this case we won't have the location we'll just have so the chat will go on we can also do a console log so we will know in case this call back was called I'll say IP locate catch and uh say public IP catch so now let's run the server see how it goes for is listening I should refresh this okay let me copy this the location if we get it should be same for both the users I'll say user one perfect user two perfect let's start the chat hello from here one okay Washington perfect we have a location wow nice hello from user 2 perfect we have Washington in case you want to mock your location or you want some other location what I would suggest is very simply use the Opera browser in the Opera browser so Opera browser again is very similar to Chrome but as they have put in many more features and the UI is a little different but if you open the private or the incognito window in Opera in the private window you'll have an option for VPN just over here near the address bar if you start the VPN you will have a location let's say from Singapore or somewhere from Europe so in that case over there you'll have a new IP just for your browser nothing will change in your PC or in your OS level only for that particular browser it will have a new IP a new location you can test it that way so this is working perfectly fine perfect let's see what we got in the IP and in the location what we we got in the objects so we got the IP 52 do so this was the same IP for same both the browsers IP locate object gave us the IP address the country country code City Washington continent latitude longitude wow time zone postal code okay organization uh I don't know what this is okay Virginia and okay so we got plenty of information which is really really cool just from the IP so this is working for us I want to determine the number of active users present in the group chat so well we are already keeping a list of the users in our array but as you saw in case we have a bug that array might have duplicate values so let's say we want to have the number of users at any given moment the io. sockets dockets will give the number of active connections so number of active connections is basically the number of users we have so whenever we have a new connection we can simply get the list of all the active users using iio do sockets do sockets and then what object. keys does is let's say you have an object with many key value pairs object. keys will take only the keys so let's say you have object saying X colon 1 so x value one y colon 2 y's value is two and Z colon 3 Z's value is three or American says they call it Z an object with three properties X Y and Z what object. keys would do is when we pass in that object will give us an array and the array will have the values X YZ you'll have all the keys of that object as an array pretty handy the object named object with o Capital if you look at this documentation in the mozilla's mdn website the Mozilla developer Network it has a ton of methods that might be helpful you know when you're playing with data especially in the array objects and all so it'll help you a lot so let's see what we get in the io. sockets dockets so on connection so let's try here sockets do sockets let's console log this so we will know what we are dealing with let's restart the server and let's try again so that console log of iio sockets do sockets should run when I open the our application in a new window this if I see the console log okay we have a pretty big object so let's try the object. keys let's see what we get in the object. keys io. socket. sockets yes so the socket object is pretty big let's rerun the server so we have like two IDs okay so this might be what they storing internet so we have two users so basically two connections and these are like connection IDs I refreshed so maybe you know the ID is changed now we got to emit the user list and on the client side okay so this will just iterate over all the users and append them to the HTML page the active users okay so we are just sending these socket connection IDs emitting them whenever we have a new nickname instead of users what we will do is I'll say ID list because we already have the user object ID list and uh I'll emit an ID list as well okay we're already maintaining a user list using uh this users we're using an array this will do it separately actually you know what should be the case in properly the users array should be like an array of objects where in the key we have the socket connection ID and in the value we can store the store an object with user data you know like the user nickname or anything else that you want to store let's say even the location or the IP or anything like that so we should have an object like that uh that has all the user info the key being the connection the socket connection ID kind of thing that we get and in its value we should have a user object with the nickname or the username the IP the location or XY Z whatever but okay let's send this as well so we have the user list okay so now we have ID list event I think the L was Capital yep the L is capital and when I receive that so like the active user we will need another box to store that so we have the active users over here just create a new one active IDs empty them we'll name it socket ID okay and there is this list to I'll say it ID list you where do we have this B tag we're doing the same thing over I don't know why we're doing it with the JavaScript first and then the jQuery doesn't matter setting it twice basically now okay we did this emitting on the nickname only okay we should also remove them while on the disconnect but okay this is okay for demo purposes so let's run that and see we if we get the IDS as well okay now we need to refresh the page to get the new HTML set the nickname so we get both the socket IDs in one go still already there so we get the socket ID they're just not fitting we can adjust that with CSS perfect so we're seeing the socket ID we're seeing the username let's send a message enter message enter perfect one last thing let's check so we have this chat box okay chat text so what we can do is on the on key press event or on key key down event if the key is the enter key we can uh send the chat as well so that can be done simple thing but let's see if we have anything remaining okay so we got this so they've named it user ID we called it socket ID it's okay fine I hope you enjoyed this session thank you I