1 of 40

Networking

CIS 1912

2 of 40

Logistics

  • Please complete the logistics form: https://forms.gle/GxLjyNUCnsY5jxGd7��������

​

​

​

​

​

​

  • If you do not have a GitHub account please create one! As all of the homework will be handed out via GitHub
  • OFFICE HOURS IN THE LEVINE BUMP SPACE

�

3 of 40

What actually happens here?

4 of 40

5 of 40

6 of 40

https://medium.com/@kylelzk/networking-theory-understanding-tcp-ip-the-backbone-of-the-internet-c435f50d7a9a

7 of 40

https://medium.com/@kylelzk/networking-theory-understanding-tcp-ip-the-backbone-of-the-internet-c435f50d7a9a

Debugging Layers of Networking

8 of 40

Browser Demo

9 of 40

Identity & Routing

10 of 40

Network: IP

[source ip, destination ip, port]

  • Internet Protocol
  • Lowest level of network abstraction for this class
  • Identifies computers off four octets of information
  • Special IPs
    • Loopback
      • 127.0.0.0 - 127.255.255.255 (127.0.0.0/8)
    • Private
      • 10.0.0.0 - 10.255.255.255 (10.0.0.0/8)
      • 172.16.0.0 - 172.31.255.255 (172.16.0.0/12)
      • 192.168.0.0 - 192.168.255.255 (192.168.0.0/16)
    • Hugo demo

11 of 40

A Note: IPv6

  • 32 bits of data gives us 4,294,967,296 addresses, clearly not enough
  • IPv6 uses 128 bits of data, more than we know what to do with
  • Very little adoption (~45% in US) despite massive push
    • High switching costs
    • Engineers don't want to learn a new stack
  • We'll focus on v4

12 of 40

$ ip address show

1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000

link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00

inet 127.0.0.1/8 scope host lo

valid_lft forever preferred_lft forever

inet6 ::1/128 scope host

valid_lft forever preferred_lft forever

4: enp7s0u1u4u4: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000

link/ether 64:4b:f0:2b:3d:11 brd ff:ff:ff:ff:ff:ff

inet 192.168.1.95/24 brd 192.168.1.255 scope global dynamic noprefixroute enp7s0u1u4u4

valid_lft 58529sec preferred_lft 58529sec

inet6 fe80::7005:8ca3:a56b:b442/64 scope link noprefixroute

valid_lft forever preferred_lft forever

5: docker0: <NO-CARRIER,BROADCAST,MULTICAST,UP> mtu 1500 qdisc noqueue state DOWN group default

link/ether 02:42:f5:42:75:f3 brd ff:ff:ff:ff:ff:ff

inet 172.17.0.1/16 brd 172.17.255.255 scope global docker0

valid_lft forever preferred_lft forever

Loopback interface

Ethernet

Docker

Linux: ip addr show

Mac: ifconfig

Windows: ipconfig \all

13 of 40

Visualizing

192.168.1.0 - 192.168.1.255

(192.168.1.0/24)

192.168.1.50

192.168.1.100

14 of 40

Creating a pipe

15 of 40

Transport: TCP

  • Transmission Control Protocol
  • Connection = IP + Port
  • Implements error-checking to ensure exactly-once packet delivery
  • Concept of "ports"
    • Range 1 - 65,535
    • Why do we need ports?
  • Alternatives
    • UDP - same concept of ports, but no error checking
    • QUIC - TLS-focused protocol built on UDP
      • Driver for HTTP/3

16 of 40

$ ss -4lt

State Recv-Q Send-Q Local Address:Port Peer Address:Port Process

LISTEN 0 128 0.0.0.0:47497 0.0.0.0:*

LISTEN 0 4096 0.0.0.0:mysql 0.0.0.0:*

LISTEN 0 10 0.0.0.0:57621 0.0.0.0:*

LISTEN 0 1 127.0.0.1:12315 0.0.0.0:*

