Master Node.js: Build a Simple Chat App with Node.js & Socket.io

hi everyone in today's video we are going to learn how to create a real-time web application using circuit.io and node.js we will be building a simple chat application from scratch covering everything from installing dependencies to writing some code so let's dive right into it first of all what we need we need a socket IO so what is Socket IO you can find out in the socket.io in documentation what is it it's a library that enables low latency bidirectional and even based communication between a client and the server and the most more important event you need node.js if you don't have it please install it to install node.js you just have to press and install a long-term support version if you don't have download in when you just visit node.nodejs.org go to downloads Tab and here you can find out then downloads possibilities okay so when you just install and download an install node we can start building our application so first of all you should create some folder in my case it's a socket.io so the next step is to open the terminal and run the following command npm init Y and with that we initialize a new node.js product so also our application will use express for handling HTTP request it will be very basic but it will help us and second IO for Real Time Communication so we need to npm install Express and socket IO to download everything this dependency installed we are ready to start writing our code for our chat application first let's create a new file called Maybe index.js and inside that file we'll set up basic server with socket IO by adding the first of all modules so first module need to import is Express so require Express also we need we need http and also we'll need socket IO but it's called socket.io over here okay so we imported our modules the next thing we need we should initialize a new expert application how we do that simply we can make a constants like app and get an Express that's all then we need to create a new HTTP server using Express app I mean that one so we need to create some server and that's why we need HTTP that we imported over import over here okay and create server and app the next step is attaching the socket dial instance to the HTTP server so we will make some variable socket i o and we'll let the server then we will just create some route that will handle everything so we will need update get request response rest send for right now we'll make some kind of hello world every programmer love hello world so I hope you too okay the next things will be listening for a connection event which is fired when a new user connects to the server and right now we all need a socket IO so i o on what is the event as we can see there is a connection event and we'll use connection and as a stream socket and inside crazy crazy curly braces will make console log new user connected okay and the last thing what we need over here is start our server and listening for some Port so server Dot listen at Port 3000 the parts you can use whatever you would like to cancel that log server is listening on board three thousand and from for now it's all right now we'll have some kind of basic web page which will all show us hello world but we'll go and dive deeper next thing we need to create some kind of index that HTML file why didn't we need it because we would like to serve for example some kind of form right now we'll only search like an input with divs the for a socket i o application so after we make that index.html file we can use code snippet if you are using of course Visual Studio code I mean Mark and tap and with that you've got your HTML file almost ready the only thing we can just change for example my socket IO .io as a title and to be honest the next thing we will create over here in our body so we'll make for example ID of a tab that will be a div inside that div we'll create for example another div with ID of for example messages and inside that messages will create the whole messages that the input will provide and will build so we'll also make made as I said input but right now we need to do that in that way so we will create input type text and whoa and we can make a placeholder maybe type your message here and that will be almost all but the very important thing is to create the script tag when you will need to First we will be using the source from socket that we just installed as a dependency to our application so we'll go to the socket.io socket.io .js and in here we will also create second script tag that will handle the whole application server implementing that was in serving our implementation to that input tag and the HTML file so first of all we will create initialization or con to a connection to the socket i o server so kind of socket that equals i o then we'll just get value from our input and also as I mentioned before we'll add that messages to our div tag article that's called messages so right now we create input document but get the limit by ID and input the next thing that we need is messages document that get a limited by the element by ID of course and messages okay and the next thing when you create that our input and messages we will listen for event fire in on the input so when we just make write something in our input and press enter we would like to send the message to another user that is connected to that server that we just created so we'll add event listener on key down we'll create event and first of all we'll check if event the key equal render and also we'll check if the value of that input is not empty so and input the volume that trim that's all that end will only fire when both of the arguments here will be true so if something will be false that if statement will not work and inside that if statement we will emit a chat message event to the server with the input value as a data so socket dot emit and it will be called chat message with input value and that's almost everything that we have to do in that if statement also we will just clear our input value that will be sure that everything's work and when we write down another message it will be free and we don't have to delete it by ourselves the next thing will set up the listener for the talk message so socket on that chat message that will be listening to chat message and we'll call like message nfg first of all we'll create a new div what will be added that message so first we'll make a message for example element and we'll make document that create element so right now we're creating a lemon that will be added next thing to have message element that we just created will assign text content so what we just sent as we as the MSG so I mean message the next thing that we need to do is our messages that we just get from by get along by ID will assign a band children to it our message element that we just created so messages that append Drive and we'll create that message element and the last thing we don't want to have the when the conversation will go and going on on would like to be on the newest message right now when we just created so we will make some kind of scroll very simple one without any so let me suggest that scroll top equals messages about scroll height and to be honest right there in our index.html it's everything that we need now go back to our index.js file and we need to make some kind of adjustment right here right now we just want to serve that HTML file instead our send that hello word so right there we will send file so our file and to do that we need to do name so our directory where we are and we'll assign the index.html file to that and almost we are there because the thing that we have to do is our i o so our socket iron server what we can create and what we should create first of all we need to handle the chat message event that we just created in our index.h index.html file so right there suck it that on chat message and we'll create that message that I O amid so we'll admit that message what's wrong oh that dot instead of Arrow and inside that Amit will emit the chat message and that message will be MSG as it was and the last thing would like to have that on as I mentioned before we can make some kind of event not only connection but also we can disconnect so when the user disconnects we would like to have information in our terminal so on this connect and we will call also.log these are user is connected and that's all right now we've just got our application but first of all we need to call that application so when we are inside our socket dial folder we need to call node and index.js that is the name of our file and press enter server is listening to a port 3000 I've got open in Two web browsers and we are going to them and right there you can see two socket IO chat messages right there so when we just start typing whatever we will see that at another tab there is that message okay iPhone that two and hello I'm the first one and as you can see we just create some kind of primitive type application of course you can use it of course you can add some style you can add some users but that's on your way if you have any comment any questions leave it in comments if you want like would like to built with me bigger application on the socket IO also leave a comment and see you at the next episodes have a good day bye

Channel: Cogito Ergo Tech

Views: 5,351

Keywords: Node.js, Socket.io, Chat App, Real-time Communication, Web Development, JavaScript, Express, HTML, CSS, WebSockets, Beginner, Tutorial, Full Stack Development, Open Source

Id: u7XqDBC9BiI

Length: 16min 24sec (984 seconds)

Published: Sat Mar 25 2023