Web Server Concepts and Examples

Summary

This 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

00:00

🌐 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.

05:01

📄 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.

10:02

🔄 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.

15:02

📂 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.

Keywords

💡Web Server

A web server is a software that serves web content over the internet. It listens for requests from clients and returns the requested resources. In the video, the web server is compared to a customer service representative waiting for incoming calls, illustrating its passive role in waiting for client requests.

💡Network Port

A network port is a logical channel on which a network service listens for incoming connections. The video uses the analogy of a call center with multiple extensions to explain how a web server can listen on a specific port for requests, like a customer service representative listening on a specific extension.

💡Hypertext Transfer Protocol (HTTP)

HTTP is the language used for communication between web servers and clients. It is a text-based protocol that allows for the transfer of web content. The video describes HTTP as a simple, human-readable text file format, which is sent and received by web browsers and servers to request and deliver web pages or other resources.

💡Request Method

A request method is a command used in an HTTP request to indicate the action to be performed on the resource. The video mentions 'GET' as an example, which is used to request data from a server. The 'POST' method is also mentioned, which is used for submitting form data to a server.

💡Headers

Headers in an HTTP request or response are key-value pairs that provide additional information about the request or the resource being requested. The video explains that headers can include information like the 'Host' to specify the server's address and the 'User-Agent' to identify the browser type.

💡Content-Type

The 'Content-Type' header indicates the nature of the data being sent or received in an HTTP request or response. The video mentions 'text/html' for HTML content, 'application/json' for JSON data, and 'image/jpeg' for image files, showing how the server informs the client about the type of content it is delivering.

💡Routing

Routing is the process of determining how a web server should respond to a client request. The video distinguishes between static routing, where the server serves files directly from a directory, and dynamic routing, where the server processes the request and generates a response based on the content of a database or other dynamic sources.

💡Static Content

Static content refers to web pages or other resources that do not change based on user interactions or data from a database. The video explains that serving static content is efficient and can be done with minimal server resources, making it suitable for hosting on platforms like GitHub Pages or Amazon S3.

💡Dynamic Content

Dynamic content is content that changes based on user input, session data, or database information. The video demonstrates dynamic content with a simple PHP script that fetches order status from a database and serves it to the user, showing how a web server can generate and deliver personalized content for each request.

💡Transmission Control Protocol (TCP)

TCP is a transport layer protocol that ensures reliable data transmission over a network. It breaks data into packets, manages their transmission, and confirms their receipt. The video briefly mentions TCP as the underlying protocol that carries HTTP requests and responses, comparing it to a telephone line that carries voices in the call center analogy.

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

reddit

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