4 hours
As an engineer, your users will connect to your apps via the Internet! Understanding how the Internet actually works will help you know what your code is doing and how your code interacts with other code on the internet.
Understand the structure of the internet and how data is tranferred across the internet. Be able to answer questions such as:
Understand the concepts used in web development: HTTP requests + responses, HTML, URLs, and more
Slide Deck - How the Internet Works
These exercises are divided up by video. I recommend watching or re-watching the video, and then answering the questions for that section.
Many of the exercises involve using command line tools to explore different aspects of internet infrastructure. You can learn more about a tool by looking at its “man page” (short for “manual page”). These can sometimes be tricky to understand so don’t worry if you don’t understand everything! Even if you don’t understand everything, you can often learn by spending some time reading the man page. You can also google a command to learn more about it.
A server is a computer somewhere running all the time so it is always ready to respond to requests, called “serving a request” which is where the name server comes from.
One type of server is a web server that serves web pages. When you visit Techtonica the files you see are being delivered by a web server.
Watch the video: https://www.youtube.com/watch?v=ZhEf7e4kopM
Draw a picture that shows how your laptop might be able to communicate with a server in Japan. What are the different types of connections between devices? Compare your picture with another apprentice.
Watch the video: https://www.youtube.com/watch?v=5o8CwafCxnU
Ping
ping is a command line program that sends packets to an address and tells you the response. It can be used to see whether you are able to connect to a certain website and how long it takes for the request and response to arrive back.
You can type man ping in the Terminal to learn more about ping
Try running the following commands on Terminal. You can press CTRL-C to stop them.
ping www.berkeley.eduping www.kyoto-u.ac.jpping www.google.comping www.this-website-does-not-really-exist.comMake up some ping commands yourself!
Questions:
IP Addresses
Exercise 1:
63.245.215.20 in your browserExercise 2:
Dig
dig is a command line program that looks up the DNS record for a URL.
You can type man dig in Terminal to learn more about dig.
Try running the following command on Terminal: dig google.com
In the “ANSWER” section, you can see which IP address was found for the hostname. Which IP address was found for google.com? What happens if you go to that URL in your browser?
Watch the video: https://www.youtube.com/watch?v=AYdF7b3nMto
Traceroute
traceroute prints the route that packets take to a network host (server).
You can type man traceroute in Terminal to learn more about traceroute.
Try running the following command on terminal: traceroute www.google.com
Make up some traceroute commands yourself! A good one to try is to use a domain name for a website in another country or continent to see how many more hops it must make.
traceroute www.independent.co.uk
How many servers did your packets go through to get to the server hosting google.com?
Watch the video: https://www.youtube.com/watch?v=kBXQZMmiA4s
When you open a website, your browser (the client) needs to get information from the server, which stores the information. To request information from a server, it makes HTTP requests. The server responds with the requested content, and then the browser displays that content to you. In this exercise we’ll investigate which HTTP requests some websites are making and what content is being returned by the server.
We’ll use Chrome DevTools to inspect requests and responses. We’ll use the “Network” tab for this exercise.
You can watch this video to learn about the Network Tab: https://www.youtube.com/watch?v=PwoT18tp6Hs
To open the DevTools network tab:
We’ll start by going to to https://news.ycombinator.com/news. Go to this site and open the Network tab. Refresh the page to see all the requests used to fetch the content for the page.
The Network tab will show all the requests that your browser made to the server. For each request you can see the method (GET/POST/PUT) and the response status (200/400/404/etc) and other information.
You can click on a request to see more specific information about that request. Once you click on a request, look at the tabs for Headers and Preview. “Headers” shows the data sent from the browser to the server, and “Preview” shows the response sent back from the server. The “Response” tab also shows the response, sometimes in a different format.
You can click the “X” to get back to the main network tab.
Exercises:
Go to https://news.ycombinator.com/news
Let’s do the same for https://techtonica.org/
Now go to https://news.ycombinator.com/login. We’ll look at how a browser and server could interact to let a user log in to a website. On https://news.ycombinator.com/login, in the “Login” form, put some random text in the “username” and “password” fields, and press “login”.
We chose pretty simple websites to look at for this exercise, but some websites are much more complex and make many requests to the server! Choose a few other websites to go to. Look at the requests being made from your browser to that website. What can you learn from looking at the Network tab?
Explain how traceroute discovers a path to a remote host. Read the man page to learn the answer!
Research in more depth how one of these works: TCP, HTTP, DNS. Teach what you learned to someone else!
Watch some other videos about the internet:
Form small groups and answer these questions to assess your own understanding: