@hive-p2p/server 1.0.18 → 1.0.20

package/rendering/renderer-options.mjs

@@ -0,0 +1,85 @@
+export class NetworkRendererElements {
+	modeSwitchBtn;
+	nodeCountElement;
+	connectingCountElement;
+	neighborCountElement;
+	publicNeighborCountElement;
+	connectionsCountElement;
+	linesCountElement;
+
+	constructor(
+		modeSwitchBtn = document.getElementById('modeSwitchBtn'),
+		nodeCountElement = document.getElementById('nodeCount'),
+		connectingCountElement = document.getElementById('connectingCount'),
+		neighborCountElement = document.getElementById('neighborCount'),
+		publicNeighborCountElement = document.getElementById('publicNeighborCount'),
+		connectionsCountElement = document.getElementById('connectionsCount'),
+		linesCountElement = document.getElementById('linesCount'),
+	) {
+		this.modeSwitchBtn = modeSwitchBtn;
+		this.nodeCountElement = nodeCountElement;
+		this.connectingCountElement = connectingCountElement;
+		this.neighborCountElement = neighborCountElement;
+		this.publicNeighborCountElement = publicNeighborCountElement;
+		this.connectionsCountElement = connectionsCountElement;
+		this.linesCountElement = linesCountElement;
+	}
+}
+
+export class NetworkRendererOptions {
+	mode;
+	antialias;
+	precision;
+	nodeRadius;
+	nodeBorderRadius;
+	attraction;
+	repulsion;
+	damping;
+	centerForce;
+	maxVelocity;
+	repulsionOpts;
+	attractionOpts;
+
+	/**
+	 * @param {'2d' | '3d'} mode 
+	 * @param {number} nodeRadius @param {number} nodeBorderRadius @param {number} attraction @param {number} repulsion
+	 * @param {number} damping @param {number} centerForce @param {number} maxVelocity
+	 * 
+	 * @param {Object} repulsionOpts
+	 * @param {number} repulsionOpts.maxDistance
+	 *
+	 * @param {Object} attractionOpts
+	 * @param {number} attractionOpts.minDistance
+	 * */
+	constructor(
+		mode = '3d',
+		antialias = true, // Enable or disable antialiasing
+		precision = "highp", // "lowp"
+		nodeRadius = 12,
+		nodeBorderRadius = 3,
+		attraction = .000001, // .0001
+		repulsion = 5_000, // 50000
+		damping = .005, // .5
+		centerForce = .05, // .0005
+		maxVelocity = 3, // .2
+		repulsionOpts = {
+			maxDistance: 400,
+		},
+		attractionOpts = {
+			minDistance: 100, // 50
+		}
+	) {
+		this.mode = mode;
+		this.antialias = antialias;
+		this.precision = precision;
+		this.nodeRadius = nodeRadius;
+		this.nodeBorderRadius = nodeBorderRadius;
+		this.attraction = attraction;
+		this.repulsion = repulsion;
+		this.damping = damping;
+		this.centerForce = centerForce;
+		this.maxVelocity = maxVelocity;
+		this.repulsionOpts = repulsionOpts;
+		this.attractionOpts = attractionOpts;
+	}
+}

package/rendering/renderer-stores.mjs

