Improving Node Discovery via DHT Announcements - fixes #152

examples/canvas/src/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

examples/canvas/src/index.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_1 = require("@topology-foundation/node");
+const canvas_1 = require("./objects/canvas");
+const node = new node_1.TopologyNode();
+let topologyObject;
+let canvasCRO;
+let peers = [];
+let discoveryPeers = [];
+let objectPeers = [];
+const render = () => {
+    const peers_element = document.getElementById("peers");
+    peers_element.innerHTML = `[${peers.join(", ")}]`;
+    const discovery_element = (document.getElementById("discovery_peers"));
+    discovery_element.innerHTML = `[${discoveryPeers.join(", ")}]`;
+    const object_element = (document.getElementById("object_peers"));
+    object_element.innerHTML = `[${objectPeers.join(", ")}]`;
+    document.getElementById("canvasId").innerText =
+        topologyObject?.id;
+    if (!canvasCRO)
+        return;
+    const canvas = canvasCRO.canvas;
+    for (let x = 0; x < canvas.length; x++) {
+        for (let y = 0; y < canvas[x].length; y++) {
+            const pixel = document.getElementById(`${x}-${y}`);
+            if (!pixel)
+                continue;
+            pixel.style.backgroundColor = `rgb(${canvas[x][y].color()[0]}, ${canvas[x][y].color()[1]}, ${canvas[x][y].color()[2]})`;
+        }
+    }
+};
+const random_int = (max) => Math.floor(Math.random() * max);
+function paint_pixel(pixel) {
+    const [x, y] = pixel.id.split("-").map((v) => Number.parseInt(v, 10));
+    const painting = [
+        random_int(256),
+        random_int(256),
+        random_int(256),
+    ];
+    canvasCRO.paint([x, y], painting);
+    const [r, g, b] = canvasCRO.pixel(x, y).color();
+    pixel.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
+}
+async function createConnectHandlers() {
+    node.addCustomGroupMessageHandler(topologyObject.id, (e) => {
+        if (topologyObject)
+            objectPeers = node.networkNode.getGroupPeers(topologyObject.id);
+        render();
+    });
+    node.objectStore.subscribe(topologyObject.id, (_, _obj) => {
+        render();
+    });
+}
+async function init() {
+    await node.start();
+    render();
+    const canvas_element = document.getElementById("canvas");
+    canvas_element.innerHTML = "";
+    canvas_element.style.display = "inline-grid";
+    canvas_element.style.gridTemplateColumns = Array(5).fill("1fr").join(" ");
+    for (let x = 0; x < 5; x++) {
+        for (let y = 0; y < 10; y++) {
+            const pixel = document.createElement("div");
+            pixel.id = `${x}-${y}`;
+            pixel.style.width = "25px";
+            pixel.style.height = "25px";
+            pixel.style.backgroundColor = "rgb(0, 0, 0)";
+            pixel.style.cursor = "pointer";
+            pixel.addEventListener("click", () => paint_pixel(pixel));
+            canvas_element.appendChild(pixel);
+        }
+    }
+    node.addCustomGroupMessageHandler("", (e) => {
+        peers = node.networkNode.getAllPeers();
+        discoveryPeers = node.networkNode.getGroupPeers("topology::discovery");
+        render();
+    });
+    const create_button = document.getElementById("create");
+    create_button.addEventListener("click", async () => {
+        topologyObject = await node.createObject(new canvas_1.Canvas(5, 10));
+        canvasCRO = topologyObject.cro;
+        createConnectHandlers();
+        render();
+    });
+    const connect_button = document.getElementById("connect");
+    connect_button.addEventListener("click", async () => {
+        const croId = document.getElementById("canvasIdInput")
+            .value;
+        try {
+            topologyObject = await node.createObject(new canvas_1.Canvas(5, 10), croId, undefined, true);
+            canvasCRO = topologyObject.cro;
+            createConnectHandlers();
+            render();
+        }
+        catch (e) {
+            console.error("Error while connecting with CRO", croId, e);
+        }
+    });
+}
+init();

examples/canvas/src/objects/canvas.d.ts