17 of 40

Visualizing

192.168.1.0 - 192.168.1.255

(192.168.1.0/24)

192.168.1.50

192.168.1.100

:80

192.168.1.50:80

18 of 40

Filling the pipe

19 of 40

Application: HTTP

  • Protocol behind the Web
  • Client/Server model
  • Foundation for this course

20 of 40

HTTP Request Components

  • Method
    • What action to perform (GET/POST/PUT)
  • URL
    • Where to send the request to
  • Headers
    • Metadata about the request
  • Body
    • Arbitrary data associated with the request

21 of 40

Methods

GET

  • No body
  • Idempotent
  • URL Params
  • Ex. retrieving webpage

PUT

  • "Put"s body onto server
  • Ex. file upload

POST

  • Uses body
  • Frequently side-effecty
  • Ex. form submission

DELETE

  • Deletes resource
  • Ex. file deletion

22 of 40

URL

https://httpstat.us/200

Protocol�HTTP/HTTPS�Specifies whether or not to use TLS encryption

Host�Which domain name to request to�Port defaults to 80

Path�Which resource on the host to request

23 of 40

Headers

Headers pass metadata about the request.

Examples:

  • Authentication
    • Authorization, WWW-Authentication
  • Caching
    • Age, Expires
  • Conditionals
    • Last-Modified, Etag, If-Match
  • Cookies
  • Body info
    • Content-Type, Content-Length

24 of 40

Body

  • Only used in POST, PUT
  • Used to pass chunks of data along with the request
  • Examples
    • HTTP form data
    • File data for file upload
    • JSON for an API

25 of 40

Example Request

GET httpstat.us/200

$ curl -vv 'httpstat.us/200'

* Trying 172.67.148.117...

* TCP_NODELAY set

* Connected to httpstat.us (172.67.148.117) port 80 (#0)

> GET /200 HTTP/1.1

> Host: httpstat.us

> User-Agent: curl/7.58.0

> Accept: */*

Method

Headers

URL

26 of 40

HTTP Response Components

  • Status code
    • Numeric code to indicate status
  • Headers
    • Metadata about the response
  • Body
    • Response data

27 of 40

Status codes

2xx

  • Success
  • 200 - OK
  • 201 - Created
  • 202 - Accepted

4xx

  • Client error
  • 400 - Bad Request
  • 401 - Unauthorized
  • 404 - Not Found
  • 418 - I’m a Teapot

3xx

  • Redirection
  • 301 - Moved Permanently
  • 302 - Found
  • 304 - Not Modified

5xx

  • Server error
  • 500 - Internal Server Error
  • 503 - Service Unavailable

28 of 40

Visualizing

192.168.1.0 - 192.168.1.255

(192.168.1.0/24)

192.168.1.50

192.168.1.100

:80

HTTP

TCP Connection

29 of 40

Example Response

GET httpstat.us/200

curl -vv https://cis1912.org

30 of 40

cURL Demo

31 of 40

What’s a CORS?

​

Cross-origin resource sharing (CORS) is a mechanism for�integrating applications. CORS defines a way for client web applications that are loaded in one domain to interact with resources in a different domain.

https://aws.amazon.com/what-is/cross-origin-resource-sharing

32 of 40

Using HTTP

33 of 40

Limits of HTTP

What if we need long lasting connections?

34 of 40

Websocket vs HTTP

35 of 40

Websockets

  • Bidirectional, stateful protocol
  • Useful for real-time applications (e.g. chat, ohq)

36 of 40

Postman

Demo

37 of 40

38 of 40

HTTP Server Demo

39 of 40

Before we Fin

  • What’s Yarn?
  • Is a package manager for NodeJS
  • Frontend has dependencies, too!
  • yarn install

40 of 40

Fin

  • Lab 0: Web Servers is out and due before next class!
  • Make sure to lint your files!
  • Make sure to join Ed
  • Come to office hours!