@@ -0,0 +1,234 @@
+export class Node {
+	id;
+	status;
+	isPublic;
+	neighbors;
+	velocity = { x: 0, y: 0, z: 0 };
+	position = {
+		x: (Math.random() - 0.5) * 500,
+		y: (Math.random() - 0.5) * 500,
+		z: (Math.random() - 0.5) * 500
+	};
+
+	/** Constructor for a Node
+	 * @param {string} id @param {'unknown' | 'known' | 'connecting' | 'connected' | 'current'} status
+	 * @param {boolean} isPublic @param {Array<string>} neighbors */
+	constructor(id, status, isPublic, neighbors) {
+		this.id = id;
+		this.status = status;
+		this.isPublic = isPublic;
+		this.neighbors = neighbors;
+	}
+	addNeighbor(peerId) {
+		if (!this.neighbors.includes(peerId)) this.neighbors.push(peerId);
+	}
+	removeNeighbor(peerId) {
+		this.neighbors = this.neighbors.filter(id => id !== peerId);
+	}
+}
+export class NodesStore {
+	/** @type {Record<string, Node>} */ store = {};
+
+	/** @param {Node} node */
+	add(node) { this.store[node.id] = node; }
+	get(id = 'toto') { return this.store[id]; }
+	has(id = 'toto') { return !!this.store[id]; }
+	remove(id = 'toto') { delete this.store[id]; }
+	getNodesIds() { return Object.keys(this.store); }
+	getInfo() {
+		const result = {
+			total: 0,
+			totalPublic: 0,
+			connectedPublic: 0,
+			connected: 0,
+			connecting: 0,
+			known: 0,
+			unknown: 0,
+			maxDistance: 0, // max node distance from center x or y, used for auto zoom
+		};
+		for (const node of Object.values(this.store)) {
+			result.total++;
+			result.maxDistance = Math.max(result.maxDistance, Math.abs(node.position.x), Math.abs(node.position.y));
+			if (node.isPublic) result.totalPublic++;
+			if (node.status === 'connected' && node.isPublic) result.connectedPublic++;
+			if (node.status === 'connected') result.connected++;
+			else if (node.status === 'connecting') result.connecting++;
+			else if (node.status === 'known') result.known++;
+			else if (node.status === 'unknown') result.unknown++;
+		}
+		return result;
+	}
+}
+
+const lineMaterials = {};
+class PeerLineConnection {
+	/** @type {THREE.Line} */ line;
+	/** @type {number} in frames */ repaintIgnored = 0;
+	/** @type {boolean} */ isHovered = false;
+
+	#updateLineColor(colorHex = 0x666666, opacity = .4, dashed = false) {
+		if (!this.line || this.line === true) return false; // not assigned (physic only)
+		this.line.material = this.#getLineMaterial(colorHex, opacity, dashed);
+		if (dashed) this.line.computeLineDistances();
+		return 'updated';
+	}
+	#getLineMaterial(colorHex, opacity, dashed) {
+		const matKey = `${colorHex.toString(16)}_${opacity}_${dashed}`;
+		if (lineMaterials[matKey]) return lineMaterials[matKey];
+		const material = dashed
+			? new THREE.LineDashedMaterial({ color: colorHex, transparent: true, opacity, dashSize: 12, gapSize: 20 })
+			: new THREE.LineBasicMaterial({ color: colorHex, transparent: true, opacity });
+		lineMaterials[matKey] = material;
+		return material;
+	}
+	disposeLine(scene) {
+		if (!this.line || this.line === true) return;
+		scene.remove(this.line);
+		this.line.geometry.dispose();
+		this.line.material.dispose();
+		this.isHovered = false;
+		this.repaintIgnored = 0;
+	}
+	countIgnoredRepaint() {
+		if (this.repaintIgnored-- > 0) return true;
+		this.repaintIgnored = 0;
+		return false;
+	}
+	assignOrUpdateLineColor(scene, fromPos = {}, toPos = {}, color = 0x666666, opacity = .4, dashed = false) {
+		if (this.line) return this.#updateLineColor(color, opacity, dashed);
+		if (!fromPos || !toPos) return false; // skip if missing position
+
+		const geometry = new THREE.BufferGeometry();
+		const p = new Float32Array([fromPos.x, fromPos.y, fromPos.z, toPos.x, toPos.y, toPos.z]);
+		geometry.setAttribute('position', new THREE.BufferAttribute(p, 3));
+		
+		const material = this.#getLineMaterial(color, opacity, dashed);
+		const line = new THREE.Line(geometry, material);
+		scene.add(line);
+		this.line = line;
+		return 'created';
+	}
+}
+
+export class ConnectionsStore {
+	/** @type {Record<string, PeerLineConnection>} */ store = {};
+	nodesStore;
+	scene;
+	updateBatchMax = 500;
+	peerConnsWithLines = {};
+
+	/** @param {NodesStore} nodesStore */
+	constructor(nodesStore, scene) {
+		this.nodesStore = nodesStore;
+		this.scene = scene;
+	}
+
+	#getKeys(fromId = 'toto', toId = 'tutu') {
+		const key1 = `${fromId}:${toId}`;
+		const key2 = `${toId}:${fromId}`;
+		const validKey = this.store[key1] ? key1 : this.store[key2] ? key2 : null;
+		return { key1, key2, validKey };
+	}
+	set(fromId = 'toto', toId = 'tutu') {
+		const { key1, key2, validKey } = this.#getKeys(fromId, toId);
+		if (validKey) return { success: false, key: validKey }; // already set
+		this.store[key1] = new PeerLineConnection();
+		return { success: true, key: key1, peerConn: this.store[key1] };
+	}
+	unset(fromId = 'toto', toId = 'tutu', force = false) {
+		const { key1, key2, validKey } = this.#getKeys(fromId, toId);
+		if (!validKey) return;
+
+		const peerConn = this.store[validKey];
+		if (peerConn.repaintIgnored && !force) return; // still ignored
+
+		delete this.peerConnsWithLines[validKey];
+		delete this.store[validKey];
+		peerConn.disposeLine(this.scene);
+
+		// unlink from nodes <> neighbors
+		this.nodesStore.get(fromId)?.removeNeighbor(toId);
+		this.nodesStore.get(toId)?.removeNeighbor(fromId);
+	}
+
+	// VISUAL LINE
+	unassignLine(fromId = 'peer_1', toId = 'peer_2') {
+		const { key1, key2, validKey } = this.#getKeys(fromId, toId);
+		if (!validKey) return;
+		this.store[validKey]?.disposeLine(this.scene);
+		delete this.peerConnsWithLines[validKey];
+	}
+	setHovered(fromId = 'toto', toId = 'tutu') {
+		const { key1, key2, validKey } = this.#getKeys(fromId, toId);
+		if (!validKey) return;
+
+		const [ fromPos, toPos ] = [ this.nodesStore.get(fromId)?.position, this.nodesStore.get(toId)?.position ];
+		const result = this.store[validKey].assignOrUpdateLineColor(this.scene, fromPos, toPos);
+		if (result === false) return;
+
+		this.peerConnsWithLines[validKey] = this.store[validKey];
+		this.store[validKey].isHovered = true;
+		if (result !== 'updated') return;
+		this.store[validKey].line.userData = { fromId, toId, type: 'connection' };
+	}
+	resetHovered() {
+		for (const key in this.store)
+			if (this.store[key].isHovered) this.unset(...key.split(':'), true);
+	}
+	updateOrAssignLineColor(fromId = 'toto', toId = 'tutu', color = 0x666666, opacity = .4, ignoreRepaintFrames, dashed = false) {
+		const { key1, key2, validKey } = this.#getKeys(fromId, toId);
+		const peerConn = validKey ? this.store[validKey] : null;
+		if (!peerConn) return false;
+
+		// assign line  HERE HERE HERE
+		const [ fromPos, toPos ] = [ this.nodesStore.get(fromId)?.position, this.nodesStore.get(toId)?.position ];
+		const result = peerConn.assignOrUpdateLineColor(this.scene, fromPos, toPos, color, opacity, dashed);
+		if (result === 'created') peerConn.line.userData = { fromId, toId, type: 'connection' };
+		if (result && ignoreRepaintFrames) peerConn.repaintIgnored = ignoreRepaintFrames;
+		if (result) this.peerConnsWithLines[validKey] = peerConn;
+		return result;
+	}
+
+	updateConnections(currentPeerId, hoveredNodeId, colors, mode = '3d') { // positions & colors
+		for (const connStr in this.peerConnsWithLines) {
+			const peerConn = this.peerConnsWithLines[connStr];
+			if (!peerConn) continue;
+			const [fromId, toId] = connStr.split(':');
+			const fromPos = this.nodesStore.get(fromId)?.position;
+			const toPos = this.nodesStore.get(toId)?.position;
+			if (!fromPos || !toPos) continue; // skip if missing position
+
+			const positionAttribute = peerConn.line.geometry.attributes.position;
+			positionAttribute.array[0] = fromPos.x;
+			positionAttribute.array[1] = fromPos.y;
+			positionAttribute.array[2] = mode === '3d' ? fromPos.z : 0;
+			positionAttribute.array[3] = toPos.x;
+			positionAttribute.array[4] = toPos.y;
+			positionAttribute.array[5] = mode === '3d' ? toPos.z : 0;
+			positionAttribute.needsUpdate = true;
+
+			if (this.store[connStr].countIgnoredRepaint()) {
+				if (peerConn.line.material.isDashedLineMaterial) peerConn.line.computeLineDistances();
+				continue;
+			}
+
+			// Update connection color
+			const { connection, currentPeerConnection, hoveredPeer } = colors;
+			const isCurrentPeer = fromId === currentPeerId || toId === currentPeerId;
+			const isHoveredPeer = fromId === hoveredNodeId || toId === hoveredNodeId;
+			const color = isCurrentPeer ? currentPeerConnection : isHoveredPeer ? hoveredPeer : connection;
+			const opacity = color === connection ? .33 : .5;
+			const result = peerConn.assignOrUpdateLineColor(this.scene, fromPos, toPos, color, opacity);
+			if (peerConn.line.material.isDashedLineMaterial) peerConn.line.computeLineDistances();
+			if (result) this.peerConnsWithLines[connStr] = peerConn;
+		}
+	}
+	getConnectionsCount() {
+		const result = { connsCount: Object.keys(this.store).length, linesCount: 0 };
+		for (const peerConn of Object.values(this.store)) if (peerConn.line) result.linesCount++;
+		return result;
+	}
+	destroy() {
+		for (const key of Object.keys(this.store)) this.unset(...key.split(':'), true);
+	}
+}

