feat: implement HTTP client program (#175)

Related to #121

This PR implements an HTTP request program. For now it's just a single
TCP packet, but we should come up with a better way to show this.

Author: MegaRedHand

src/graphics/renderables/program_info.ts

@@ -1,3 +1,5 @@
+import { DeviceId } from "../../types/graphs/datagraph";
+import { ViewGraph } from "../../types/graphs/viewgraph";
 import { createDropdown, Renderable } from "../right_bar";
 
 interface HasValue {
@@ -13,6 +15,10 @@ export class ProgramInfo implements Renderable {
     this.name = name;
   }
 
+  withDestinationDropdown(viewgraph: ViewGraph, srcId: DeviceId) {
+    this.withDropdown("Destination", otherDevices(viewgraph, srcId));
+  }
+
   withDropdown(name: string, options: { value: string; text: string }[]) {
     const dropdown = createDropdown(name, options);
     this.inputs.push(dropdown);
@@ -27,3 +33,10 @@ export class ProgramInfo implements Renderable {
     return this.inputs;
   }
 }
+
+function otherDevices(viewgraph: ViewGraph, srcId: DeviceId) {
+  return viewgraph
+    .getDeviceIds()
+    .filter((id) => id !== srcId)
+    .map((id) => ({ value: id.toString(), text: `Device ${id}` }));
+}

src/programs/echo_sender.ts

@@ -9,15 +9,6 @@ import { IPv4Packet } from "../packets/ip";
 import { NetworkDevice } from "../types/devices";
 import { EthernetFrame } from "../packets/ethernet";
 
-function adjacentDevices(viewgraph: ViewGraph, srcId: DeviceId) {
-  const adjacentDevices = viewgraph
-    .getDeviceIds()
-    .filter((id) => id !== srcId)
-    .map((id) => ({ value: id.toString(), text: `Device ${id}` }));
-
-  return adjacentDevices;
-}
-
 export class SingleEcho extends ProgramBase {
   static readonly PROGRAM_NAME = "Send ICMP echo";
 
@@ -50,9 +41,8 @@ export class SingleEcho extends ProgramBase {
       return;
     }
     if (
-      !(
-        srcDevice instanceof NetworkDevice && dstDevice instanceof NetworkDevice
-      )
+      !(srcDevice instanceof NetworkDevice) ||
+      !(dstDevice instanceof NetworkDevice)
     ) {
       console.log(
         "At least one device between source and destination is not a network device",
@@ -78,7 +68,7 @@ export class SingleEcho extends ProgramBase {
 
   static getProgramInfo(viewgraph: ViewGraph, srcId: DeviceId): ProgramInfo {
     const programInfo = new ProgramInfo(this.PROGRAM_NAME);
-    programInfo.withDropdown("Destination", adjacentDevices(viewgraph, srcId));
+    programInfo.withDestinationDropdown(viewgraph, srcId);
     return programInfo;
   }
 }
@@ -137,7 +127,7 @@ export class EchoServer extends ProgramBase {
     ];
 
     const programInfo = new ProgramInfo(this.PROGRAM_NAME);
-    programInfo.withDropdown("Destination", adjacentDevices(viewgraph, srcId));
+    programInfo.withDestinationDropdown(viewgraph, srcId);
     programInfo.withDropdown("Time between pings", delayOptions);
     return programInfo;
   }

src/programs/http_client.ts

@@ -0,0 +1,85 @@
+import { ProgramInfo } from "../graphics/renderables/device_info";
+import { EthernetFrame } from "../packets/ethernet";
+import { IPv4Packet } from "../packets/ip";
+import { Flags, TcpSegment } from "../packets/tcp";
+import { NetworkDevice } from "../types/devices";
+import { DeviceId } from "../types/graphs/datagraph";
+import { ViewGraph } from "../types/graphs/viewgraph";
+import { sendRawPacket } from "../types/packet";
+import { ProgramBase } from "./program_base";
+
+export class HttpClient extends ProgramBase {
+  static readonly PROGRAM_NAME = "Send HTTP request";
+
+  private dstId: DeviceId;
+
+  protected _parseInputs(inputs: string[]): void {
+    if (inputs.length !== 1) {
+      console.error(
+        "HttpClient requires 1 input. " + inputs.length + " were given.",
+      );
+      return;
+    }
+    this.dstId = parseInt(inputs[0]);
+  }
+
+  protected _run() {
+    this.sendHttpRequest();
+    this.signalStop();
+  }
+
+  protected _stop() {
+    // Nothing to do
+  }
+
+  private sendHttpRequest() {
+    const dstDevice = this.viewgraph.getDevice(this.dstId);
+    const srcDevice = this.viewgraph.getDevice(this.srcId);
+    if (!dstDevice) {
+      console.error("Destination device not found");
+      return;
+    }
+    if (
+      !(srcDevice instanceof NetworkDevice) ||
+      !(dstDevice instanceof NetworkDevice)
+    ) {
+      console.log(
+        "At least one device between source and destination is not a network device",
+      );
+      return;
+    }
+
+    // Encode dummy HTTP request
+    const httpRequest = "GET / HTTP/1.1\r\nHost: " + dstDevice.ip + "\r\n\r\n";
+    const content = new TextEncoder().encode(httpRequest);
+
+    // Random number between 1024 and 65535
+    const srcPort = Math.floor(Math.random() * (65535 - 1024) + 1024);
+    const flags = new Flags();
+
+    // Wrap in TCP segment
+    const payload = new TcpSegment(srcPort, 80, 0, 0, flags, content);
+
+    // Wrap in IP packet
+    const ipPacket = new IPv4Packet(srcDevice.ip, dstDevice.ip, payload);
+    const path = this.viewgraph.getPathBetween(this.srcId, this.dstId);
+    let dstMac = dstDevice.mac;
+    if (!path) return;
+    for (const id of path.slice(1)) {
+      const device = this.viewgraph.getDevice(id);
+      // if there’s a router in the middle, first send frame to router mac
+      if (device instanceof NetworkDevice) {
+        dstMac = device.mac;
+        break;
+      }
+    }
+    const ethernetFrame = new EthernetFrame(srcDevice.mac, dstMac, ipPacket);
+    sendRawPacket(this.viewgraph, this.srcId, ethernetFrame);
+  }
+
+  static getProgramInfo(viewgraph: ViewGraph, srcId: DeviceId): ProgramInfo {
+    const programInfo = new ProgramInfo(this.PROGRAM_NAME);
+    programInfo.withDestinationDropdown(viewgraph, srcId);
+    return programInfo;
+  }
+}

src/programs/index.ts

@@ -2,6 +2,7 @@ import { ProgramInfo } from "../graphics/renderables/program_info";
 import { DeviceId } from "../types/graphs/datagraph";
 import { ViewGraph } from "../types/graphs/viewgraph";
 import { EchoServer, SingleEcho } from "./echo_sender";
+import { HttpClient } from "./http_client";
 
 export type Pid = number;
 
@@ -63,7 +64,7 @@ type ProgramConstructor = new (
 // - Have a static readonly PROGRAM_NAME property
 // - Have a constructor with the signature (viewgraph, srcId, inputs)
 // - Have a getProgramInfo static method
-const programList = [SingleEcho, EchoServer];
+const programList = [SingleEcho, EchoServer, HttpClient];
 
 // Map of program name to program constructor
 const programMap = new Map<string, ProgramConstructor>(

src/types/packet.ts

@@ -20,6 +20,7 @@ const contextPerPacketType: Record<string, GraphicsContext> = {
   IP: circleGraphicsContext(Colors.Green, 0, 0, 5),
   "ICMP-8": circleGraphicsContext(Colors.Red, 0, 0, 5),
   "ICMP-0": circleGraphicsContext(Colors.Yellow, 0, 0, 5),
+  TCP: circleGraphicsContext(Colors.Hazel, 0, 0, 5), // for HTTP
 };
 
 const highlightedPacketContext = circleGraphicsContext(Colors.Violet, 0, 0, 6);

src/utils.ts

@@ -10,6 +10,7 @@ export enum Colors {
   White = 0xffffff,
   Black = 0x000000,
   Yellow = 0xffff00,
+  Hazel = 0xd99802,
 }
 
 export function circleGraphicsContext(