Node.js Crash Course Tutorial #3 - Clients & Servers

oh rather than gang so we've seen the basics now of how node runs on a computer but to what end well ultimately we want to create a website whereby the server-side code is powered by node and JavaScript so our server will be the thing listening for incoming requests from a browser but how does this whole process of communication between a browser and a server work well on a simple level we type a website address into a browser and then we hit enter that sends a request to the server that's powering that particular website the server then looks at that request and it decides what to send back to the browser now in most cases that will be an HTML page and then that is then displayed in the browser but it could also be images or CSS or JSON anything coming from the server as a response so when we type in a web address or a domain name into the browser how does the browser then know to send a request to the correct server because there's probably millions of servers powering millions of different websites on the internet but somehow the browser magically knows to connect to the correct one well to answer that we need to know a little bit about IP addresses and domains so IP addresses alike addresses for computers which are connected to the Internet and all computers connected to the Internet have a unique IP address to identify even yours a mine now some special computers are known as hosts meaning they host websites on the Internet and if you create and publish a website it will be hosted on a computer somewhere and that computer will have an IP address to identify it now if we want to connect to a server on that host computer we need to know its IP address to do it we could then type the IP into a browser if we wanted to in the address bar to connect our server now IP addresses are just a series of numbers right and they would be really hard to remember especially if you want to remember a few of your favorite different websites so instead we use domain names to mask these IP addresses and then when we type a domain name into a browser and hit enter it will find the IP address associated with it and then it will use that to find the computer hosting the website and communicate with that and this way it can send requests and get back responses to and from it so say for example we type in the net ninja call it UK into the browser and then we hit enter well then the browser will look up the IP address associated with that domain and it will then use the IP address to connect to the server on the host computer with that IP so then the server will then look at that request and respond probably it with an HTML page now this lookup step all happens behind the scenes and it's not really something you need to worry too much about so this type of request when we type something into the browser and hit enter that is a get request it's made every time we go to a different web page either by a link or directly typing into the address bar we're sending a get request to the server to get a certain resource in this case an HTML web page now there's also other types of requests like a post which is normally used to send data to a server from a web forum or something but we'll learn more about those different types of requests later on so this communication between the server and the client the browser is via HTTP now that stands for hypertext Transfer Protocol and it's just a set of instructions which dictate how communication occurs so if that didn't exist then they wouldn't really be able to communicate effectively with one another so this is kind of the same thing as human communication right we create languages for example English or Spanish so that people can use those languages to communicate with each other clients and servers use the HTTP construct to do that so then in node we actually write code to create a server and listen for requests coming in from the browser now this is totally different from a language like PHP for example where we don't have to create the server manually and we have other tools which manage that for is like Apache but in node we manually create the server which lives on the backend of our website and it's this server that then listens for requests from the browser and then decides what responses to send to the browser right so in the rest of this lesson we're going to be focusing on creating a local server on our computer using node which can then be used to actively listen for requests and respond to them so then the first thing I'm gonna do is create a new file and I'm going to call that server KS and this is where we're going to create this server it doesn't have to be called server KS what you call it is up to you now the first thing we need to do inside here is to require a court node module and that is the HTTP module so I'll say constant H TTP is equal to our link wire and we want to require the HTTP module all right then so now we have that we can use it to create a server and we do that by saying HTTP dot create server that is a method that creates a server for us now if we wanted to we could store this in a constant and you can call it what you want and that's going to store the instance of the server in this constant forest just in case you wanted to use it in the future for something else like WebSockets we're not going to do that I just wanted to show you that you can store the server if you want to but you don't have to ok so this creates a server and as an argument it takes in a callback function now then this callback function is gonna run every time a request comes in to our server so say we request the home page and we go to www.hsn.com inside this function would get access to two different objects first of all the request object and secondly a response object now this request object comes loaded full of information about the request such as the URL that is being requested so if I go to my website comm forward slash abouts I would be able to find that URL from this request object to see where they've come from also other information like the request type is a get request or a post request etc there's other stuff as well which we'll see later and also we get this response object and this is the object that we use to actually send a response to the user in the browser so we have that all we're going to do inside here is just log a message to the console whenever a request comes in so I'll say console dot log and what you say requests made like so okay so we have this server now but it's not really doing anything yet it's just floating around in our file and it's not actively listening for requests being sent to it to do that we have to do something else we have to invoke the listen method so I'm gonna say server dots listen like so and we need to pass in an argument into this and that is the port number that we're gonna listen to we'll talk about port numbers in a second but for now we'll just go with 3000 and a second argument which is going to be a local host and that argument is the hostname now the default value of this argument is localhost but I'm explicitly typing it out and then thirdly we have a function right here and this function fires when we start listening just so we know that yep now we're listening for requests so console dot log and we're saying here listening for requests on port 3000 so now we're listening for requests on this host and this port number but what does that actually mean so first of all localhost what is localhost well localhost is like a domain name that we'd use in the web a bit like google.com for example but this one is one that takes us to a very specific IP address called a loopback IP address now this IP address is 127.0.0.1 and it points directly back to your own computer so that means that when we're connecting to the local host domain in a browser the browser is actually connecting back to our own computer which is then acting as a host for our website so the host name local host means listen for requests coming to our own computer and this is how we use our own computer as a host when we're developing a website but there's also one more thing to understand and that is port numbers so a port number represents a specific channel gateway or port on our computer that a certain bit of software our server should communicate through for example on your computer you've probably got a lot of different software that connects to the internet and receives and sends data Skype discard mail clients etc now they will all be doing this via different port numbers to keep information separate from one another so you can kind of think of port numbers as a bit like doors into your computer through which internet communications can be made to different programs now our server also needs its own port number to communicate through now you're going to see many different values for this port number but a common one is 3000 for local web development so as long as your port number you choose doesn't clash with a port number being used by another program is fine to use so when we use localhost we also type the port number after a colon in the address bar after it so the browser then knows to connect to our own computer via this particular port number which is where our server is going to be listening or rather than gangue so we have created now our server right here and we're also listening to Paul 3000 on the localhost for requests so now we could start sending requests to this server in the browser now before we do that we actually have to run this file through node so let's do that we'll say node server which is the name of this file and press Enter and now we can see listing for requests on port 3000 so that's this console log right here so now we know that this server is up and running and actively listening to requests or for requests rather to localhost port 3000 so now we could go to the browser and we could send a request but before we do that notice down here that the process is ongoing it's still just kind of waiting there for a request we don't get this path down here waiting for another command because the server is ongoing and that's correct because we want it to be running in the background or listing for requests if you want to cancel out of this process to make the server not listen anymore you can press ctrl + C and that cancels out of the process I'm going to run it again now because I want to now go over and make a request to the server because when that happens when we make a request we should see this function fire and this logged to the console down here so let me go over here and go to localhost colon which means port and then 3000 so if we press ENTER we're not actually going to get any kind of response in the browser and it's just gonna kind of hang it you can see the loading icon up here swirling around and it's waiting for the server to respond but we never do actually respond we do however see this log to the console request made so we know that a request has been made and we've detected that we're just not sending a response back to the browser now just quickly this is logged down here in this console but not in the console in the browser over here and that remember is because this code is running on the server and not in the browser so obviously it's not going to log it to the console in the browser the code isn't running on the front end it's running on the back end and so we see in the terminal down here instead okay so now we know how to create that server and listen for requests and how to even fire a function when a request comes in how do we then actually send a response to the browser well we'd use this object right here and we're going to take a look at that a lot more in the next lesson

Channel: The Net Ninja

Views: 91,153

Keywords: node.js, node, node js, node.js tutorial, node tutorial, node js tutorial, node crash course, node.js crash couse, node js crash course, crash course, tutorial, install node js, install, node.js introduction, what is node.js, what is node js, what is node, node vs deno, node server, server, client, ip address, port numbers

Id: -HPZ1leCV8k

Length: 13min 41sec (821 seconds)

Published: Tue Jun 16 2020