package/rendering/visualizer.css

@@ -0,0 +1,138 @@
+body {
+	margin: 0;
+	font-family: Arial, sans-serif;
+	background: #1a1a1a;
+	color: white;
+	overflow: hidden;
+}
+
+button {
+	cursor: pointer;
+}
+
+::-webkit-scrollbar {
+	width: 8px;
+}
+::-webkit-scrollbar-track {
+	background: #353535;
+	border-radius: 6px;
+}
+::-webkit-scrollbar-thumb {
+	cursor: pointer;
+	background: rgba(76, 175, 80, .5);
+	border-radius: 6px;
+}
+
+
+#peersList {
+	position: fixed;
+	top: 10px;
+	left: 10px;
+	background: rgba(0, 0, 0, 0.8);
+	border-radius: 8px;
+	padding: 10px;
+	max-height: 50vh;
+	overflow-y: auto;
+	overflow-x: hidden;
+	min-width: 130px;
+	max-width: 200px;
+	z-index: 1000;
+}
+#peersList h3 {
+	margin: 0 0 10px 0;
+	color: #4CAF50;
+}
+#peersList div[data-peer-id] {
+	overflow: hidden;
+	max-width: 100px;
+	padding: 6px 10px;
+	margin: 2px 0;
+	background: rgba(76, 175, 80, 0.2);
+	border-radius: 4px;
+	cursor: pointer;
+	transition: background 0.2s;
+}
+#peersList div[data-peer-id].selected {
+	background: rgba(76, 175, 80, 0.4);
+}
+#peersList div[data-peer-id]:hover {
+	background: rgba(76, 175, 80, 0.4);
+}
+.info {
+	position: absolute;
+	bottom: 10px;
+	left: 10px;
+	background: rgba(0,0,0,0.8);
+	padding: 10px;
+	border-radius: 5px;
+	font-size: 12px;
+}
+.info pre {
+	margin: 5px 0 0 0;
+}
+#modeSwitchBtn {
+	position: absolute;
+    top: 10px;
+    right: 10px;
+}
+.info.right {
+	left: auto;
+	right: 10px;
+}
+.info.right div {
+	padding-bottom: 2px;
+}
+
+#simulationSettings {
+	position: fixed;
+	top: 10px;
+	right: 10px;
+	background: rgba(0, 0, 0, 0.8);
+	border-radius: 8px;
+	padding: 10px;
+	font-size: 14px;
+	z-index: 1000;
+}
+#simulationSettings h3 {
+	text-align: right;
+	margin: 0 0 10px 0;
+	color: #4CAF50;
+}
+#simulationSettings div {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 6px;
+	gap: 10px;
+}
+#simulationSettings div input {
+	text-align: center;
+	width: 50px;
+}
+
+#currentPeer {
+	position: fixed;
+	top: 20px;
+	right: 20px;
+	background: rgba(0, 0, 0, 0.8);
+	border-radius: 8px;
+	padding: 15px;
+	z-index: 1000;
+	color: #FFD700;
+}
+#tooltip {
+	position: fixed;
+	background: rgba(0, 0, 0, 0.9);
+	color: white;
+	padding: 10px;
+	border-radius: 4px;
+	pointer-events: none;
+	z-index: 1001;
+	font-size: 12px;
+	display: none;
+	max-width: 200px;
+}
+#networkCanvas {
+	position: absolute;
+	top: 20px;
+	left: 20px;
+}

