Clients, Servers, and Status Codes

---

How much of the internet do you see?

Even if you're using the internet every day - which, you probably are - you're probably not seeing very much of it. We're not referring to the vast scope of different sites and domains that exist on the web, we're talking about the traffic that's coming across your computer on a daily basis. The information passing through your computer is kind of like light: we only see a small band of visible light which is part of a much broader spectrum. Whenever you type in a URL or open an app, you may see data in the form of a webpage, but there's much more happening just under the surface.

What are Clients?

Broadly, clients are the pieces of software that allow us to interact with the information provided by web servers. In another sense, clients are the 'user' side of the web. You're using a client right now to interact with this site; a common term for a web client is a browser.

Browsers

There are many different browsers available, but they all receive the same information from web servers. Where browsers differ from each other is how they interpret the information they receive. They are pieces of software written by humans and, as such, the humans who wrote them baked in their opinions so as how to do what with the information it receives. This can cause differences in how websites appear when rendered by a client.

The first browser was written by Tim Berners-Lee (the guy was the internet OG). Creatively enough, he called it the WorldWideWeb, but the name was eventually changed to Nexus. The first large-scale, popular browser available was called Mosaic and eventually went on to be the inspiration for a browser called Netscape Navigator. These browsers were unique in that they had graphical user interfaces (GUI) that made it easier and more engaging for users to interact with websites. Soon after the release of Navigator, Microsoft entered the arena with their recently deceased Internet Explorer (IE).

In the time since IE's initial release in 1995, there have been countless other iterations of browsers that have vied for dominance in the market. Regardless of popularity, their function is the same: to request information from web servers and render the response for the user.

A representation of the request-response cycle between a client and server.

What are Severs?

While clients are typically pieces of software, servers take on multiple definitions. Servers can refer to hardware, being a physical machine or device dedicated to serving up information to clients; servers can also refer to software, or a program written to handle incoming requests and respond appropriately.

Hardware

In the modern day, servers are typically mounted on racks in large facilities called data centers. These data centers have thousands of servers running to support the demands of customers. Depending on how popular a website is, multiple servers may be provisioned in order to deal with the amount of traffic coming in. Servers have a series of ports that accept incoming traffic. Typically, web traffic is routed through port 80. While we won't be building any physical servers during this course, understanding the underlying architecture is important.

Software

On the contrary, we will be writing servers as pieces of software. Servers can be written in many different languages (such as Python, Java, JavaScript, Ruby, PHP, Go, etc.) however, they all work using the same underlying principles: listen for requests from clients and respond with the appropriate information.

A server written in Python

1from flask import Flask
2app = Flask(__name__)
3
4@app.route('/')
5def hello_world():
6    return 'Hello, World!'

A server written in JavaScript

1const express = require('express')
2const app = express()
3const port = 3000
4
5app.get('/', (req, res) => {
6  res.send('Hello World!')
7})
8
9app.listen(port, () => {
10  console.log(`Example app listening at http://localhost:${port}`)
11})

While you may not understand the syntax of these two code snippets, the important part is seeing their similarities. Both of these servers are 'listening' for a user to navigate to '/' (what we commonly refer to as the index of a website). When someone makes a request to that url, the server responds with a message that reads 'Hello World!' to the user.

HTTP: Request and Response

We alluded to this idea in the first lesson, but clients and servers needed a uniform way of communicating with each other; we call these protocols. Tim Berners-Lee developed the Hypertext Transfer Protocol (HTTP) when creating the web in the late 1980's. This protocol outlines the specific types of requests a client can make to a sever and how the server can respond to the client.

HTTP Requests

Requests take several forms, but two are the most commonly utilized and accepted by servers: GET and POST.

• GET requests are simply asking the server for information from a particular resource. This is typically referred to as a read-only operation, meaning the client is simply 'asking' to read some information from the server.
• POST requests are, obviously, different. This type of request is used to send information to the server. Most often these are utilized when completing a form. Since we're sending data to the server and, presumably, that data is persisting somewhere, we call these write operations since data is being created, updated, or deleted (CRUD).

HTTP Responses

While there are only a few types of HTTP requests, there are a number of HTTP responses. Fortunately, they can be grouped into five classes. The purpose of these statuses is to give a clear message to the client as to whether or not a request has succeeded, if not, why.

1xx (Here's some information)

You'll rarely see these messages when working with servers.

2xx (All good)

You hope to see these often! The most common of these messages is 200 OK meaning that the request succeeded.

3xx (Go somewhere else)

These are essentially redirects. A common example is being redirected from 'site.comtowww.site.com`. These are also common whenever a user is unauthorized for a certain resource and 'bumped' back to a page to which they do have access.

4xx (You messed up)

The client made a mistake. Chances are you've seen the most famous of these: 404 Not Found for a page that doesn't exist.

5xx (I messed up)

The server made a mistake. Somewhere in the code on the server there is a mistake. Maybe it's a typo; maybe it's a request to another service that's returning unexpected information; maybe the internet is broken.

HTTPS

When the web was created, the immense number of uses we have today couldn't have been imagined. Many of these uses dictate a need for a more secure environment to request resources and respond with information. HTTP request and responses, by default, are not encrypted, meaning they appear as plain text. If anyone were to listen to your computer's traffic, they could easily read a request from your computer like the one below:

1POST /login HTTP/1.1
2Host: devclassroom.dev/login
3Content-Type: application/x-www-form-urlencoded
4Content-Length: 27
5
6email=student@school.edu&pass=Reallysecurepassword123!

Obviously, this kind of traffic isn't secure. However, HTTPS (Secure) adds a layer of encryption that makes it impossible for anyone spying on network traffic to steal your information. By adding cryptographic keys, the outgoing request and incoming response are encrypted. Can these encryptions be broken? Yes. However, it's difficult and this method is much more secure than plain HTTP.

1gAAAAABdasdflXSeddsekh9LY34G44DpZE4jkxm4Aiasdf632134rZQ12341g2iH5ax3y2D3X4k23PWz1O74AB37V_a4vabF13fEr4kwmCe9dfs8Wlr8fsfdZo1XNm-WdasdffjAVtSgFQ32234==

How do we see it all?

This will be our first foray into doing something with our computers! Follow the instructions in the video below; you'll need a modern browser like Edge, Firefox, or Chrome. We'll be using our developer tools - which ship with these browsers - to explore some traffic.

---

Previous and Next Lessons: