Node.js Crash Course Tutorial #3 – Clients & Servers
- December 30, 2023
- Posted by: MainInstructor
- Category: C Go JavaScript Node PHP Web Development
Video Title: 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
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Thannk you Shaun, i hardly comment on any youtube post, but i must say, it me and you dis holiday, i have finished your typescript course, mongodb, react now am onto nodejs, cause i want to go into fullstack mobile development with reactnative, i love the way u break up your lessons into small video chunks, dat i can gulp up. Thanks mate
Awesome tutorial! Thank you so much! 💛
what Vsc version do you use?
Will it be helpful if I watch this playlist now ? I mean will there be a problem now since it's a 3 year old video
please help me , how u got that localhost 3000 pg at 12:40 time stamp, also the request mode line at terminal .Because I am getting error
best teacher ever thanks shaun ❤
Just found this channel and playlist. It's really great.
Great crash course, cheers!!
that is awesome, I can't believe I am learning this for free, god bless you
while creating server whhen i add const vscode shows me error that says variable declaration cannot be empty
Thank you for these lectures, the content and presentation are great.
I just want to know what software do you use to create these animations?
like the way he starts saying "all right gangs", feels like we are in a gang!
My browser is showing my directory Instead
Should I be worried?
Net Ninja has been a go to channel for me every time I want to learn or explore new content on web dev. Thanks a lot Shaun for providing us industry level standards. @netninja rocks
Great explanation
I just want to thank you for making this simplified and interesting content for free and available on here
this is amazing, no other tutorial explained the basics of what is a server and client are and what each kind of request type means. Even though I've used all these things in building apps, I never understood them until this video
How do internet applications/programs know each other's port numbers so that they can use unique port numbers and then not overlap with other programs?
Love your videos Top G. Love the way you break the topics down for us. Helps us a lot in understanding the topics
Thank you
please update <3 !!!
One of the greatest teachers I've seen in my entire life.
Respect Brother..!
Keep it up.
you have made the server side programming way too easy for me, that means a lot to me, keep up the good work
So clear!!!
My like changed the score from 3,6to 3,7 🙂 I love this tutorial .
I have been to multiple boot camps for which I paid thousands of dollars, but I must admit this guy's way of teaching and explanation is next level. only it was in his videos that I could nail down some of the topics