Socket server with NPM and Express

- [Instructor] Alright let's get our hands dirty. We got the dependencies ready for Node Express and Socket. So now let's get coding on our server. The first thing I want you to do before we get to code, I want you to copy the HTML file that we have in the exercise files. So, if you don't have access to the exercise files you'll see what the HTML looks like and you should be able to create your HTML. It's basically a standard HTML document. So, let's go ahead and do that. Let's get the index.html from the resources. So, copy that.

And get inside of the chatter. And then inside of the chatter project, create a new folder called public. And then inside of it paste the index.html document like so. Okay, cool. And then go inside of VS Code. So we got our public folder. We got our index, which is good. So for those that don't have access to the exercise file, this is what the document looks like.

So, feel free to pause the video and simply type all this and we'll wait for you and then hit play. So, the first thing we want to do is create the index.js because package.jason is calling into index.js and we don't have that file so we need to create that file. Let's go ahead and do that. So you create a file here. Or new file at the top. File. New file.

And do index.js And then in that file we'll start working on our server for socket.io So the first thing I want you to do is do a variable called app and require express and then run it right away. So basically what we're doing here is replacing the import first and then run the express, we're just creating the value and running it right away.

I want to create also a server which I require HTTP Then I'm going to use the server function and pass the app to it. So that will be my server. Then I want to create an IO variable, which will hold our socket.io dependencies. And then we'll pass the server to it.

So basically we're running it with the server we just created so, the variable IO right now has all that here. And then we'll just create a variable called port that will use as a remain variable for all the port instances where we need it. So the server will listen on the port that we just passed inside of that variable. And then do a console log.

And let's do template strings so we can pass the value inside of it. Server is running on port and this is where I'm going to pass the port inside of the template strings here. Inside of the port 3000 and we've just done template strings. Okay. Then what we need to do is start using the app.get so when someone tries to get to this specific address on our server then this is what is going to happen so the request responds.

And what we want to do is pass and send a file and make sure you use the capital F send file because otherwise you're going to get an error from express. Basically saying that this is deprecated. Please use the capital F. So send file. And what we're doing here, we're going to pass the index.html from our public folder we just created. So when someone is calling this pass the index.html that's basically what this particular block of code is doing.

And this is pure express. Then, we're going to start our first socket, on socket.io So basically the way socket.io works, it works by events so whenever we're doing a specific event. Whenever, we're doing something inside of a socket.io server then it's going to do this. So when we're doing IO.on which means that whenever there's an event that's called connection, so whenever someone is connecting to the server, do the following.

So we're passing socket and then we'll do whatever is inside of that function. What we'll do, we'll console log that there's a user connected. We'll also emit something so this is a function within socket that basically emits something, basically what we're doing, we're creating another event. So everything works by events in socket, so, there's this event of connection when this event of connection happens then do this other event which is called message and send a message.

So what we'll do is send this data. Hey how are you. Then close this here, so make sure you have your single quotes around message and what we're doing, we're going to pass that data once the event is emitted. And then, we're going to wait for another event.

And when this event occurs, then do whatever you want with the data that's in here. So we'll console log it for now. And all of that will make sense once we do the HTML because what's going to happen is someone's going to connect, then we're going to alert in the console what's happening, and then we're going to emit message on that particular event.

So, basically, once someone is connected we'll send a message to that person so then we're going to wait for another event. So, there's going to be another event being emitted from the client, which we'll do in the second, in the index.html Once this is happening, whatever data we pass from that other event, then we'll console log that event. So let's save that and let's go inside of our index.html so we can create that event here.

So there's a few things I want you to do. First, I want you to do a script inside the body here and this one is basically inserting a script from the source and the source is forward slash socket.io so basically we're loading socket.io on the client just to make sure we're able to send commands from socket. That's what we're doing here.

And then we'll create the specific script that the client will send. So once this client is going to connect to the instance of socket.io here so that event called connection, this is what we're going to do. So first we'll receive a message from the server and then we're going to reply with another event. So basically the server will be expecting another event. And once that other event comes in, data from that particular event will be passed to the console log.

So hopefully that makes sense. So let's go ahead and create a variable that will hold a connection to socket.io so we're connecting to this specific server that runs, which is the local host 3000 again, if you change the port here to 4000 for whatever reason, make sure you change it here as well because this is how you're going to connect to that particular server.

Then, we're going to do an event. So when we get a message from the server so remember the server is going to send us a message when we connect. Take the data that he's going to pass to us and console log it for now. So once we have a little UI, as we've seen in the previous video, then we'll put this inside of our HTML. For now let's just put it on the console and once we receive that message, then emit another message which will be related to another event.

So make sure that whatever event you put in here, if you want to emit to another event, you want to make sure that on the server that receives that message, has the same value here. So that'll become important as we use other types of events. So we're emitting a message and this message is coming from Jeremy. I am great. Thank you. So this is the message that Jeremy is going to send.

So let me quickly recap. What happens, this is the client, all the index.html is the client, is going to connect to the server here. So the server is expecting a connection. Oh, there's the connection. Alright, so I'm going to console log. There's a user connected. And I'm going to emit a message, says with this data here, how are you. And then the client will receive that message. So once it's expecting a message.

So once it receives that message, it's going to put the data in the console log and then it's going to emit a message related to this event here with this data, and then the server will receive that message here and pass the data to the console log. Let's go ahead and test this. Let's do control, and let's make sure we're in the right terminal here. Let's do an ls. Let's do an npm start.

Let's do npm run start. The server is running on port 3000, so everything is working fine here. Let's look inside of our browser and let's open the developer tools and I want to put them at the bottom. So let's go ahead and do that here. Perfect, thank you. So let's go in the console. So if you don't know how to open the developer tool, you can do them by doing view, developer and then view source or developer tools.

I use developer tools, that's a shortcut that I use. Option command I and then for the Windows folks, click on the stacked dots on the right hand side and then go to more tools, and then developer tools. That is assuming you're using Chrome, so if you're using another browser, please find the developer tools. Once you're here, go to console here and then what we need to do is go to the local host 3000 and then I'm going to receive "Hey how are you" So I receive the message, this is good.

Let's go inside of our server and the server received a message called Jeremy. I'm great. Thank you. And then it did say user connected so basically the client connected. So we had that event here. Let me go to the server. So once it connected, it did give the console log here then it sent a message which we see on the client here, How are you. And then this guy here responded after that with the other event.

I am great. Thank you. And we received it in the server. So basically socket.io is basically an event library. So that's what it does really well. So if you create an event here and you want to do something when that event, so this is emitting an event. So this is actually creating an event. So we're creating an event call another event. So if you have something that's listening to another event on the server, then we'll receive whatever data that you've passed inside of that event.

And this is primarily how it works. So there you have it. You have the first socket.io server emitting an event and then getting a response back from the client. So let's move on.