@@ -0,0 +1,18 @@
+import { type CRO, type Operation, type ResolveConflictsType, SemanticsType } from "@topology-foundation/object";
+import { Pixel } from "./pixel";
+export declare class Canvas implements CRO {
+    operations: string[];
+    semanticsType: SemanticsType;
+    width: number;
+    height: number;
+    canvas: Pixel[][];
+    constructor(width: number, height: number);
+    splash(offset: [number, number], size: [number, number], rgb: [number, number, number]): void;
+    paint(offset: [number, number], rgb: [number, number, number]): void;
+    private _splash;
+    private _paint;
+    pixel(x: number, y: number): Pixel;
+    resolveConflicts(_: any): ResolveConflictsType;
+    mergeCallback(operations: Operation[]): void;
+}
+//# sourceMappingURL=canvas.d.ts.map

examples/canvas/src/objects/canvas.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Canvas = void 0;
+const object_1 = require("@topology-foundation/object");
+const pixel_1 = require("./pixel");
+class Canvas {
+    operations = ["splash", "paint"];
+    semanticsType = object_1.SemanticsType.pair;
+    width;
+    height;
+    canvas;
+    constructor(width, height) {
+        this.width = width;
+        this.height = height;
+        this.canvas = Array.from(new Array(width), () => Array.from(new Array(height), () => new pixel_1.Pixel()));
+    }
+    splash(offset, size, rgb) {
+        this._splash(offset, size, rgb);
+    }
+    paint(offset, rgb) {
+        this._paint(offset, rgb);
+    }
+    _splash(offset, size, rgb) {
+        if (offset[0] < 0 || this.width < offset[0])
+            return;
+        if (offset[1] < 0 || this.height < offset[1])
+            return;
+        for (let x = offset[0]; x < this.width || x < offset[0] + size[0]; x++) {
+            for (let y = offset[1]; y < this.height || y < offset[1] + size[1]; y++) {
+                this.canvas[x][y].paint(rgb);
+            }
+        }
+    }
+    _paint(offset, rgb) {
+        if (offset[0] < 0 || this.canvas.length < offset[0])
+            return;
+        if (offset[1] < 0 || this.canvas[offset[0]].length < offset[1])
+            return;
+        this.canvas[offset[0]][offset[1]].paint(rgb);
+    }
+    pixel(x, y) {
+        return this.canvas[x][y];
+    }
+    resolveConflicts(_) {
+        return { action: object_1.ActionType.Nop };
+    }
+    mergeCallback(operations) {
+        this.canvas = Array.from(new Array(this.width), () => Array.from(new Array(this.height), () => new pixel_1.Pixel()));
+        for (const op of operations) {
+            if (!op.value)
+                continue;
+            switch (op.type) {
+                case "splash": {
+                    const [nodeId, offset, size, rgb] = op.value;
+                    this._splash(offset, size, rgb);
+                    break;
+                }
+                case "paint": {
+                    const [nodeId, offset, rgb] = op.value;
+                    this._paint(offset, rgb);
+                    break;
+                }
+            }
+        }
+    }
+}
+exports.Canvas = Canvas;

examples/canvas/src/objects/pixel.d.ts

@@ -0,0 +1,10 @@
+export declare class Pixel {
+    red: number;
+    green: number;
+    blue: number;
+    constructor(red?: number, green?: number, blue?: number);
+    color(): [number, number, number];
+    counters(): [number, number, number];
+    paint(rgb: [number, number, number]): void;
+}
+//# sourceMappingURL=pixel.d.ts.map

examples/canvas/src/objects/pixel.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pixel = void 0;
+class Pixel {
+    red;
+    green;
+    blue;
+    constructor(red, green, blue) {
+        this.red = red ?? 0;
+        this.green = green ?? 0;
+        this.blue = blue ?? 0;
+    }
+    color() {
+        return [this.red % 256, this.green % 256, this.blue % 256];
+    }
+    counters() {
+        return [this.red, this.green, this.blue];
+    }
+    paint(rgb) {
+        this.red += rgb[0];
+        this.green += rgb[1];
+        this.blue += rgb[2];
+    }
+}
+exports.Pixel = Pixel;

examples/canvas/vite.config.d.mts

@@ -0,0 +1,3 @@
+declare const _default: import("vite").UserConfig;
+export default _default;
+//# sourceMappingURL=vite.config.d.mts.map

examples/canvas/vite.config.mjs

@@ -0,0 +1,19 @@
+import path from "node:path";
+import { defineConfig } from "vite";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+export default defineConfig({
+    build: {
+        target: "esnext",
+    },
+    plugins: [nodePolyfills()],
+    optimizeDeps: {
+        esbuildOptions: {
+            target: "esnext",
+        },
+    },
+    resolve: {
+        alias: {
+            "@topology-foundation": path.resolve(__dirname, "../../packages"),
+        },
+    },
+});

examples/chat/src/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