package/rendering/visualizer.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>P2P Network Visualization - Three.js</title>
+	<link rel="stylesheet" href="./rendering/visualizer.css">
+    <script src="./libs/three-4.5.min.js"></script>
+	<script src="./rendering/visualizer.mjs" type="module"></script>
+</head>
+<body>
+    <div id="peersList" style="display: none;">
+        <h3>Peers List</h3>
+    </div>
+    <div id="simulationSettings" style="display: none;">
+        <h3>Simulation Settings</h3>
+        <div>
+            <label for="publicPeersCount">Public:</label>
+            <input type="number" id="publicPeersCount" value="0">
+        </div>
+        <div>
+            <label for="peersCount">Standard:</label>
+            <input type="number" id="peersCount" value="0">
+        </div>
+		<button id="startSimulation" style="width: 100%;">Start</button>
+    </div>
+    <div id="tooltip"></div>
+    <div class="info"> <!-- SIMULATION INFO/STATS-->
+		<button id="modeSwitchBtn">2D</button>
+        <div>FPS: <span id="fpsCount">0</span></div>
+        <div>Nodes: <span id="nodeCount">0</span></div>
+		<div>Connecting: <span id="connectingCount">0</span></div>
+		<div>Neighbors: <span id="neighborCount">0</span></div>
+		<div>PublicNeighbors: <span id="publicNeighborCount">0</span></div>
+        <div>Connections: <span id="connectionsCount">0</span></div>
+		<div>Lines: <span id="linesCount">0</span></div>
+		--------------------------------------
+        <div><pre>
+Left-Click = connect
+Right-Click = select
+Left-Handle = pan
+Right-Handle = rotate
+Wheel = zoom
+SpaceBar = pause/resume</pre></div>
+    </div>
+
+	<div class="info right"> <!-- LEGEND -->
+		<div style="font-weight: bold;">Peers:</div>
+		<div style="color: #929292">● <span>Discovered</span></div>
+		<div style="color: #ffffff">● <span>Public Node</span></div>
+		<div style="color: #03b5fc">● <span>Connecting</span></div>
+		<div style="color: #4CAF50">● <span>Connected (current)</span></div>
+		<div style="color: #f216e4">● <span>Twitch OGs</span></div>
+		
+		<div style="padding-top: 10px; font-weight: bold;">Connections:</div>
+		<div style="color: #929292">- <span>Connection</span></div>
+		<div style="color: #4CAF50">- <span>Connection (current)</span></div>
+		<div style="color: #035afc">- <span>Direct message</span></div>
+		<div style="color: #f542f5">- <span>Gossip message</span></div>
+	</div>
+</body>
+</html>