fix: p2p connection between browsers (#28)

topology-foundation · Jul 2, 2024 · a1aea63 · a1aea63
1 parent 960db56
commit a1aea63
Show file tree

Hide file tree

Showing 7 changed files with 273 additions and 324 deletions.
diff --git a/examples/canvas/webpack.config.js b/examples/canvas/webpack.config.js
@@ -7,6 +7,9 @@ module.exports = {
   entry: path.resolve(__dirname, "./src/index.ts"),
   devServer: {
     allowedHosts: "all",
+    client: {
+      overlay: false,
+    },
     static: {
       directory: path.join(__dirname, "public"),
     },

diff --git a/examples/canvas/yarn.lock b/examples/canvas/yarn.lock
diff --git a/packages/network/package.json b/packages/network/package.json
@@ -37,6 +37,7 @@
     "@libp2p/autonat": "^1.0.0",
     "@libp2p/bootstrap": "^10.1.0",
     "@libp2p/circuit-relay-v2": "^1.0.24",
+    "@libp2p/dcutr": "^1.1.0",
     "@libp2p/identify": "^2.0.2",
     "@libp2p/interface-pubsub": "^4.0.1",
     "@libp2p/pubsub-peer-discovery": "^10.0.2",

diff --git a/packages/network/src/node.ts b/packages/network/src/node.ts
@@ -6,6 +6,7 @@ import {
 import { noise } from "@chainsafe/libp2p-noise";
 import { yamux } from "@chainsafe/libp2p-yamux";
 import { circuitRelayTransport } from "@libp2p/circuit-relay-v2";
+import { dcutr } from "@libp2p/dcutr";
 import { identify } from "@libp2p/identify";
 import { EventHandler, PubSub, Stream, StreamHandler } from "@libp2p/interface";
 import { pubsubPeerDiscovery } from "@libp2p/pubsub-peer-discovery";
@@ -16,6 +17,8 @@ import { Libp2p, createLibp2p } from "libp2p";
 import { stringToStream } from "./stream.js";
 import { webTransport } from "@libp2p/webtransport";
 import { bootstrap } from "@libp2p/bootstrap";
+import { fromString as uint8ArrayFromString } from "uint8arrays/from-string";
+import { toString as uint8ArrayToString } from "uint8arrays/to-string";
 
 export interface TopologyNetworkNodeConfig {}
 
@@ -47,7 +50,7 @@ export class TopologyNetworkNode {
       peerDiscovery: [
         pubsubPeerDiscovery({
           interval: 10_000,
-          listenOnly: false,
+          topics: ["topology::discovery"],
         }),
         bootstrap({
           list: [
@@ -59,11 +62,16 @@ export class TopologyNetworkNode {
         identify: identify(),
         pubsub: gossipsub({
           allowPublishToZeroTopicPeers: true,
+          runOnTransientConnection: true,
         }),
+        dcutr: dcutr(),
       },
       streamMuxers: [yamux()],
       transports: [
-        circuitRelayTransport(),
+        circuitRelayTransport({
+          discoverRelays: 2,
+          reservationConcurrency: 1,
+        }),
         webRTC({
           rtcConfiguration: {
             iceServers: [
@@ -91,9 +99,17 @@ export class TopologyNetworkNode {
       this.peerId,
     );
 
-    this._node.addEventListener("peer:connect", (evt) => {
-      console.log("topology::network::peer::connect: ", evt.detail.toString());
-    });
+    // TODO remove this or add better logger
+    // we need to keep it now for debugging
+    this._node.addEventListener("peer:connect", (e) =>
+      console.log("peer:connect", e.detail),
+    );
+    this._node.addEventListener("peer:discovery", (e) =>
+      console.log("peer:discovery", e.detail),
+    );
+    this._node.addEventListener("peer:identify", (e) =>
+      console.log("peer:identify", e.detail),
+    );
   }
 
   subscribe(topic: string) {
@@ -164,7 +180,9 @@ export class TopologyNetworkNode {
   async sendMessage(peerId: string, protocols: string[], message: string) {
     try {
       const connection = await this._node?.dial([multiaddr(`/p2p/${peerId}`)]);
-      const stream = <Stream>await connection?.newStream(protocols);
+      const stream = <Stream>await connection?.newStream(protocols, {
+        runOnTransientConnection: true,
+      });
       stringToStream(stream, message);
 
       console.log(
@@ -186,7 +204,9 @@ export class TopologyNetworkNode {
       const peerId = peers[Math.floor(Math.random() * peers.length)];
 
       const connection = await this._node?.dial(peerId);
-      const stream: Stream = (await connection?.newStream(protocols)) as Stream;
+      const stream: Stream = (await connection?.newStream(protocols, {
+        runOnTransientConnection: true,
+      })) as Stream;
       stringToStream(stream, message);
 
       console.log(

diff --git a/packages/network/src/relay.ts b/packages/network/src/relay.ts
@@ -23,7 +23,12 @@ export const createRelayNode = async () => {
       listen: ["/ip4/0.0.0.0/tcp/50000/ws", "/ip4/0.0.0.0/tcp/50001"],
     },
     connectionEncryption: [noise()],
-    peerDiscovery: [pubsubPeerDiscovery()],
+    peerDiscovery: [
+      pubsubPeerDiscovery({
+        interval: 10_000,
+        topics: ["topology::discovery"],
+      }),
+    ],
     services: {
       autonat: autoNAT(),
       identify: identify(),

diff --git a/packages/node/package.json b/packages/node/package.json
@@ -37,6 +37,7 @@
     "vitest": "^1.6.0"
   },
   "dependencies": {
+    "@libp2p/dcutr": "^1.1.0",
     "@topology-foundation/crdt": "0.0.10",
     "@topology-foundation/network": "0.0.10",
     "@topology-foundation/object": "0.0.10"

diff --git a/yarn.lock b/yarn.lock
@@ -310,6 +310,21 @@
     uint8arraylist "^2.4.8"
     uint8arrays "^5.1.0"
 
+"@libp2p/dcutr@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@libp2p/dcutr/-/dcutr-1.1.0.tgz#0a73881361bb265ad6b43f0acffb5b41158fdb4d"
+  integrity sha512-C8tBevJxb6D8c8Qb2N14/nzSGJY84MyTwzAhf8cwKp7Um17RouTljUJEOakk+TRCp/UrPx3tbbVDOb2cmUR1Tg==
+  dependencies:
+    "@libp2p/interface" "^1.5.0"
+    "@libp2p/interface-internal" "^1.2.4"
+    "@libp2p/utils" "^5.4.4"
+    "@multiformats/multiaddr" "^12.2.3"
+    "@multiformats/multiaddr-matcher" "^1.2.1"
+    delay "^6.0.0"
+    it-protobuf-stream "^1.1.3"
+    protons-runtime "^5.4.0"
+    uint8arraylist "^2.4.8"
+
 "@libp2p/identify@^2.0.2":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@libp2p/identify/-/identify-2.1.0.tgz#663daa8e1f541326630655a8bd52aba015797017"