add browser to browser

packages/frontend/package.json

@@ -17,9 +17,11 @@
     "@libp2p/delegated-peer-routing": "^4.0.0",
     "@libp2p/kad-dht": "^7.0.0",
     "@libp2p/peer-id": "^2.0.1",
-    "@libp2p/webrtc": "^1.0.4",
+    "@libp2p/webrtc": "^1.1.0" ,
     "@libp2p/websockets": "^5.0.3",
     "@libp2p/webtransport": "^1.0.7",
+    "@multiformats/mafmt": "^12.0.0",
+    "@multiformats/multiaddr": "^12.0.0",
     "@types/node": "18.14.6",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
@@ -30,7 +32,7 @@
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",
     "kubo-rpc-client": "^3.0.1",
-    "libp2p": "^0.42.2",
+    "libp2p": "^0.43.0",
     "next": "13.2.3",
     "private-ip": "^3.0.0",
     "react": "18.2.0",

packages/frontend/src/context/ctx.tsx

@@ -21,13 +21,15 @@ export const libp2pContext = createContext<Libp2pContextInterface>({
 interface WrapperProps {
   children?: ReactNode
 }
-
+let loaded = false
 export function AppWrapper({ children }: WrapperProps) {
   const [libp2p, setLibp2p] = useState<Libp2p>()
 
   useEffect(() => {
     const init = async () => {
+      if (loaded) return
       try {
+        loaded = true
         const libp2p = await startLibp2p()
 
         // @ts-ignore

packages/frontend/src/lib/constants.ts

@@ -2,3 +2,6 @@ export const CHAT_TOPIC = "universal-connectivity"
 
 // export const DEFAULT_APP_PEER = '12D3KooWBdmLJjhpgJ9KZgLM3f894ff9xyBfPvPjFNn7MKJpyrC2'
 export const DEFAULT_APP_PEER = '12D3KooWRBy97UB99e3J6hiPesre1MZeuNQvfan4gBziswrRJsNK'
+
+
+export const CIRCUIT_RELAY_CODE = 290

packages/frontend/src/lib/libp2p.ts

@@ -21,15 +21,20 @@ import { create as KuboClient } from 'kubo-rpc-client'
 import { gossipsub } from '@chainsafe/libp2p-gossipsub'
 import { webSockets } from '@libp2p/websockets'
 import { webTransport } from '@libp2p/webtransport'
-import { webRTC } from '@libp2p/webrtc'
+import { webRTC, webRTCDirect } from '@libp2p/webrtc'
 import { PeerId } from 'kubo-rpc-client/dist/src/types'
-import { CHAT_TOPIC } from './constants'
+import { CHAT_TOPIC, CIRCUIT_RELAY_CODE } from './constants'
+import * as filters from "@libp2p/websockets/filters"
+
+// @ts-ignore
+import { circuitRelayTransport } from 'libp2p/circuit-relay'
+
 
 export async function startLibp2p(options: {} = {}) {
   // localStorage.debug = 'libp2p*,-*:trace'
   // application-specific data lives in the datastore
   // const datastore = new MemoryDatastore()
-  const datastore = new LevelDatastore('js-libp2p-nextjs-example')
+  // const datastore = new LevelDatastore('js-libp2p-nextjs-example')
 
   // default is to use ipfs.io
   const client = KuboClient({
@@ -42,8 +47,23 @@ export async function startLibp2p(options: {} = {}) {
   // libp2p is the networking layer that underpins Helia
   const libp2p = await createLibp2p({
     // dht: kadDHT(),
-    datastore,
-    transports: [webTransport(), webSockets(), webRTC()],
+    // datastore,
+    transports: [webTransport(), webSockets({
+      filter: filters.all,
+    }), webRTC({
+      rtcConfiguration: {
+        iceServers:[
+          {
+            urls: [
+              'stun:stun.l.google.com:19302',
+              'stun:global.stun.twilio.com:3478'
+            ]
+          }
+        ]
+      }
+    }), webRTCDirect(), circuitRelayTransport({
+      discoverRelays: 10,
+    }),],
     // transports: [webRTC()],
     connectionEncryption: [noise()],
     streamMuxers: [yamux()],
@@ -83,6 +103,12 @@ export async function startLibp2p(options: {} = {}) {
 
   libp2p.pubsub.subscribe(CHAT_TOPIC)
 
+  libp2p.peerStore.addEventListener('change:multiaddrs', ({detail: {peerId, multiaddrs}}) => {
+
+    console.log(`changed multiaddrs: peer ${peerId.toString()} multiaddrs: ${multiaddrs}`)
+    setWebRTCRelayAddress(multiaddrs, libp2p.peerId.toString())
+  })
+
   console.log(`this nodes peerID: ${libp2p.peerId.toString()}`)
 
   return libp2p
@@ -244,3 +270,15 @@ export class Libp2pDialError extends Error {
     this.error = error
   }
 }
+
+export const setWebRTCRelayAddress = (maddrs: Multiaddr[], peerId: string) => {
+  maddrs.forEach((maddr) => {
+    if (maddr.protoCodes().includes(CIRCUIT_RELAY_CODE)) {
+
+      const webRTCrelayAddress = multiaddr(maddr.toString() + '/webrtc/p2p/' + peerId)
+
+      console.log(`Listening on '${webRTCrelayAddress.toString()}'`)
+    }
+  })
+}
+

packages/frontend/src/pages/index.tsx

@@ -38,19 +38,19 @@ export default function Home() {
       return await libp2p.getConnections()
     }
 
-    const ping = async () => {
-      if (maddr) {
-        return libp2p.ping(multiaddr(maddr))
-      }
-    }
+    // const ping = async () => {
+    //   if (maddr) {
+    //     return libp2p.ping(multiaddr(maddr))
+    //   }
+    // }
 
-    ping()
-      .then((lat) => {
-        setLatency(lat)
-      })
-      .catch((e) => {
-        console.error(e, e?.error)
-      })
+    // ping()
+    //   .then((lat) => {
+    //     setLatency(lat)
+    //   })
+    //   .catch((e) => {
+    //     console.error(e, e?.error)
+    //   })
 
     getConnectedPeers().then((peers) => {
       // If one of the connected peers matches the one in input we're connected
@@ -93,6 +93,7 @@ export default function Home() {
         const addrs = await getPeerMultiaddrs(libp2p)(peerID)
 
         setMultiaddrs(addrs)
+
       } catch (e) {
         console.error(e)
       }
@@ -143,6 +144,7 @@ export default function Home() {
       try {
         const connection = await connectToMultiaddr(libp2p)(multiaddr(maddr))
         console.log('connection: ', connection)
+
         return connection
       } catch (e) {
         console.error(e)