examples/chat/src/index.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_1 = require("@topology-foundation/node");
+const chat_1 = require("./objects/chat");
+const node = new node_1.TopologyNode();
+// CRO = Conflict-free Replicated Object
+let topologyObject;
+let chatCRO;
+let peers = [];
+let discoveryPeers = [];
+let objectPeers = [];
+const render = () => {
+    if (topologyObject)
+        document.getElementById("chatId").innerText =
+            topologyObject.id;
+    const element_peerId = document.getElementById("peerId");
+    element_peerId.innerHTML = node.networkNode.peerId;
+    const element_peers = document.getElementById("peers");
+    element_peers.innerHTML = `[${peers.join(", ")}]`;
+    const element_discoveryPeers = (document.getElementById("discoveryPeers"));
+    element_discoveryPeers.innerHTML = `[${discoveryPeers.join(", ")}]`;
+    const element_objectPeers = (document.getElementById("objectPeers"));
+    element_objectPeers.innerHTML = `[${objectPeers.join(", ")}]`;
+    if (!chatCRO)
+        return;
+    const chat = chatCRO.getMessages();
+    const element_chat = document.getElementById("chat");
+    element_chat.innerHTML = "";
+    if (chat.size === 0) {
+        const div = document.createElement("div");
+        div.innerHTML = "No messages yet";
+        div.style.padding = "10px";
+        element_chat.appendChild(div);
+        return;
+    }
+    for (const message of [...chat].sort()) {
+        const div = document.createElement("div");
+        div.innerHTML = message;
+        div.style.padding = "10px";
+        element_chat.appendChild(div);
+    }
+};
+async function sendMessage(message) {
+    const timestamp = Date.now().toString();
+    if (!chatCRO) {
+        console.error("Chat CRO not initialized");
+        alert("Please create or join a chat room first");
+        return;
+    }
+    chatCRO.addMessage(timestamp, message, node.networkNode.peerId);
+    render();
+}
+async function createConnectHandlers() {
+    node.addCustomGroupMessageHandler(topologyObject.id, (e) => {
+        // on create/connect
+        if (topologyObject)
+            objectPeers = node.networkNode.getGroupPeers(topologyObject.id);
+        render();
+    });
+    node.objectStore.subscribe(topologyObject.id, (_, _obj) => {
+        render();
+    });
+}
+async function main() {
+    await node.start();
+    render();
+    // generic message handler
+    node.addCustomGroupMessageHandler("", (e) => {
+        peers = node.networkNode.getAllPeers();
+        discoveryPeers = node.networkNode.getGroupPeers("topology::discovery");
+        render();
+    });
+    const button_create = (document.getElementById("createRoom"));
+    button_create.addEventListener("click", async () => {
+        topologyObject = await node.createObject(new chat_1.Chat());
+        chatCRO = topologyObject.cro;
+        createConnectHandlers();
+        render();
+    });
+    const button_connect = document.getElementById("joinRoom");
+    button_connect.addEventListener("click", async () => {
+        const input = (document.getElementById("roomInput"));
+        const objectId = input.value;
+        if (!objectId) {
+            alert("Please enter a room id");
+            return;
+        }
+        topologyObject = await node.createObject(new chat_1.Chat(), objectId, undefined, true);
+        chatCRO = topologyObject.cro;
+        createConnectHandlers();
+        render();
+    });
+    const button_send = document.getElementById("sendMessage");
+    button_send.addEventListener("click", async () => {
+        const input = (document.getElementById("messageInput"));
+        const message = input.value;
+        input.value = "";
+        if (!message) {
+            console.error("Tried sending an empty message");
+            alert("Please enter a message");
+            return;
+        }
+        await sendMessage(message);
+        const element_chat = document.getElementById("chat");
+        element_chat.scrollTop = element_chat.scrollHeight;
+    });
+}
+main();

examples/chat/src/objects/chat.d.ts

@@ -0,0 +1,13 @@
+import { type CRO, type Operation, type ResolveConflictsType, SemanticsType, type Vertex } from "@topology-foundation/object";
+export declare class Chat implements CRO {
+    operations: string[];
+    semanticsType: SemanticsType;
+    messages: Set<string>;
+    constructor();
+    addMessage(timestamp: string, message: string, nodeId: string): void;
+    private _addMessage;
+    getMessages(): Set<string>;
+    resolveConflicts(vertices: Vertex[]): ResolveConflictsType;
+    mergeCallback(operations: Operation[]): void;
+}
+//# sourceMappingURL=chat.d.ts.map