You're seeing this because you're a teacher 🤓

🎯 Your main goal for this lesson

If you can get students to understand there's a relationship between clients and servers - and which is which - consider it a win.

🧠 Things to keep in mind when teaching

This lesson is much headier than our first: lots of technical terms and concepts, code snippets, and higher-order thinking. Be patient with them.

🚀 Lesson Plan

Activity One: 15 minutes

We’re going to start class by mimicking the request-response cycle...but don’t tell the kids! You’ll use the materials attached here. Split everyone into three groups: A, B, and C. Put groups A and C on the edge of the seating of the room; put group B in the middle. Ideally groups A and C will have matching numbers.

Each member of group A will need one of the documents labeled REQ and each member of group C will need the document labeled RES. When the teacher says ‘go’ students in group A will pass their REQ document to a member of group B who will continue passing it until it can make its way to the correct member of group C. When the member in group C gets the REQ, they complete the task and then send the RES document.

Students should pick up on the ‘packet switching’ that’s going on but check for understanding. Ask them guided questions about the request and response documents. This will set the stage for class today.

Activity Two: 40 minutes

Spend 20 minutes going over the information from the text. Have students connect the start-of-class activity to the request-response cycle used by computers. Demonstrate or have them try with their own computers by making requests to certain sites and seeing the network traffic coming back.

After that, use this attachment to play the HTTP status game: 404 Game Not Found.

Activity Three: 10 minutes

Take the formative assessment and work towards mastery.

Clients, Servers, and Status Codes

By the end of this lesson, you'll be able to...

  • Recognize clients and severs used on a daily basis.
  • Classify different HTTP status codes.
  • Relate issues a user is having to a possible type of response code.

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:

How does the internet work?

Website and Webpage Basics