Web Server Concepts and Examples
Summary
TLDRThis script delves into the fundamentals of web servers, explaining their role in serving web content. It clarifies that a web server is software that listens on a network port for incoming requests via a transport protocol, such as HTTP or HTTPS. The server then processes these requests and returns a response with the requested resource. The distinction between static and dynamic routing is highlighted, with examples illustrating how web servers serve files and dynamically generate content based on user requests. The script demystifies the inner workings of web servers, emphasizing the simplicity of HTTP and the importance of routing in determining server responses.
Takeaways
- 🖥️ A web server is a piece of software that serves web content, not necessarily tied to specific hardware.
- 🔍 Web servers listen on a network port for incoming requests, similar to a customer service representative waiting for calls.
- 🌐 Any device with a network connection can act as a web server, including laptops, Raspberry Pis, and smartphones.
- 📡 Web servers communicate using the Hypertext Transfer Protocol (HTTP), which is a text-based protocol.
- 📄 HTTP requests and responses are structured as text data, consisting of a start line, headers, and an optional body.
- 🔄 Web servers use the Transmission Control Protocol (TCP) as the transport layer to ensure reliable data transmission.
- 📂 Static routing involves serving files directly from a directory, while dynamic routing requires processing to generate content.
- 📝 HTTP responses include a status code, headers, and a body that can contain various types of content like HTML, images, or JSON.
- 🔧 Web servers can be configured to route requests to a single file or executable that acts as an entry point for a web application.
- 📊 Web applications can dynamically generate content based on user requests, often involving database interactions.
- 🚀 Hosting static websites can be cost-effective and scalable, with services like GitHub Pages or Amazon S3 handling high traffic.
Q & A
What is the primary function of a web server?
-A web server's primary function is to serve web content, which involves listening for requests on a network port, processing those requests, and returning the requested resources as an HTTP response.
Can any device with a network connection act as a web server?
-Yes, any device with a network connection, such as a laptop, Raspberry Pi, or smartphone, can act as a web server, provided it has the necessary software to handle and respond to web requests.
What is the difference between a web server and a gaming PC in terms of hardware?
-The hardware of a web server is typically optimized for handling web applications at scale, which may include more RAM, faster CPUs, and better network capabilities compared to a gaming PC, which is optimized for graphics and high-performance gaming.
How does a web server listen for incoming requests?
-A web server listens for incoming requests by remaining idle and waiting for connections on a specific network port provided by the operating system. It does not initiate outgoing connections.
What are the three main components of an HTTP request?
-The three main components of an HTTP request are the start line (containing the request method, target, and HTTP version), the headers (key-value pairs providing additional information), and an optional body (containing form data or other content).
What is the role of the Transmission Control Protocol (TCP) in web communication?
-TCP is the transport layer protocol used by web servers and clients to ensure reliable, ordered, and error-checked delivery of data packets over a network connection.
What is the purpose of HTTP status codes in web server responses?
-HTTP status codes in web server responses indicate the outcome of the request. For example, a status code of 200 indicates a successful request, while a 404 indicates that the requested resource could not be found.
What are the two types of routing in web servers?
-The two types of routing in web servers are static routing, which serves files directly from a directory, and dynamic routing, which involves processing requests through a web application to generate or retrieve content dynamically.
How can a web server serve both static and dynamic content?
-A web server can serve static content by directly returning files from a specified directory, while dynamic content is served by routing requests to a web application that generates or retrieves the content based on the request.
What is the significance of the 'Content-Type' header in HTTP responses?
-The 'Content-Type' header in HTTP responses informs the client about the nature of the content being returned, such as text/html for web pages, image/jpeg for images, or application/json for JSON data.
How does a web server determine which resource to return for a given request?
-A web server determines which resource to return based on the routing rules configured for the server. These rules map incoming requests to the appropriate resources, whether they are static files or dynamic content generated by a web application.
Outlines
🌐 Understanding Web Servers
The paragraph discusses the concept of a web server, dispelling misconceptions about the hardware requirements. It explains that any network-connected device can act as a web server, and the primary function of a web server is to serve web content through software. The paragraph outlines the six main functions of a web server, starting with listening for requests on a network port and returning responses with the requested resources.
📄 HTTP and the Language of the Web
This section delves into the Hypertext Transfer Protocol (HTTP), which is the language used by web servers and clients for communication. It clarifies that HTTP is based on human-readable text files, and even though newer versions use binary, the foundation remains text-based. The paragraph breaks down the structure of an HTTP request, including the start line, headers, and optional body, and contrasts it with a File Transfer Protocol (FTP) server to illustrate the importance of protocol specificity.
🔄 How Web Servers Send and Receive Data
The paragraph explains the process of sending HTTP requests to a web server using the Transmission Control Protocol (TCP), which is the transport layer protocol underlying HTTP. It describes how TCP ensures reliable data transmission by breaking data into packets and using handshakes and confirmations. The paragraph then discusses how web servers return HTTP-based responses, which include a status line, headers, and a body containing the requested resource.
📂 Serving Static and Dynamic Content
This section distinguishes between static and dynamic routing in web servers. Static routing involves serving files directly from a folder, which is efficient and suitable for hosting simple websites. Dynamic routing, on the other hand, requires the web server to route requests to an entry point file or executable, which then dynamically prepares a response based on the request. The paragraph provides a practical example of a dynamic website using PHP and a SQLite database to serve order status information.
Mindmap
Keywords
💡Web Server
💡Network Port
💡Hypertext Transfer Protocol (HTTP)
💡Request Method
💡Headers
💡Content-Type
💡Routing
💡Static Content
💡Dynamic Content
💡Transmission Control Protocol (TCP)
Highlights
A web server is a piece of software that serves web content.
Any device with a network connection can be a web server, such as laptops, Raspberry Pi, or smartphones.
Web servers listen on a port for incoming requests and do not initiate outgoing connections.
The network protocol provides 65,535 ports for software to communicate over.
Web browsers automatically send web requests to port 80 (HTTP) or port 443 (HTTPS).
HTTP (Hypertext Transfer Protocol) is a simple, text-based protocol used for communication between web servers and clients.
An HTTP request consists of a start line, headers, and an optional body.
Web servers and web clients communicate using the application layer protocol HTTP, which runs on top of the transport layer protocol TCP.
TCP ensures that data packets are successfully received and in the correct order.
Web servers return HTTP-based responses, which include a status line, headers, and a body.
The content returned by a web server can be various types, such as web pages, images, PDFs, or JavaScript code.
Routing is the process of connecting a request with the requested resource.
Static routing involves serving actual files from a folder, while dynamic routing involves serving content from a database.
Static websites can be hosted cheaply and performantly, as they require minimal resources.
Dynamic websites require a web application to evaluate HTTP requests and prepare responses based on the requested resource.
Web servers can be configured to route all requests to a single file or executable, which acts as an entry point for a web application.
Dynamic web applications can serve content that changes based on user interactions or other factors.
The example dynamic website consists of a single PHP file and a SQLite database, demonstrating simplicity in web application setup.
The video provides a high-level overview of web server functionality to familiarize viewers with the concepts.
Transcripts
so what is a web server i distinctly
remember when i was first getting
started programming
wondering what kind of computers are
used to serve web applications what like
operating system do they run and
how is the hardware different than the
gaming pcs that i've built over the
years
and as it turns out as is often the case
with all of this stuff where you don't
know it's this black box you're trying
to unwrap
i was asking the wrong question from a
hardware standpoint
anything with a network connection could
be a web server your laptop a raspberry
pi
a smartphone if you've ever done that
dance where you're trying to configure
an internet of things
device and you have to connect to it
over wi-fi that internet of things
device
is running a web server once you get
connected to it that's what you're
interacting with
you see a web server it's not about
hardware though certainly some hardware
is better suited to run a large web
application at scale
instead a web server is really just a
piece of software that serves web
content
but serving web content that's a tad
generic so let's break it down further
and define the six things that a web
server does in roughly the order in
which they happen
so to serve web content a web server
listens on a port
for a request sent via a transport
protocol
and returns a response containing the
requested resource
again with this list we're still really
abstract so let's go ahead and take each
one of these items
one by one for a closer look so to start
let's focus for a minute on what it
means for a web server to listen
basically once a web server application
starts up it just sits there
idle waiting for incoming requests if no
requests come in
then the web server doesn't actually do
anything i think everybody kind of
intuitively knows this but it's
important to keep the concept in the
front of our minds to illustrate this
imagine
the web server is a guy named jim who
works as a customer service
representative a call center
you can reach jim by dialing one two
seven zero zero zero
zero zero zero one and like jim the web
server just sits there waiting for
incoming requests jim never places an
outgoing call
he just waits and listens now i happen
to have a web server running right now
on my local machine of course it's
running on the local host ip address of
127.0.0.1 and if we
dial that ip address into the browser
you can see this message
hey it's jim how can i help you so what
exactly
is the web server listening to the
answer is a network port provided by the
operating system that the web server is
running on
think like windows mac os more
specifically the network protocol that
we're using provides 65
535 ports that software running on the
computer can communicate over
now when a web server starts up it
begins listening on one or if so
configured
many of those ports going back to the
call center example for a minute let's
assume that jim works at a call center
with 65
535 different extensions it's like a
really big facility
and you can reach the call center's main
line by dialing 127.0001
but to reach the phone on jim's desk you
have to dial his extension
let's suppose that dialing extension
8000 will make the phone on jim's desk
ring
jim's only listening for calls coming in
on extension 8000 and if you dial
any other extension then you won't get a
boy jim so let's go back to our demo for
a minute earlier when we dialed the ip
address 127.0.0.1 we didn't provide a
port
and that's because a web browser
automatically sends web requests to
either port 80 or port 443 depending on
whether we prefix the url with http
or https in the demo i had the web
server running on port 80
using an unencrypted http connection so
there was no need to specify a port as
the web browser automatically routed our
http
request to port 80 by default but let's
stop the web server and start it again
on port 8000
now if we reload the page you can see we
get an error that this site can't be
reached as the ip address refused to
connect
and that's because there's no longer a
web server listening on port 80 on our
local host
we can tell the browser that we want our
request sent to port 8000 instead by
appending the ip address with a colon
and then adding the port number
now you can see since we've specified
the right port to communicate with our
server
we've once again reached gym now just
like you could have multiple people
working at a call center
each listening for incoming calls on a
different extension so too can you have
multiple web servers running on one
machine let's suppose jim has a
colleague named jane
who can be reached by dialing extension
8001. if you dial extension 8001 you'll
hear jane speaking but if you dial
extension 8000 you get hey it's jim how
can i help you
let's illustrate this by starting a
second web server over on port 8001
sure enough if you navigate to port 8001
you see the message from jane
but if you switch back to port 8000 then
you get the message from jim
the point is that one single computer
can have many web servers or other
networking services running at the same
time
and just like we have to dial the
correct extension to reach jim at his
desk
so too must we send our request to the
correct port
in order to reach the desired web server
speaking of sending a request let's take
a closer look at what exactly sending a
request to a web server means
see web servers and web clients like
your chrome firefox whatever
communicate via the hypertext transfer
protocol or http
and you can think of this as the
language that the web server and the web
client use
but what does http actually look like
for me this was the most interesting
part of researching this video
because of the misconceptions i had
about what http actually
is now when they say hyper text transfer
protocol
they literally mean text like http is
just a web browser and a web server
sending raw human readable text files
back and forth
and i'm sure i'll get comments pointing
out that http version 2 and beyond
converts the text to a binary before
sending but the point still stands http
is based on text and i don't know why i
thought it was more complicated than
that well
i kind of do and we'll cover that when
we look at the transport layer later on
but we are talking about the application
layer for now and http
is really really simple let's open up
this text file here containing an
example http request and have a look
that's it that's a valid request in the
http language
so bringing the request down the data is
separated into three blocks the first
line is the start line which contains
the request method which is git in this
case
the request target which is the specific
web page or resource we're requesting
here you can imagine we're looking up an
order on an e-commerce website
and finally the http version which in
the case of this request is version 1.1
now the next block is made up of every
subsequent line up until the first
line break we encounter these lines
contain the headers of our request
as defined as key value pairs here we
just have two
host which is the ip and port we're
attempting to send the request to and
the user agent which is the header that
tells the web server what type of
browser we're using
this can be useful so the web server
might know to serve you mobile content
in case you're accessing on a mobile
device
finally the third block is made up of an
optional body which begins
after that first line break at the end
of our header block
and since the request we're looking at
is a get request we actually don't have
a body but suppose if the web server
accepted a form submission to look up
order status instead
in that case the post request using the
post request method
might include a body that looks like
this here we've added a body with the
name of the form input where we entered
our order id
and the value of that input one two
three in this case note that we also
changed our request target to be just
orders since we're providing the order
id in the body instead of the url
we also added a couple of new headers
one content type which tells the web
server how the data in our body is
encoded
and a content length header telling the
web server the size of the body and
that's it i've seen http requests
represented this way before but like i
always thought it was some kind of
shorthand or human-friendly
representation of what was going on
under the hood
i didn't realize i was looking at the
http protocol itself
basically sending the contents of that
file to the ip address on our web server
using a transport protocol is literally
the same thing as typing the web
server's ip address port and target
resource into the browser
and that's because http is what's
considered to be an application layer
protocol
it's like the language that the web
servers and the clients speak if any
other application
protocol other than http is sent to our
web server it won't know how to handle
it
let's go back to jim and jane for a
minute to kind of clarify this idea
imagine that jim who if you recall
available at extension 8000
only speaks french meanwhile let's
imagine jane who again is available at
extension 8001
only speaks german if you as a german
speaker dial extension 8000
jim won't have any idea what you're
saying because he only speaks french
he won't even be able to help you with
your request he won't know that you're
even making a request
let's illustrate this point by starting
jim's web server again on port 8000
but instead of starting jane's web
server on port 8001 we'll start an ftp
server on port 8001 instead
now ftp stands for file transfer
protocol and as the name suggests
ftp servers were typically used to
transfer files in the dark ages before
you had services like dropbox now if you
start an ftp server it begins listening
for requests sent in the file transfer
protocol
which is a different language than the
hypertext transfer protocol that web
servers and web browsers speak
now that our ftp server is up and
running on port 8001 let's go ahead and
navigate our browser to that port on our
local host
and we can see that we get this error
message this page isn't working
127.0.0.1 sent an invalid response error
invalid http response now basically what
happened is the web browser sent an http
request to the ftp server then the ftp
server didn't
understand the request and returned a
response indicating as much in the ftp
language which our browser that only
speaks http didn't understand either
and thus our browser is giving us this
invalid http response error
so now we know that http is the language
web browsers and web servers speak
but how is the http request actually
being sent
to the web server and i've kind of
intentionally glossed over this until
now while we've looked at
what a valid http request looks like but
we have to send it to the web server
somehow
you see http and ftp are what's known as
application layer protocols
meaning they both run on top of an
underlying communications or
transport layer protocol let's go back
to jim and jane for a second think about
how they speak
different languages french and german in
our latest hypothetical but both of
their voices are
carried over the telephone line german
and french are the application protocol
like http and ftp
but the phone line that's carrying their
voice that's the transport layer
which in the web server world is the
transmission control protocol or tcp
now i'm not going to get too deep into
the inner workings of tcp it's really
beyond
anything you need to know to get started
with building web applications but just
know that tcp at a very simple level
breaks data up into packets then using
handshake
and confirmations it ensures that every
packet is successfully received by the
recipient
and the recipient knows the order of
each packet for reassembly
now that we know how a request is sent
to the web server the next thing that
happens
is that the web server returns a
response again just like our browser
sent our request
in the http language so too does the web
server return an http
based response now just like our request
an http response is just text data
again separated into the same three
blocks again we have the start line
which
for a response is sometimes referred to
as the status line
it contains our http version and an http
status code here the response contains
the status code 200 which is kind of the
generic response for
a successful http request pretty sure i
could easily do a 20 minute video just
on http status code so make sure
that you subscribe if you're interested
in seeing that video
but back to the request below that first
line just like in our http request we
have multiple lines of headers defined
again as key value pairs
and just like the request again headers
are enumerated beginning on line two and
are bounded by the first line break that
we encounter one of the important
headers in this example response is the
content type
which here is text slash html which lets
our browser know to expect
a text file text content and
that the text content will be html
hypertext markup language
aka a web page in the body of the
response and moving down to the body
sure enough as
promised by our content type header our
body contains html content
here the html just a simple header tag
containing the text hello world
now if this were an api response the
content type might instead say
application json in which case the
response body would contain some json
data for
our application to consume and taking it
one step further if the resource we were
requesting was an
image the content type might be image
slash jpeg
and the body would contain the binary
contents of an image file
the main takeaway here is that the
content returned by a web server is not
limited to just web pages
the body of an http response can contain
all kinds of things like images and pdf
documents and javascript code or web
fonts
in fact the video you're watching right
now was returned piecemeal in bodies of
a bunch of http responses
sent by youtube's web servers to the web
browser or your youtube app
all right now this kind of transitions
us to the last piece of what a web
server does
now we've looked at the http response in
the abstract but let's talk a bit about
how a web server decides what to respond
with
and i mean that in the practical sense
if i request an image resource and the
web server returns it
where's that web server getting the
image from how do we actually set this
up in the real world
determining which resource to return is
often referred to as routing which is
really just the practice of connecting a
request with the
requested resource the content that's
being requested
and for our purposes you know it's
helpful to think about routing as being
separated into two distinct categories
there's static routing and then there's
dynamic routing now
static routing is just the web server
serving actual files out of a folder
just like you have a folder on your
desktop that you can navigate to and
open various files you can open an image
of a cat you could open a text file
similarly you can point a web server to
a directory on the file system
and tell the web server to return
anything that's requested in fact
let's do that now we'll open this folder
and as you can see i've got an image
file
called cat.jpg which as you might have
guessed just a picture of a cat
and two html files index.html and
hello.html
and if we take a look at those files
they're very simple html files that just
contain their respective file names in
an h1 tag
so let's go ahead and start up a web
server listening on port 8000 inside of
this folder
now if we navigate to 127.0.0.1.cat.jpg
our web server returns the image of the
cat and if we navigate to the root at
127.0.0.1 we get the default index.html
file's contents
and finally if we add a slash hello.html
to the root
then we get the hello.html contents and
if we navigate to somewhere that doesn't
exist in the target folder then we get a
404 status for file not found
and that's because the file does not
exist on the web server now static html
websites like this
they can be really cheap and performant
to host since they require very little
resources
a static website the web server is just
taking a file that already exists
returning the contents and the body of
the response something that web servers
are highly optimized for
and to that end you can host static
sites completely free using something
like github pages
or mostly free with an amazon s3 bucket
and handle huge spikes in traffic
hundreds of thousands of visitors
in case one of your blog posts makes it
to the front page of hacker news or
without any slowness or downtime for
only a few cents a month
but what about situations where the
content that exists at a particular
resource
changes dynamically think about a my
profile type page that changes depending
on who the logged eden user is or
imagine
an e-commerce web page where you can
check your order status
surely you wouldn't generate a static
html page for every single order in your
system and then have to switch out those
pages whenever an order status changes
from processing to shipped
to delivered of course not instead you'd
save that info to a database
and serve the contents of that database
dynamically
in practice this usually means
configuring your web server to route all
requests
to a single file or executable which
serves as an entry point for your web
application
and that web application could be
created using programming languages like
javascript php python ruby
and it would evaluate the http request
and then dynamically prepare a response
depending on the requested resource
opening up the http request we looked at
before we see it's requesting the
resource
for order id 123 and if you sent that
to a web application it would search the
database for order 123
and return the status now i happen to
have a very simple example of a dynamic
website that does
exactly that okay so now we're in this
dynamic folder and
i'm going to start a web server on port
8000 and if we navigate over and we go
to
localhost 8000 orders and we'll check
order id of one
you can see that it comes back says
order one's been delivered
and gives us a tracking number let's go
and check the status of order two
we can see that order two has been
shipped and again it provides us with
the tracking number one more time let's
go ahead and check us
order status of order three we can see
that it's processing
and we don't have a tracking number yet
let's see if there's an order status for
four
we check order status for four and it's
the same processing and there is no
tracking number
let's go and check and see if there's an
order status for five here we get
this page cannot be found an error of
404 was given so that means there is no
order id number five in our system here
let's go ahead and jump into the code
and see how i set this up
now i wanted to keep this as simple as
possible so you can see this whole
dynamic website consists of just a php
file
it's not importing any libraries at all
no composer files
it's just raw php standard library and
you can see that the entire dynamic web
application
is only 45 lines long and we also have a
sql lite database and if we jump into
the contents of that real quick
you can see that it has one table and in
that table there's columns of id
status and tracking number so let's jump
into this index.php and see how it's
dynamically routing our request
in order to return our order status we
first are getting our order id from the
route
here we're using this parts url helper
in order to get the path out of that
request uri
and then we're passing it to this regex
method which basically says
look for or this regex pattern says look
for orders
followed by a slash and then any digit
and then it takes that regex pattern
and it does this purex match and if no
matches are found then it returns this
not found
function or calls this not found
function there it sets the header to 404
and then just exits right there
but if this path variable does match
this regex so it's like order slash one
or order slash two
then it returns that match as the order
id so you basically get this integer
back you can see it's
saying return an integer from this
function and that gets stored into this
order id variable
that order id then gets passed to our
get order status from database function
and we can see how that works down here
basically it takes that order id as a
property
it creates a new connection to our
sqlite database
then it creates this sql statement that
says select all from orders where id
equals question mark
then it binds the order id and then here
it fetches the first
result as a associative array stores it
in this result variable
so if the order id is not found this
result variable is null and then again
it returns this not found function
or calls this not found function that
sets the response status code to 404 and
then exits
but if a request is found it's being
returned as an associative array so
that's going to contain
the id the status and the tracking
number if it's not null
and it's going to return all that back
up here and store it in
the order details variable finally we
call the print html function and we pass
it that order details array that we got
back from the database and if we scroll
down to the print html function
you can see it takes that order those
order details that array of order
details and it just says print and it
defines basic hypertech markup language
you've got
the opening html tag the body tag and
then you've got an h1 tag where you're
reaching in and getting the order id
and the order status and then you're
getting the tracking number and
returning it right here
so again going back if we go to orders
like one
it's reaching into the database getting
the content for order number one
and returning it to the user so that's a
really high level overview of what a web
server does as always with this channel
i'm just trying to introduce you to
these concepts so when you encounter
them later you have enough familiarity
to google your way to a better
understanding
something that all software developers
do if you enjoy this kind of content
please consider subscribing
thank you so much for watching and i'll
see you guys next time
تصفح المزيد من مقاطع الفيديو ذات الصلة
5.0 / 5 (0 votes)