docs: add documentation for TCP and HTTP (#278)

Author: MegaRedHand

README.md

@@ -370,8 +370,44 @@ If you want to stop the program, you can press the Trash can icon on the program
 
 ### Send and Serve HTTP Requests
 
+_Web browsing_ consists on sending HTTP GET requests from your browser to multiple HTTP servers across the _world-wide-web_.
+These HTTP servers respond to these requests with the requested resource and a 200 OK response code, or with the error encountered.
+
+Being an application-level protocol, HTTP messages are sent through transport-level protocols.
+While newer versions use QUIC and UDP, GEduNet follows older versions, which use TCP.
+This includes all of TCP's features: retransmission of lost segments, round-trip time estimation, and flow and congestion control.
+
+In our simulator, these messages can be generated by starting an HTTP server on one device and an HTTP client on another.
+This results in a two-way flow of packets containing data from both TCP and HTTP protocols, simulating the request and response workflow.
+
+#### Tutorial
+
+To start a server:
+
+1. Select the "Serve HTTP requests" program from the dropdown menu.
+2. Press the "Start Program" button to start the server.
+
+To send a request to a server:
+
+1. Select the "Send HTTP request" program from the dropdown menu.
+2. Select the destination Host to send the request to.
+3. Choose the size of the requested resource. The bigger the resource, the more packets will be sent. The options are 1 KB, 256 KB, and 1 MB.
+4. Press the "Start Program" button to start the client.
+
+The packets will travel through the network following the current routing scheme and TCP protocol.
+The first few packets will be considered plain TCP packets, and consist of the initial three-way handshake.
+
+After a connection is established, the client will send the HTTP request.
+Once the server receives the HTTP request, it will start streaming the requested resource to the client.
+
+If you want to stop the program, you can press the Trash can icon on the program table of the host.
+
+<!-- TODO: add GIF -->
+
 ### ARP Request
 
+<!-- TODO: add section -->
+
 ## Packets
 
 Packets are the data units that travel through the network. They are used to send and receive data between devices. In the simulator, packets are represented as colored circles that travel through the edges of the network.
@@ -407,8 +443,77 @@ The information shown in the right bar when selecting a packet is as follows:
 
 ### HTTP Packet
 
+HTTP packets contain messages from the HyperText Transfer Protocol.
+They are primarily used for sending and requesting data resources.
+
+In the simulator, HTTP packets show different information depending on the current layer.
+
+#### Visibility
+
+HTTP packets are visible on all layers.
+
+On the App Layer, they show the contents of the HTTP message.
+
+<!-- TODO: add GIF -->
+
+On the Transport Layer, they will show information of the TCP segment that wraps the application content:
+
+- **Seq Number**: sequence number of the TCP segment. These start at 0 and grow with each byte sent through the connection.
+- **Ack Number**: acknowledgment number of the TCP segment. These start at 0 and grow with each byte received through the connection.
+- **Window Size**: the size of the receive window for the sender of the segment. These are fixed at 65535.
+- **TCP Flags**: TCP control flags. The purpose of each of these can be found by hovering them.
+- **Payload**: This is the data that is being sent in the segment, represented as a list of bytes.
+
+On the Network Layer, they show information of the IPv4 packet:
+
+- **IP Version**: The version of the IP protocol used. For now, only IPv4 is supported.
+- **Internet Header Length**: The length of the IP header in 32-bit words.
+- **Type of Service**: The type of service field in the IP header. This field is used to specify the quality of service for the packet.
+- **Total Length**: The total length of the packet in bytes. This includes the IP header and the data.
+- **Identification**: A unique identifier for the packet. This is used to identify the packet in case it is fragmented.
+- **Fragmentation Offset**: The offset of the packet in case it is fragmented. This is used to reassemble the packet at the destination.
+- **Time to Live**: The time to live field in the IP header. This field is used to specify the maximum number of hops that the packet can take before it is discarded.
+- **Protocol**: The protocol used in the packet. For ICMP-8 packets, this is always 1.
+- **Header Checksum**: The checksum of the IP header. This is used to verify the integrity of the packet.
+
+On the Link Layer, they only show the EtherType field. This field is used to specify the protocol used in the packet. For IPv4 packets, this is 2048 (0x0800) in general.
+
 ### TCP Packet
 
+TCP packets contain control information for the Transmission Control Protocol.
+They are used for starting connections via a three-way handshake, terminating it, or for acknowledging the receipt of information.
+When including an application-level payload, they are shown as packets of the given application-level protocol instead.
+
+In the simulator, TCP packets show different information depending on the current layer.
+
+#### Visibility
+
+TCP packets are not visible on the App Layer.
+
+On the Transport Layer, they will show information of the TCP segment that wraps the application content:
+
+- **Seq Number**: sequence number of the TCP segment. These start at 0 and grow with each byte sent through the connection.
+- **Ack Number**: acknowledgment number of the TCP segment. These start at 0 and grow with each byte received through the connection.
+- **Window Size**: the size of the receive window for the sender of the segment. These are fixed at 65535.
+- **TCP Flags**: TCP control flags. The purpose of each of these can be found by hovering them.
+- **Payload**: This is the data that is being sent in the segment, represented as a list of bytes.
+
+<!-- TODO: add GIF -->
+
+On the Network Layer, they show information of the IPv4 packet:
+
+- **IP Version**: The version of the IP protocol used. For now, only IPv4 is supported.
+- **Internet Header Length**: The length of the IP header in 32-bit words.
+- **Type of Service**: The type of service field in the IP header. This field is used to specify the quality of service for the packet.
+- **Total Length**: The total length of the packet in bytes. This includes the IP header and the data.
+- **Identification**: A unique identifier for the packet. This is used to identify the packet in case it is fragmented.
+- **Fragmentation Offset**: The offset of the packet in case it is fragmented. This is used to reassemble the packet at the destination.
+- **Time to Live**: The time to live field in the IP header. This field is used to specify the maximum number of hops that the packet can take before it is discarded.
+- **Protocol**: The protocol used in the packet. For ICMP-8 packets, this is always 1.
+- **Header Checksum**: The checksum of the IP header. This is used to verify the integrity of the packet.
+
+On the Link Layer, they only show the EtherType field. This field is used to specify the protocol used in the packet. For IPv4 packets, this is 2048 (0x0800) in general.
+
 ### ICMP-8 Packet
 
 ICMP-8 packets, also known as ICMP Echo Request packets, are a type of message used by the Internet Control Message Protocol (ICMP). They are primarily used for diagnostic and network testing purposes, most notably by the ping command.

src/packets/tcp.ts

@@ -254,7 +254,7 @@ export class TcpSegment implements IpPayload {
         Payload: this.data,
       };
     } else if (layer == Layer.App) {
-      return { Request: new TextDecoder("utf-8").decode(this.data) };
+      return { Message: new TextDecoder("utf-8").decode(this.data) };
     }
   }