Up next in 10
Build a Real Time Chat App With Node.js And Socket.io
890 views
Feb 7, 2024
Embark on an immersive journey into real-time communication with this tutorial on "Building a Real-Time Chat App with Node.js and Socket.io." In this video, you'll explore the dynamic combination of Node.js and Socket.io to create a fully functional and interactive chat application. From setting up the Node.js server to implementing WebSocket communication with Socket.io, the tutorial provides a hands-on experience for developers of all levels. Witness the power of real-time updates as messages flow seamlessly between users, enhancing the user experience. Whether you're a Node.js enthusiast or a developer looking to add real-time features to your applications, this guide offers a clear and concise step-by-step walkthrough. Elevate your web development skills and bring the magic of real-time communication to your projects with this engaging and informative tutorial. Join the session to create a chat app that showcases the potential of Node.js and Socket.io in building responsive and dynamic web applications.
View Video Transcript
0:00
Don't you just hate people that are always on their phone all the time
0:05
Well, too bad for you, we're creating a chat app in this video and it's going to be absolutely amazing
0:09
Before we get started, here's the final product that we're going to be creating
0:16
We can go down here, we can send a message, let's say, for example, hi
0:20
On our screen it'll say you said hi, and on anyone else's screen it's going to say that person's name
0:24
and then the message hi. We can send a message back, and again you'll see it says you said hi on the screen that sent it
0:29
that sent it, and on everyone else's screen it's going to say that person's name and then
0:33
the message that they sent. And to do this, we're using a really amazing library called socket.io, which allows you to use
0:39
websockets, which allow real-time communication from the browser to the server, as well as
0:43
everybody else's browsers that are connected to that server. So let's get started creating this now
0:48
To get started, I just have a really basic index.html page with a few really basic styles
0:53
that give us the styles we see over here on the right. I'm not going to cover these styles directly because they're really basic and you should
0:59
style this better than this application. And the first thing that we want to do is set up our HTML because it's going to be the
1:04
easiest part of the application. As you can see, we want a container to put all of our messages, as well as an input box
1:10
and an send button for our information. So let's do that. We're going to create a div, which is going to have an ID here, which is going to just be
1:16
a message container. We'll be able to reference this later in our JavaScript, and all of our messages that
1:21
gets sent are going to be added inside this div using JavaScript
1:25
Next, we're going to have the form that submits to our server. We're going to give this here an ID of Send Container, and then inside of that we're just
1:32
going to have an input, which is going to be our text field, so we'll give it a type here
1:36
equal to text, and then after that we're going to give this an ID of message input, and this
1:41
is just so we can again access this in our JavaScript and actually get the value from the
1:46
input that we type in here. And then finally, we need a submit button, so we're just going to have a button, we're
1:51
just going to have the type of submit, and we're also going to give it here an ID of
1:55
send button. And lastly, inside of here, we're just going to put the text send. And there
2:01
we go. That's all the HTML we need. And if we refresh these pages over here after we click
2:05
the Go Live button, we should see that we just have a blank HTML page here with our container
2:11
as well as our input on both of these pages that we can use. And when we click send, obviously
2:14
it'll send that information. Now, in order to make this a real-time chat app, we need to install
2:18
a few dependencies. So to get started, we want to just do NPM init, and this is going to set up
2:23
our file, our project to be using MPM. There we go. And then what we want to do is we just
2:28
want to install some dependencies. So we're going to first install socket.io. This is going to be
2:32
our real-time WebSocket communication. And then we're going to install NodMond so we can do NPMI
2:38
And this one we want to be a dev dependency. So we make sure we put Save Dev, spell that correctly
2:42
and we type out NodMond. And Nodmon is going to allow our server to automatically refresh itself
2:47
every time we make a change so we don't have to cancel our server and restart our server
2:50
Now, instead of our package.Json, as soon as that finishes up, we can actually create a script
2:56
here that we're going to use to start our server, and we're just going to call this dev start
3:00
and all we want to do is run Nodemmon, and we want to run it on our server file, so we'll call server.js
3:05
is going to be our server file name. Now with that out of the way, let's actually create that server.js, and there we go
3:12
And now if we run NPM, run Dev Start, that's going to run Nodemont on our server.js file
3:18
and as you can see, that worked just fine. Now to create our server using socket Io is actually really easy
3:23
We can just include our socket. So we're going to say const I.O is going to be equal to require socket. I.O
3:30
And in order to actually create a server, all we do is pass the port that we want our server to run on to this socket I. I.O
3:37
Require as a function, and this is going to create a server for us on that port 3000
3:41
Then what we can do is we can just use our I.O. We can say I.O.on connection
3:47
And what this is going to do is every time a user loads up our website. it's going to call this function and it's going to give each one of these users their own socket
3:54
And what we can do with this socket is send a message down to the user
3:58
So we can just say socket.emit and we can put whatever we want inside of this
4:03
This is going to be the event name. We're just going to call this chat message
4:07
And then we pass the parameters or data that we want. And this data could be whatever you want it to be
4:12
In our case we just going to make it a string called Hello World So now every time someone connects to our server we sending a message down to the client with this event chat message and it going to say Hello World inside of it
4:23
Now you notice we have an error. We need to have this function inside of here
4:27
So just move that parentheses around to the correct place, save it and everything will be deep green down here
4:31
And now let's create a separate file here, which is going to be script.j
4:36
This is going to be where all of our client side JavaScript is going to go
4:39
And the nice thing about using socket I.O. in this way where we set it up on port 3,000. and we have our server being run on port 5,500 for our client is that our client and server
4:48
are completely separated from each other, and we don't have to worry about them being intermingled together
4:53
They're completely separate entities. You could host them two different places if you really wanted to, and they would still
4:57
be able to communicate just fine. So what we need to do inside of this script.j
5:02
Is we need to get the socket variable. And to do that, we can just say const socket, and we want to set that equal to I.O
5:09
And the location of where we're hosting our socket. This is just going to be at HTTP, colon, backslacks, bash, slash, local host, 3,000
5:17
And this is where our server is hosting our socket.js application. Next, what we want to do is we want to say socket
5:23
Dot on, and we remember used our message of chat message. This is our event name
5:28
So whenever we receive an event, we want to call a function inside of here with the data that
5:33
we sent down from the server. And we're just going to, for now, console.log that information as data
5:38
And again, this is going to be hello world, because that's what we have inside of of our server.js here
5:43
Next, inside of our index. At HTML, we actually need to require these scripts. So first, we're going to require our script for our socket
5:50
So we can just say script here. We want to defer this. And the source is just going to be set to HTTP, backslash, backslash again, local host
5:58
3,000, because this is where our socket I.O is working. And with our library socketio, it's going to expose a path called socket.io
6:07
and it's going to have a file in there called socket.io, or
6:11
sorry, .js. And this is going to flow that includes this, right here, this I.O. Function
6:18
Next, we want to just include the script that we created so we can do another script tag, defer this
6:23
and we're going to set the source equal to script. .j. Just like that
6:28
Close that off. And now, if we inspect one of these pages over here, you'll see we get that Hello
6:32
World message showing up in our console, and that's because when we connected our server
6:37
went inside of the socket here. We can even just log inside of here. console dot log we just want to say new user save that and now you can see as soon as
6:48
we connect we get this new user message and then it's sending hello world down to our client we're receiving that inside of our socket dot on and then logging that in
6:56
the console and the reason we're getting two new user messages is just because we have two windows open so both of these users are connecting at the same exact time
7:03
now it's close out of that and actually work on making this a chat application
7:07
where the users can communicate back and forth now on the client what we want to do is we want to get our message form. So essentially every time we send a message, we want
7:14
to send that to the server instead of sending it through the form here. So let's get
7:18
a variable which is going to be our form. We're just going to call this message form. This
7:22
is going to be equal to document. Whoops, document. Dot get element by ID. And we gave that
7:27
ID here of send container. So this right here, message form is going to be our form. And then
7:34
we just want to add an event listener to that. So we'll say messageform. Add event listener
7:37
And this is just going to be whenever we submit our form, what we want to do is we want to stop our form for some submitting
7:43
So to do that we can just say e.prevent default. This is going to stop our page from actually posting to our server, which is also going to stop it from refreshing over here
7:52
And if we save that and click send, you'll see our page does not actually refresh, which is perfect
7:56
If we didn't do this, we would lose all of our chat messages, which we do not want
8:00
Next, after that we want to actually get our message. So we want our message is going to be equal to here
8:05
First, we need to get our message element. So we're just going to say up here, we want to get our message input, which is equal to document
8:13
Whoops, document. Dot get element by ID. This is going to have an ID of message input
8:20
Now that we have that message element, we can take that message element, sorry, input
8:24
And what we want to do is just get the value from there. And then we actually want to send that value to the server
8:30
So we can just say socket whoops value socket socket dot omit and emit is going to just send information from the client to the server And all we need to do is give it an event name
8:42
So we're just going to call this send chat message. And then what we want to do is send it that message, which is just the value here
8:49
And then the last thing we want to do is just take our message input, and we want to set the value of that message input equal to a blank string
8:56
just so it empties out the message every time we send it. Now, if we type something in here, click send, it's going to clear it out and send it to our server
9:04
but our server is actually not handling this yet, so we need to set up our handling for that event
9:08
In order to do that, it's really straightforward. All we have to do inside of here is we just say socket.on, just like we did on the client
9:14
and we say the event, which in our case is send chat message
9:18
And then it's going to get that data that we sent with it, which in our case is just the message itself
9:23
And now inside of here, what we want to do is whatever we want. So we'll just log this for now to show that it's actually working
9:28
We're going to log the message, remove this other log, and if we save that and we send a message
9:33
of hello, click send, you'll see that shows up in the console down here because we're actually
9:37
receiving that on our server. But what if we want to send that down to the other client
9:42
Well, that's really easy to do. All we say is socket. .emit, I'm sorry, dot broadcast. .emit
9:48
And this is going to send that message to every single other person connected to the server
9:53
except for the person that sent the message. So it won't send it back to our original user, but it'll send it to all
9:58
the other users, which is ideally what we want. And inside of here we can just send chat message, and we can send down that message
10:07
Let's remove this initial limit, and instead of here, we're going to inspect this console
10:11
So we have our console right here, and if we type in a message here, for example, hello
10:16
and we hit send, you'll see that gets sent down to our client over here, but it does not
10:20
get sent to this client, which is perfect. We only want to get to send to all the other clients and not the person that originally
10:26
sent that message. Now that we have that hooked up, let's actually start appending these messages to our actual
10:31
index file. Now we go back into our script here, and this is going to be really easy
10:35
We're going to create a function for doing this, which is just going to be called append message, and it's going to take a message
10:41
And in here, we're just going to create an element. We're just going to call it message element, and you can just do document
10:46
.crate element, and we want to just create a div. So we'll just type div in here is the element that we want to create
10:53
And then we want to set the value for this. So we're just going to say message element
10:57
Inner text is going to be equal to our message. And then we just want to append that to our container
11:02
So again, up here, we can get our message container. And this message container has the idea of message container
11:10
And now down here, we can actually take that message container. So, and we can do append, which is just going to add whatever element we want, which in our
11:17
case is message element. This is going to be added to the end of our container. And now we can call that append message message right here
11:24
Send it in the data, which in our case is just our message. Now if we save that, send something on this server and click send, you see it's going to
11:31
go over our other client and show up that message for them. Now the next thing that we want to work on is giving our user names to display because right
11:37
now nobody has a name. So in order to do this, we're going to use what's just the prompt element
11:42
So we can just say constant name is going to be equal to prompt, and then we ask them what
11:48
is your name. So what is your name? And now when we save our screen, you'll see that we get our what is your name
11:54
your name message pop-up and we can type in whatever your name is and that'll be populated
11:58
into this variable name here. And now after we're done with that, we just want to append that message to our screen
12:04
So we can just append the message of you joined because we just want this to always say
12:09
you when it's the person that's actually sending it. And now you can see when we type in a name over here, it's going to say you joined, which
12:15
is perfect. Now we also want to send that message to our server
12:19
So we're just going to say socket. and we want to omit whenever we get a new user signed up and we're going to send that
12:26
name along with this message. Now inside of our server over here, we want to actually catch that
12:32
So we'll say socket.on, new user, and this new user is going to be taking of course a function
12:38
that's going to have the name as the data. And now we need to actually store this user information
12:44
So let's create a variable up here, which is going to be called users, and we'll just send this to an empty object And what we want to do is we want the key of this object to be the object ID of the socket So we say users of socket and all of these sockets have a unique ID which we can use
12:59
so that's why we can use that as the key here. We want to set that equal to the user's name
13:03
Then once that's complete, we actually want to send the message saying this person connected
13:07
to the rest of our users. So we're just going to do another broadcast. We'll say socket.broadcast
13:12
And we want to emit a user-connected message. So we can just pass here, the user's name, and now we need to do it
13:18
to handle this on our client. So let's go down to our client here
13:23
And we can just copy this essentially exactly the same. And instead of chat message, we want to say user connected
13:29
And this is going to be the name of the user instead of the data. And we want to append a message here, which is just going to say the person's name
13:37
So we can just come in here, we can say name, and we just want to say that they connected
13:42
Now save that. We can type in any name here. And if we click OK, who's one more time
13:48
Okay, you can see up here it says you joined and on the other person's screen it says
13:52
that person's name connected which is perfect. Now one thing that does happen though is if we send a message, it still comes across
13:58
without the user's name. So we want to include the user's name in this chat message event
14:03
Back on our server, we can do that really easily by broadcasting here an object instead
14:07
of just a single message. We want the key to be message for our first element and then we want to use the user's name
14:13
as the second element. So we can just say users socket. ID, and this is going to get the name of the user with that particular ID that sent the message
14:22
And now we're sending both the message as well as the user's name that sent that message
14:26
down to the server, or down to the client, I mean. And then in here, for appending our message, we have our data, and what we can do is we can
14:33
first get the user's name, so we can just say data. .name, and then we can get the message after that by just saying data. .Message
14:41
And if we save that, let's type in a name here, we'll say Jim
14:45
Oops, do that one more time, there we go. And we can just say hi. And now you can see over here it says Jim connected, and then Jim High, which is perfect
14:52
Now we want to actually show that message on the user screen that sent it, because we need to have them be able to know which messages they send
14:58
And that is going to be really easy. We can just call our append message method inside of here, where we actually are adding the event
15:05
And instead of using data name, we just want to say you. And we want to make sure that we append the message right here
15:12
And now get rid of this dollar sign, and we save that. We can just type in here a name, and now if we send a message, click send, you see right
15:21
here it says you, and then your message that you sent, which is perfect. Now the very last thing we have left to handle is what happens when a user disconnects from
15:29
the server, we want to send a message just like the join message, but we want it to say
15:32
disconnect instead. So we're on our server, let's set that up. We can have a socket here that is going to be saying instead of a new user, we want this
15:40
one to say disconnect, and this disconnect is not going to take
15:45
any parameters because we don't actually care who disconnects, we just care about their socket ID
15:49
And what we can do down here is we can broadcast to the users, which one's disconnected, so
15:53
we can say broadcast emit here, we want to send the message of user disconnected, and
16:00
then inside of here we want to send the user's name, which is just going to be users, and
16:04
then socket. This will get the idea of the socket, and the user's name is linked to that value
16:10
And then we just want to delete that user from the array of objects, so to do that, we can just
16:14
say delete, and we want to delete the element at this key
16:20
Now doing that is going to remove the element from the user's array here and send it down to the user saying that user disconnected
16:26
So we can handle that down here. Very similarly to how we do our normal connect, we can just do disconnected, and instead of
16:32
saying they connected, we can say that they disconnected. Now let's type in a name here of Jim, for example
16:38
Whoops, one more time. Okay, you can see it says Jim connected down here, and if I go over here and I actually just
16:44
close out of this, you'll see we get Jim disconnected down here. Let's just go back to local
16:48
host so we can open this back up. Let's say our name is Kyle now, and we see we get Kyle
16:52
connected down here. And that's all it takes to build a real-time chat application. If you
16:56
want to see me build a more complex version of this project, make sure to let me know down in the comments below because I'd love to expand on it further. Also, if you enjoyed the video
17:04
make sure to check on my other videos. Those are linked over here, and subscribe to the channel
17:07
for more videos just like this. Thank you very much for watching and have a good day
#Email & Messaging
#Intelligent Personal Assistants
#Other
#Programming
#Software
#Text & Instant Messaging
#Voice & Video Chat