From 66a81dfb9c8b4739bf2736789484f38ba0cf753c Mon Sep 17 00:00:00 2001 From: Manuel Date: Fri, 24 Jan 2025 10:48:00 -0300 Subject: [PATCH 1/5] feat: echo-reply sent when receiving an echo-request. Issues: - "Send ICMP Echo" program changed to "Send ping". - refactor on packet ought to be done. - Running "Echo-server" program releases too many echo-replies. --- src/types/devices/device.ts | 16 +++++++++ src/types/devices/host.ts | 8 ++--- src/types/devices/router.ts | 1 + src/types/packet.ts | 45 +++++++++++++++++++------- src/types/undo-redo/undoRedoManager.ts | 6 ++-- 5 files changed, 56 insertions(+), 20 deletions(-) diff --git a/src/types/devices/device.ts b/src/types/devices/device.ts index 9fb6216..59bcf1f 100644 --- a/src/types/devices/device.ts +++ b/src/types/devices/device.ts @@ -21,6 +21,7 @@ import { IpAddress } from "../../packets/ip"; import { DeviceId } from "../graphs/datagraph"; import { DragDeviceMove, AddEdgeMove } from "../undo-redo"; import { Layer } from "./layer"; +import { Packet, sendPacket } from "../packet"; export { Layer } from "./layer"; @@ -116,6 +117,21 @@ export abstract class Device extends Sprite { sprite.height = sprite.height / DEVICE_SIZE; } + receivePacket(packet: Packet): void { + switch (packet.type) { + case "ICMP-0": + const destinationDevice = this.viewgraph.getDevices().find((device) => { + return device.ip == packet.rawPacket.sourceAddress; + }); + if (destinationDevice) { + sendPacket(this.viewgraph, "ICMP-8", this.id, destinationDevice.id); + } + break; + default: + console.warn("Packet’s type unrecognized"); + } + } + delete(): void { this.viewgraph.removeDevice(this.id); // Clear connections diff --git a/src/types/devices/host.ts b/src/types/devices/host.ts index f566454..8dc0e2d 100644 --- a/src/types/devices/host.ts +++ b/src/types/devices/host.ts @@ -5,7 +5,7 @@ import { Position } from "../common"; import { IpAddress } from "../../packets/ip"; import { createDropdown, DeviceInfo, RightBar } from "../../graphics/right_bar"; import { ProgramInfo } from "../../graphics/renderables/device_info"; -import { sendPacket } from "../packet"; +import { Packet, sendPacket } from "../packet"; import { Ticker } from "pixi.js"; import { DeviceId } from "../graphs/datagraph"; import { Layer } from "./layer"; @@ -56,7 +56,7 @@ export class Host extends Device { const programList: ProgramInfo[] = [ { name: "No program", start: () => this.stopProgram() }, { - name: "Send ICMP echo", + name: "Send ping", inputs: [dropdownContainer], start: () => this.sendSingleEcho(destination.value), }, @@ -72,7 +72,7 @@ export class Host extends Device { sendSingleEcho(id: string) { this.stopProgram(); const dst = parseInt(id); - sendPacket(this.viewgraph, "ICMP", this.id, dst); + sendPacket(this.viewgraph, "ICMP-0", this.id, dst); } startEchoServer(id: string) { @@ -85,7 +85,7 @@ export class Host extends Device { if (progress < delay) { return; } - sendPacket(this.viewgraph, "ICMP", this.id, dst); + sendPacket(this.viewgraph, "ICMP-0", this.id, dst); progress -= delay; }; Ticker.shared.add(send, this); diff --git a/src/types/devices/router.ts b/src/types/devices/router.ts index b5f6cb9..5c552fe 100644 --- a/src/types/devices/router.ts +++ b/src/types/devices/router.ts @@ -5,6 +5,7 @@ import { Position } from "../common"; import { DeviceInfo, RightBar } from "../../graphics/right_bar"; import { IpAddress } from "../../packets/ip"; import { DeviceId } from "../graphs/datagraph"; +import { Packet } from "../packet"; export class Router extends Device { constructor( diff --git a/src/types/packet.ts b/src/types/packet.ts index da23f67..fcdcc28 100644 --- a/src/types/packet.ts +++ b/src/types/packet.ts @@ -13,10 +13,12 @@ import { ViewGraph } from "./graphs/viewgraph"; import { EmptyPayload, IpAddress, IPv4Packet } from "../packets/ip"; import { EchoRequest, EchoReply } from "../packets/icmp"; import { DeviceId, isRouter } from "./graphs/datagraph"; +import { Device } from "./devices"; const contextPerPacketType: Record = { IP: circleGraphicsContext(Colors.Green, 0, 0, 5), - ICMP: circleGraphicsContext(Colors.Red, 0, 0, 5), + "ICMP-0": circleGraphicsContext(Colors.Red, 0, 0, 5), + "ICMP-8": circleGraphicsContext(Colors.Yellow, 0, 0, 5), }; const highlightedPacketContext = circleGraphicsContext(Colors.Violet, 0, 0, 6); @@ -29,6 +31,7 @@ export class Packet extends Graphics { currentStart: number; color: number; type: string; + destinationDevice: Device = null; rawPacket: IPv4Packet; @@ -166,6 +169,7 @@ export class Packet extends Graphics { this.currentEdge.addChild(this); this.updatePosition(); Ticker.shared.add(this.animationTick, this); + console.log("Termino traverseEdge"); } routePacket(id: DeviceId): DeviceId | null { @@ -177,7 +181,7 @@ export class Packet extends Graphics { console.log("considering entry:", entry); return this.rawPacket.destinationAddress.isInSubnet(ip, mask); }); - console.log("result:", result); + // console.log("result:", result); return result === undefined ? null : result.iface; } return null; @@ -185,27 +189,40 @@ export class Packet extends Graphics { animationTick(ticker: Ticker) { if (this.progress >= 1) { - this.progress = 0; - this.removeFromParent(); - const newStart = this.currentEdge.otherEnd(this.currentStart); - this.currentStart = newStart; - const newEdgeId = this.routePacket(newStart); - const deleteSelf = () => { this.destroy(); ticker.remove(this.animationTick, this); if (isSelected(this)) { deselectElement(); } + console.log("Se corto animationTick"); }; - if (newEdgeId === null) { + if (this.destinationDevice) { + this.destinationDevice.receivePacket(this); + deleteSelf(); + return; + } + + this.progress = 0; + this.removeFromParent(); + const newStart = this.currentEdge.otherEnd(this.currentStart); + this.currentStart = newStart; + const newEndId = this.routePacket(newStart); + + if (newEndId === null) { deleteSelf(); return; } + + const newEndDevice = this.viewgraph.getDevice(newEndId); + + if (this.rawPacket.destinationAddress == newEndDevice.ip) { + this.destinationDevice = newEndDevice; + } const currentNodeEdges = this.viewgraph.getConnections(newStart); this.currentEdge = currentNodeEdges.find((edge) => { - return edge.otherEnd(newStart) === newEdgeId; + return edge.otherEnd(newStart) === newEndId; }); if (this.currentEdge === undefined) { deleteSelf(); @@ -278,11 +295,14 @@ export function sendPacket( case "IP": payload = new EmptyPayload(); break; - case "ICMP": + case "ICMP-0": payload = new EchoRequest(0); break; + case "ICMP-8": + payload = new EchoReply(0); + break; default: - console.warn("Tipo de paquete no reconocido"); + console.warn("Packet’s type unrecognized"); return; } const dstIp = destinationDevice.ip; @@ -309,4 +329,5 @@ export function sendPacket( return; } packet.traverseEdge(firstEdge, originId); + console.log("Termino sendPacket"); } diff --git a/src/types/undo-redo/undoRedoManager.ts b/src/types/undo-redo/undoRedoManager.ts index bc09596..0b5d6fc 100644 --- a/src/types/undo-redo/undoRedoManager.ts +++ b/src/types/undo-redo/undoRedoManager.ts @@ -21,9 +21,8 @@ export class UndoRedoManager { undo(viewgraph: ViewGraph) { if (this.undoBuf.length != 0) { const move = this.undoBuf.pop(); - // revertir el movimiento con move move.undo(viewgraph); - this.redoBuf.push(move); // tal vez hay que guardar otra cosa + this.redoBuf.push(move); } this.notifyListeners(); console.log(this.redoBuf); @@ -33,9 +32,8 @@ export class UndoRedoManager { redo(viewgraph: ViewGraph) { if (this.redoBuf.length != 0) { const move = this.redoBuf.pop(); - // rehacer el movimineto con move move.redo(viewgraph); - this.undoBuf.push(move); // tal vez hay que guardar otra cosa + this.undoBuf.push(move); } this.notifyListeners(); console.log(this.redoBuf); From cacc261acf3d772ec0b6594cf7a4ecd0559b9d4d Mon Sep 17 00:00:00 2001 From: Manuel Date: Sat, 25 Jan 2025 20:45:37 -0300 Subject: [PATCH 2/5] refactor: sendPacket() receives the packet --- src/packets/icmp.ts | 12 ++++++---- src/packets/ip.ts | 5 +++++ src/types/devices/device.ts | 23 +++++++++++++++----- src/types/devices/host.ts | 41 +++++++++++++++++++++++------------ src/types/graphs/viewgraph.ts | 7 ++++++ src/types/packet.ts | 31 ++++++-------------------- 6 files changed, 72 insertions(+), 47 deletions(-) diff --git a/src/packets/icmp.ts b/src/packets/icmp.ts index 59620ab..20f6416 100644 --- a/src/packets/icmp.ts +++ b/src/packets/icmp.ts @@ -45,6 +45,10 @@ abstract class IcmpPacket implements IpPayload { } protected abstract _dataToBytes(): Uint8Array; + + getPacketType(): string { + return `ICMP-${this.type}`; + } } class EchoMessage extends IcmpPacket { @@ -79,10 +83,10 @@ class EchoMessage extends IcmpPacket { } } -export class EchoReply extends EchoMessage { - type = 0; -} - export class EchoRequest extends EchoMessage { type = 8; } + +export class EchoReply extends EchoMessage { + type = 0; +} diff --git a/src/packets/ip.ts b/src/packets/ip.ts index 51932dc..d91568a 100644 --- a/src/packets/ip.ts +++ b/src/packets/ip.ts @@ -13,6 +13,9 @@ export class EmptyPayload implements IpPayload { // This number is reserved for experimental protocols return 0xfd; } + getPacketType(): string { + return "EMPTY-PROTOCOL"; + } } /// Internet Protocol (IP) address @@ -114,6 +117,8 @@ export interface IpPayload { toBytes(): Uint8Array; // The number of the protocol protocol(): number; + // Packet protocol name + getPacketType(): string; } // Info taken from the original RFC: https://datatracker.ietf.org/doc/html/rfc791#section-3.1 diff --git a/src/types/devices/device.ts b/src/types/devices/device.ts index 59bcf1f..305209b 100644 --- a/src/types/devices/device.ts +++ b/src/types/devices/device.ts @@ -17,11 +17,12 @@ import { RightBar } from "../../graphics/right_bar"; import { Colors, ZIndexLevels } from "../../utils"; import { Position } from "../common"; import { DeviceInfo } from "../../graphics/renderables/device_info"; -import { IpAddress } from "../../packets/ip"; +import { IpAddress, IPv4Packet } from "../../packets/ip"; import { DeviceId } from "../graphs/datagraph"; import { DragDeviceMove, AddEdgeMove } from "../undo-redo"; import { Layer } from "./layer"; import { Packet, sendPacket } from "../packet"; +import { EchoReply } from "../../packets/icmp"; export { Layer } from "./layer"; @@ -120,11 +121,23 @@ export abstract class Device extends Sprite { receivePacket(packet: Packet): void { switch (packet.type) { case "ICMP-0": - const destinationDevice = this.viewgraph.getDevices().find((device) => { - return device.ip == packet.rawPacket.sourceAddress; - }); + const destinationDevice = this.viewgraph.getDeviceByIP( + packet.rawPacket.sourceAddress, + ); if (destinationDevice) { - sendPacket(this.viewgraph, "ICMP-8", this.id, destinationDevice.id); + const echoReply = new EchoReply(0); + const ipPacket = new IPv4Packet( + this.ip, + destinationDevice.ip, + echoReply, + ); + sendPacket( + this.viewgraph, + ipPacket, + "ICMP-8", + this.id, + destinationDevice.id, + ); } break; default: diff --git a/src/types/devices/host.ts b/src/types/devices/host.ts index 8dc0e2d..e2197f6 100644 --- a/src/types/devices/host.ts +++ b/src/types/devices/host.ts @@ -2,13 +2,14 @@ import { Device, DeviceType } from "./device"; import { ViewGraph } from "../graphs/viewgraph"; import PcImage from "../../assets/pc.svg"; import { Position } from "../common"; -import { IpAddress } from "../../packets/ip"; +import { IpAddress, IPv4Packet } from "../../packets/ip"; import { createDropdown, DeviceInfo, RightBar } from "../../graphics/right_bar"; import { ProgramInfo } from "../../graphics/renderables/device_info"; import { Packet, sendPacket } from "../packet"; import { Ticker } from "pixi.js"; import { DeviceId } from "../graphs/datagraph"; import { Layer } from "./layer"; +import { EchoRequest } from "../../packets/icmp"; const DEFAULT_ECHO_DELAY = 250; // ms @@ -72,24 +73,36 @@ export class Host extends Device { sendSingleEcho(id: string) { this.stopProgram(); const dst = parseInt(id); - sendPacket(this.viewgraph, "ICMP-0", this.id, dst); + const dstDevice = this.viewgraph.getDevice(dst); + if (dstDevice) { + const echoRequest = new EchoRequest(0); + const ipPacket = new IPv4Packet(this.ip, dstDevice.ip, echoRequest); + sendPacket(this.viewgraph, ipPacket, "ICMP-0", this.id, dst); + } } + // TODO: Receive ip address instead of id? startEchoServer(id: string) { this.stopProgram(); const dst = parseInt(id); - let progress = 0; - const send = (ticker: Ticker) => { - const delay = DEFAULT_ECHO_DELAY; - progress += ticker.deltaMS; - if (progress < delay) { - return; - } - sendPacket(this.viewgraph, "ICMP-0", this.id, dst); - progress -= delay; - }; - Ticker.shared.add(send, this); - this.currentProgram = send; + const dstDevice = this.viewgraph.getDevice(dst); + // If ip address received instead of id, device may not exist. + if (dstDevice) { + let progress = 0; + const echoRequest = new EchoRequest(0); + const ipPacket = new IPv4Packet(this.ip, dstDevice.ip, echoRequest); + const send = (ticker: Ticker) => { + const delay = DEFAULT_ECHO_DELAY; + progress += ticker.deltaMS; + if (progress < delay) { + return; + } + sendPacket(this.viewgraph, ipPacket, "ICMP-0", this.id, dst); + progress -= delay; + }; + Ticker.shared.add(send, this); + this.currentProgram = send; + } } stopProgram() { diff --git a/src/types/graphs/viewgraph.ts b/src/types/graphs/viewgraph.ts index 7aa9963..f96b37c 100644 --- a/src/types/graphs/viewgraph.ts +++ b/src/types/graphs/viewgraph.ts @@ -5,6 +5,7 @@ import { Viewport } from "../../graphics/viewport"; import { Layer, layerIncluded } from "../devices/layer"; import { CreateDevice, createDevice } from "../devices/utils"; import { layerFromType } from "../devices/device"; +import { IpAddress } from "../../packets/ip"; export type EdgeId = string; @@ -290,6 +291,12 @@ export class ViewGraph { return this.datagraph; } + getDeviceByIP(ipAddress: IpAddress) { + return this.getDevices().find((device) => { + return device.ip == ipAddress; + }); + } + /// Returns the IDs of the edges connecting the two devices getPathBetween(idA: DeviceId, idB: DeviceId): EdgeId[] { if (idA === idB) { diff --git a/src/types/packet.ts b/src/types/packet.ts index fcdcc28..219ce87 100644 --- a/src/types/packet.ts +++ b/src/types/packet.ts @@ -31,7 +31,7 @@ export class Packet extends Graphics { currentStart: number; color: number; type: string; - destinationDevice: Device = null; + destinationDevice: Device = null; // Cambiarlo rawPacket: IPv4Packet; @@ -275,38 +275,21 @@ export class Packet extends Graphics { } } -// TODO: maybe make this receive the packet directly? +// TODO: Remove? +// - packetType; manage in a more effective way the packet’s type so it can handle it without the paremeter. +// - originId and destinationId; logic regarding this two parameters ought to be manage with ip addresses, +// or else, by obtaining both ids inside the function. export function sendPacket( viewgraph: ViewGraph, + rawPacket: IPv4Packet, packetType: string, originId: DeviceId, destinationId: DeviceId, ) { console.log( - `Sending ${packetType} packet from ${originId} to ${destinationId}`, + `Sending ${packetType} packet from ${rawPacket.sourceAddress} to ${rawPacket.destinationAddress}`, ); - const originDevice = viewgraph.getDevice(originId); - const destinationDevice = viewgraph.getDevice(destinationId); - - // TODO: allow user to choose which payload to send - let payload; - switch (packetType) { - case "IP": - payload = new EmptyPayload(); - break; - case "ICMP-0": - payload = new EchoRequest(0); - break; - case "ICMP-8": - payload = new EchoReply(0); - break; - default: - console.warn("Packet’s type unrecognized"); - return; - } - const dstIp = destinationDevice.ip; - const rawPacket = new IPv4Packet(originDevice.ip, dstIp, payload); const packet = new Packet(viewgraph, packetType, rawPacket); const originConnections = viewgraph.getConnections(originId); From aa89f54ddd8d628f9097f9d0e85fb92ac75d3bff Mon Sep 17 00:00:00 2001 From: Manuel Date: Tue, 28 Jan 2025 18:42:33 -0300 Subject: [PATCH 3/5] refactor: Main changes: - The raw packet is received by sendPacke. - The reception and handling of a packet logic is in Device. Known bugs/issues: - When receiving a packet from a removed device, the current device does not send the reply back. It might be better if it send back the reply and let the packet "get lost" in the middle. --- src/packets/tcp.ts | 4 +++ src/types/devices/device.ts | 13 ++++++-- src/types/devices/host.ts | 23 ++++++++++++-- src/types/devices/router.ts | 25 +++++++++++++++- src/types/packet.ts | 60 +++++++++++++------------------------ 5 files changed, 80 insertions(+), 45 deletions(-) diff --git a/src/packets/tcp.ts b/src/packets/tcp.ts index cb6b9a5..d6a90bc 100644 --- a/src/packets/tcp.ts +++ b/src/packets/tcp.ts @@ -161,6 +161,10 @@ export class TcpSegment implements IpPayload { this.data = data; } + getPacketType(): string { + return "TCP"; + } + computeChecksum(): number { const segmentBytes = this.toBytes({ withChecksum: false }); diff --git a/src/types/devices/device.ts b/src/types/devices/device.ts index 5043205..31970d8 100644 --- a/src/types/devices/device.ts +++ b/src/types/devices/device.ts @@ -57,6 +57,12 @@ export abstract class Device extends Sprite { ip: IpAddress; ipMask: IpAddress; + // Each type of device has different ways of handling a received packet. + // Returns the DevicedId for the next device to send the packet to, or + // null if there’s no next device to send the packet. + // TODO: Might be general for all device in the future. + abstract receivePacket(packet: Packet): DeviceId | null; + constructor( id: DeviceId, svg: string, @@ -125,9 +131,10 @@ export abstract class Device extends Sprite { sprite.height = sprite.height / DEVICE_SIZE; } - receivePacket(packet: Packet): void { + // TODO: Most probably it will be different for each type of device + handlePacket(packet: Packet) { switch (packet.type) { - case "ICMP-0": + case "ICMP-8": const destinationDevice = this.viewgraph.getDeviceByIP( packet.rawPacket.sourceAddress, ); @@ -141,7 +148,7 @@ export abstract class Device extends Sprite { sendPacket( this.viewgraph, ipPacket, - "ICMP-8", + echoReply.getPacketType(), this.id, destinationDevice.id, ); diff --git a/src/types/devices/host.ts b/src/types/devices/host.ts index d4f0e77..238e9ba 100644 --- a/src/types/devices/host.ts +++ b/src/types/devices/host.ts @@ -49,6 +49,13 @@ export class Host extends Device { return DeviceType.Host; } + receivePacket(packet: Packet): DeviceId | null { + if (this.ip.equals(packet.rawPacket.destinationAddress)) { + this.handlePacket(packet); + } + return null; + } + getProgramList() { const adjacentDevices = this.viewgraph .getDeviceIds() @@ -109,7 +116,13 @@ export class Host extends Device { if (dstDevice) { const echoRequest = new EchoRequest(0); const ipPacket = new IPv4Packet(this.ip, dstDevice.ip, echoRequest); - sendPacket(this.viewgraph, ipPacket, "ICMP-0", this.id, dst); + sendPacket( + this.viewgraph, + ipPacket, + echoRequest.getPacketType(), + this.id, + dst, + ); } } @@ -133,7 +146,13 @@ export class Host extends Device { if (progress < delay) { return; } - sendPacket(this.viewgraph, ipPacket, "ICMP-0", this.id, dst); + sendPacket( + this.viewgraph, + ipPacket, + echoRequest.getPacketType(), + this.id, + dst, + ); progress -= delay; }; this.startProgram(send); diff --git a/src/types/devices/router.ts b/src/types/devices/router.ts index 5c552fe..5bb0893 100644 --- a/src/types/devices/router.ts +++ b/src/types/devices/router.ts @@ -4,7 +4,7 @@ import RouterImage from "../../assets/router.svg"; import { Position } from "../common"; import { DeviceInfo, RightBar } from "../../graphics/right_bar"; import { IpAddress } from "../../packets/ip"; -import { DeviceId } from "../graphs/datagraph"; +import { DeviceId, isRouter } from "../graphs/datagraph"; import { Packet } from "../packet"; export class Router extends Device { @@ -33,4 +33,27 @@ export class Router extends Device { getType(): DeviceType { return DeviceType.Router; } + + routePacket(packet: Packet): DeviceId | null { + const device = this.viewgraph.getDataGraph().getDevice(this.id); + if (!device || !isRouter(device)) { + return null; + } + const result = device.routingTable.find((entry) => { + const ip = IpAddress.parse(entry.ip); + const mask = IpAddress.parse(entry.mask); + console.log("considering entry:", entry); + return packet.rawPacket.destinationAddress.isInSubnet(ip, mask); + }); + console.log("result:", result); + return result === undefined ? null : result.iface; + } + + receivePacket(packet: Packet): DeviceId | null { + if (this.ip.equals(packet.rawPacket.destinationAddress)) { + this.handlePacket(packet); + return null; + } + return this.routePacket(packet); + } } diff --git a/src/types/packet.ts b/src/types/packet.ts index 6b53c7a..ac286b6 100644 --- a/src/types/packet.ts +++ b/src/types/packet.ts @@ -10,15 +10,15 @@ import { circleGraphicsContext, Colors, ZIndexLevels } from "../utils"; import { RightBar, StyledInfo } from "../graphics/right_bar"; import { Position } from "./common"; import { ViewGraph } from "./graphs/viewgraph"; -import { EmptyPayload, IpAddress, IPv4Packet } from "../packets/ip"; +import { IpAddress, IPv4Packet } from "../packets/ip"; import { EchoRequest, EchoReply } from "../packets/icmp"; import { DeviceId, isRouter } from "./graphs/datagraph"; import { Device } from "./devices"; const contextPerPacketType: Record = { IP: circleGraphicsContext(Colors.Green, 0, 0, 5), - "ICMP-0": circleGraphicsContext(Colors.Red, 0, 0, 5), - "ICMP-8": circleGraphicsContext(Colors.Yellow, 0, 0, 5), + "ICMP-8": circleGraphicsContext(Colors.Red, 0, 0, 5), + "ICMP-0": circleGraphicsContext(Colors.Yellow, 0, 0, 5), }; const highlightedPacketContext = circleGraphicsContext(Colors.Violet, 0, 0, 6); @@ -172,21 +172,6 @@ export class Packet extends Graphics { console.log("Termino traverseEdge"); } - routePacket(id: DeviceId): DeviceId | null { - const device = this.viewgraph.getDataGraph().getDevice(id); - if (!device || !isRouter(device)) { - return null; - } - const result = device.routingTable.find((entry) => { - const ip = IpAddress.parse(entry.ip); - const mask = IpAddress.parse(entry.mask); - console.log("considering entry:", entry); - return this.rawPacket.destinationAddress.isInSubnet(ip, mask); - }); - console.log("result:", result); - return result === undefined ? null : result.iface; - } - animationTick(ticker: Ticker) { if (this.progress >= 1) { const deleteSelf = () => { @@ -198,32 +183,30 @@ export class Packet extends Graphics { console.log("Se corto animationTick"); }; - if (this.destinationDevice) { - this.destinationDevice.receivePacket(this); + this.progress = 0; + this.removeFromParent(); + const newStart = this.currentEdge.otherEnd(this.currentStart); + const newStartDevice = this.viewgraph.getDevice(newStart); + + // Viewgraph may return undefined when trying to get the device + // as the device may have been removed by the user. + if (!newStartDevice) { deleteSelf(); return; } - this.progress = 0; - this.removeFromParent(); - const newStart = this.currentEdge.otherEnd(this.currentStart); this.currentStart = newStart; - const newEndId = this.routePacket(newStart); + const newEndId = newStartDevice.receivePacket(this); if (newEndId === null) { deleteSelf(); return; } - const newEndDevice = this.viewgraph.getDevice(newEndId); + this.currentEdge = this.viewgraph.getEdge( + Edge.generateConnectionKey({ n1: this.currentStart, n2: newEndId }), + ); - if (this.rawPacket.destinationAddress == newEndDevice.ip) { - this.destinationDevice = newEndDevice; - } - const currentNodeEdges = this.viewgraph.getConnections(newStart); - this.currentEdge = currentNodeEdges.find((edge) => { - return edge.otherEnd(newStart) === newEndId; - }); if (this.currentEdge === undefined) { deleteSelf(); return; @@ -238,11 +221,10 @@ export class Packet extends Graphics { } updatePosition() { - const current = this.currentEdge; - const start = this.currentStart; - - const startPos = current.nodePosition(start); - const endPos = current.nodePosition(current.otherEnd(start)); + const startPos = this.currentEdge.nodePosition(this.currentStart); + const endPos = this.currentEdge.nodePosition( + this.currentEdge.otherEnd(this.currentStart), + ); this.setPositionAlongEdge(startPos, endPos, this.progress); } @@ -305,14 +287,14 @@ export function sendPacket( let firstEdge = originConnections.find((edge) => { return edge.otherEnd(originId) === destinationId; }); - if (firstEdge === undefined) { + if (!firstEdge) { firstEdge = originConnections.find((edge) => { return isRouter( viewgraph.getDataGraph().getDevice(edge.otherEnd(originId)), ); }); } - if (firstEdge === undefined) { + if (!firstEdge) { console.warn( "El dispositivo de origen no está conectado al destino o a un router.", ); From c41f52a0ff812e32c40089361e97635d28d6243b Mon Sep 17 00:00:00 2001 From: Manuel Date: Tue, 28 Jan 2025 18:46:33 -0300 Subject: [PATCH 4/5] tidy up code --- src/types/devices/device.ts | 3 ++- src/types/packet.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/types/devices/device.ts b/src/types/devices/device.ts index 31970d8..76f4fcc 100644 --- a/src/types/devices/device.ts +++ b/src/types/devices/device.ts @@ -134,7 +134,7 @@ export abstract class Device extends Sprite { // TODO: Most probably it will be different for each type of device handlePacket(packet: Packet) { switch (packet.type) { - case "ICMP-8": + case "ICMP-8": { const destinationDevice = this.viewgraph.getDeviceByIP( packet.rawPacket.sourceAddress, ); @@ -154,6 +154,7 @@ export abstract class Device extends Sprite { ); } break; + } default: console.warn("Packet’s type unrecognized"); } diff --git a/src/types/packet.ts b/src/types/packet.ts index ac286b6..0cc57ea 100644 --- a/src/types/packet.ts +++ b/src/types/packet.ts @@ -10,7 +10,7 @@ import { circleGraphicsContext, Colors, ZIndexLevels } from "../utils"; import { RightBar, StyledInfo } from "../graphics/right_bar"; import { Position } from "./common"; import { ViewGraph } from "./graphs/viewgraph"; -import { IpAddress, IPv4Packet } from "../packets/ip"; +import { IPv4Packet } from "../packets/ip"; import { EchoRequest, EchoReply } from "../packets/icmp"; import { DeviceId, isRouter } from "./graphs/datagraph"; import { Device } from "./devices"; From bc57347bc4d0898b58eba9b959916762325d5315 Mon Sep 17 00:00:00 2001 From: Manuel Pol <90402724+Manuel-Pol@users.noreply.github.com> Date: Sat, 1 Feb 2025 23:11:41 -0300 Subject: [PATCH 5/5] Update packet.ts --- src/types/packet.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/types/packet.ts b/src/types/packet.ts index a24a29d..a71f86a 100644 --- a/src/types/packet.ts +++ b/src/types/packet.ts @@ -13,7 +13,6 @@ import { ViewGraph } from "./graphs/viewgraph"; import { IPv4Packet } from "../packets/ip"; import { EchoRequest, EchoReply } from "../packets/icmp"; import { DeviceId, isRouter } from "./graphs/datagraph"; -import { Device } from "./devices"; const contextPerPacketType: Record = { IP: circleGraphicsContext(Colors.Green, 0, 0, 5),