feat: add DHT support

examples/canvas/index.html

@@ -11,7 +11,6 @@
         <div style="margin-bottom: 10px">
             <p>Connected to <span id="canvasId"></span></p>
             <p>peers: <span id="peers"></span></p>
-            <p>discovery_peers: <span id="discovery_peers"></span></p>
             <p>object_peers: <span id="object_peers"></span></p>
             <input
                 id="canvasIdInput"

examples/canvas/src/index.ts

@@ -6,18 +6,12 @@ const node = new TopologyNode();
 let topologyObject: TopologyObject;
 let canvasCRO: Canvas;
 let peers: string[] = [];
-let discoveryPeers: string[] = [];
 let objectPeers: string[] = [];
 
 const render = () => {
 	const peers_element = <HTMLDivElement>document.getElementById("peers");
 	peers_element.innerHTML = `[${peers.join(", ")}]`;
 
-	const discovery_element = <HTMLDivElement>(
-		document.getElementById("discovery_peers")
-	);
-	discovery_element.innerHTML = `[${discoveryPeers.join(", ")}]`;
-
 	const object_element = <HTMLDivElement>(
 		document.getElementById("object_peers")
 	);
@@ -84,9 +78,13 @@ async function init() {
 		}
 	}
 
-	node.addCustomGroupMessageHandler("", (e) => {
+	node.networkNode.getNode().addEventListener("peer:connect", (peerId) => {
+		peers = node.networkNode.getAllPeers();
+		render();
+	});
+
+	node.networkNode.getNode().addEventListener("peer:disconnect", (peerId) => {
 		peers = node.networkNode.getAllPeers();
-		discoveryPeers = node.networkNode.getGroupPeers("topology::discovery");
 		render();
 	});
 

examples/chat/index.html

@@ -11,7 +11,6 @@ <h1>Topology Protocol - Chat</h1>
       <p>Current peer ID <span id="peerId"></span></p>
       <p>Connected to <span id="chatId"></span></p>
       <p>peers: <span id="peers"></span></p>
-      <p>discovery_peers: <span id="discoveryPeers"></span></p>
       <p>object_peers: <span id="objectPeers"></span></p>
 
       <input id="roomInput" type="text" placeholder="Room ID" />

examples/chat/src/index.ts

@@ -7,7 +7,6 @@ const node = new TopologyNode();
 let topologyObject: TopologyObject;
 let chatCRO: Chat;
 let peers: string[] = [];
-let discoveryPeers: string[] = [];
 let objectPeers: string[] = [];
 
 const render = () => {
@@ -20,11 +19,6 @@ const render = () => {
 	const element_peers = <HTMLDivElement>document.getElementById("peers");
 	element_peers.innerHTML = `[${peers.join(", ")}]`;
 
-	const element_discoveryPeers = <HTMLDivElement>(
-		document.getElementById("discoveryPeers")
-	);
-	element_discoveryPeers.innerHTML = `[${discoveryPeers.join(", ")}]`;
-
 	const element_objectPeers = <HTMLDivElement>(
 		document.getElementById("objectPeers")
 	);
@@ -79,10 +73,13 @@ async function main() {
 	await node.start();
 	render();
 
-	// generic message handler
-	node.addCustomGroupMessageHandler("", (e) => {
+	node.networkNode.getNode().addEventListener("peer:connect", (peerId) => {
+		peers = node.networkNode.getAllPeers();
+		render();
+	});
+
+	node.networkNode.getNode().addEventListener("peer:disconnect", (peerId) => {
 		peers = node.networkNode.getAllPeers();
-		discoveryPeers = node.networkNode.getGroupPeers("topology::discovery");
 		render();
 	});
 

examples/grid/index.html

@@ -10,7 +10,6 @@
       <h1>A 2D grid made with CRO</h1>
       <p>Your Peer ID: <span id="peerId"></span></p>
       <p>Peers on dRAM: <span id="peers"></span></p>
-      <p>Discovery Peers: <span id="discoveryPeers"></span></p>
 
       <button id="createGrid">Spawn a new Grid CRO</button>
       <span style="margin: 0 10px;">|</span>

examples/grid/src/index.ts

@@ -4,10 +4,10 @@ import { Grid } from "./objects/grid";
 import { hslToRgb, rgbToHex, rgbToHsl } from "./util/color";
 
 const node = new TopologyNode();
+
 let topologyObject: TopologyObject;
 let gridCRO: Grid;
 let peers: string[] = [];
-let discoveryPeers: string[] = [];
 let objectPeers: string[] = [];
 
 const formatNodeId = (id: string): string => {
@@ -65,11 +65,6 @@ const render = () => {
 	const element_peers = <HTMLDivElement>document.getElementById("peers");
 	element_peers.innerHTML = `[${peers.map((peer) => `<strong style="color: ${getColorForNodeId(peer)};">${formatNodeId(peer)}</strong>`).join(", ")}]`;
 
-	const element_discoveryPeers = <HTMLDivElement>(
-		document.getElementById("discoveryPeers")
-	);
-	element_discoveryPeers.innerHTML = `[${discoveryPeers.map((peer) => `<strong style="color: ${getColorForNodeId(peer)};">${formatNodeId(peer)}</strong>`).join(", ")}]`;
-
 	const element_objectPeers = <HTMLDivElement>(
 		document.getElementById("objectPeers")
 	);
@@ -202,12 +197,22 @@ async function createConnectHandlers() {
 }
 
 async function main() {
+	// node.networkNode.setOnPeerConnect((peerId : any) => {
+	// 	console.log("NEW PEER CONNECTED", peerId);
+	// 	peers = node.networkNode.getAllPeers();
+	// 	render();
+	// });
+
 	await node.start();
 	render();
 
-	node.addCustomGroupMessageHandler("", (e) => {
+	node.networkNode.getNode().addEventListener("peer:connect", (peerId) => {
+		peers = node.networkNode.getAllPeers();
+		render();
+	});
+
+	node.networkNode.getNode().addEventListener("peer:disconnect", (peerId) => {
 		peers = node.networkNode.getAllPeers();
-		discoveryPeers = node.networkNode.getGroupPeers("topology::discovery");
 		render();
 	});
 
@@ -257,7 +262,6 @@ async function main() {
 		navigator.clipboard
 			.writeText(gridIdText)
 			.then(() => {
-				// alert("Grid CRO ID copied to clipboard!");
 				console.log("Grid CRO ID copied to clipboard");
 			})
 			.catch((err) => {

packages/network/package.json

@@ -42,6 +42,7 @@
   "@libp2p/dcutr": "^2.0.6",
   "@libp2p/devtools-metrics": "^1.1.5",
   "@libp2p/identify": "^3.0.6",
+  "@libp2p/kad-dht": "14.0.0",
   "@libp2p/mdns": "^11.0.8",
   "@libp2p/peer-id": "^5.0.4",
   "@libp2p/pubsub-peer-discovery": "^11.0.0",

packages/network/src/node.ts

@@ -17,11 +17,12 @@ import { devToolsMetrics } from "@libp2p/devtools-metrics";
 import { identify } from "@libp2p/identify";
 import type {
 	EventCallback,
+	PeerId,
 	PubSub,
 	Stream,
 	StreamHandler,
 } from "@libp2p/interface";
-import { pubsubPeerDiscovery } from "@libp2p/pubsub-peer-discovery";
+import { kadDHT, removePrivateAddressesMapper } from "@libp2p/kad-dht";
 import { webRTC, webRTCDirect } from "@libp2p/webrtc";
 import { webSockets } from "@libp2p/websockets";
 import * as filters from "@libp2p/websockets/filters";
@@ -76,28 +77,28 @@ export class TopologyNetworkNode {
 					"/dns4/bootstrap2.topology.gg/tcp/443/wss/p2p/12D3KooWLGuTtCHLpd1SBHeyvzT3kHVe2dw8P7UdoXsfQHu8qvkf",
 				];
 
-		const _pubsubPeerDiscovery = pubsubPeerDiscovery({
-			interval: 10_000,
-			topics: ["topology::discovery"],
-		});
-
 		const _peerDiscovery = _bootstrapNodesList.length
 			? [
-					_pubsubPeerDiscovery,
 					bootstrap({
 						list: _bootstrapNodesList,
 					}),
 				]
-			: [_pubsubPeerDiscovery];
+			: [];
 
 		const _node_services = {
 			autonat: autoNAT(),
 			dcutr: dcutr(),
 			identify: identify(),
 			pubsub: gossipsub(),
+			dht: kadDHT({
+				protocol: "/topology/dht/1.0.0",
+				// both undefined and false should run client mode
+				clientMode: !this._config?.bootstrap,
+				peerInfoMapper: removePrivateAddressesMapper,
+			}),
 		};
 
-		const _bootstrap_services = {
+		const _bootstrap_node_services = {
 			..._node_services,
 			relay: circuitRelayServer(),
 		};
@@ -115,7 +116,9 @@ export class TopologyNetworkNode {
 			},
 			metrics: this._config?.browser_metrics ? devToolsMetrics() : undefined,
 			peerDiscovery: _peerDiscovery,
-			services: this._config?.bootstrap ? _bootstrap_services : _node_services,
+			services: this._config?.bootstrap
+				? _bootstrap_node_services
+				: _node_services,
 			streamMuxers: [yamux()],
 			transports: [
 				circuitRelayTransport({
@@ -145,10 +148,16 @@ export class TopologyNetworkNode {
 			this.peerId,
 		);
 
-		this._node.addEventListener("peer:connect", (e) =>
-			log.info("::start::peer::connect", e.detail),
-		);
-		this._node.addEventListener("peer:discovery", (e) => {
+		this._node.addEventListener("peer:connect", (e) => {
+			log.info("::peer:connect", e.detail);
+		});
+
+		this._node.addEventListener("peer:disconnect", (e) => {
+			log.info("::peer:disconnect", e.detail);
+		});
+
+		this._node.addEventListener("peer:discovery", async (e) => {
+			log.info("::start::peer::discovery", e.detail);
 			// current bug in v11.0.0 requires manual dial (https://github.com/libp2p/js-libp2p-pubsub-peer-discovery/issues/149)
 			const sortedAddrs = e.detail.multiaddrs.sort((a, b) => {
 				const localRegex =
@@ -166,14 +175,13 @@ export class TopologyNetworkNode {
 
 			// Dial non-local multiaddrs, then WebRTC multiaddrs
 			for (const address of sortedAddrs) {
-				this._node?.dial(address);
+				await this._node?.dial(address);
 			}
+		});
 
-			log.info("::start::peer::discovery", e.detail);
+		this._node.addEventListener("peer:identify", (e) => {
+			log.info("::start::peer::identify", e.detail);
 		});
-		this._node.addEventListener("peer:identify", (e) =>
-			log.info("::start::peer::identify", e.detail),
-		);
 	}
 
 	subscribe(topic: string) {