chore: webrtc direct

achingbrain · achingbrain · commit 72a0d20c0d77 · 2025-09-26T10:58:25.000+03:00
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -34,6 +34,7 @@ jobs:
           - js-libp2p-example-pubsub
           - js-libp2p-example-transports
           - js-libp2p-example-webrtc-private-to-private
+          - js-libp2p-example-webrtc-private-to-public
     defaults:
       run:
         working-directory: examples/${{ matrix.project }}
@@ -95,6 +96,7 @@ jobs:
           - js-libp2p-example-pubsub
           - js-libp2p-example-transports
           - js-libp2p-example-webrtc-private-to-private
+          - js-libp2p-example-webrtc-private-to-public
     steps:
       - uses: convictional/trigger-workflow-and-wait@f69fa9eedd3c62a599220f4d5745230e237904be
         with:
diff --git a/examples/js-libp2p-example-webrtc-private-to-public/.github/pull_request_template.md b/examples/js-libp2p-example-webrtc-private-to-public/.github/pull_request_template.md
@@ -0,0 +1,17 @@
+# ⚠️ IMPORTANT ⚠️
+
+# Please do not create a Pull Request for this repository
+
+The contents of this repository are automatically synced from the parent [js-libp2p Examples Project](https://github.com/libp2p/js-libp2p-examples) so any changes made to the standalone repository will be lost after the next sync.
+
+Please open a PR against [js-libp2p Examples](https://github.com/libp2p/js-libp2p-examples) instead.
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+1. Fork the [js-libp2p Examples Project](https://github.com/libp2p/js-libp2p-examples)
+2. Create your Feature Branch (`git checkout -b feature/amazing-example`)
+3. Commit your Changes (`git commit -a -m 'feat: add some amazing example'`)
+4. Push to the Branch (`git push origin feature/amazing-example`)
+5. Open a Pull Request
diff --git a/examples/js-libp2p-example-webrtc-private-to-public/.github/workflows/sync.yml b/examples/js-libp2p-example-webrtc-private-to-public/.github/workflows/sync.yml
@@ -0,0 +1,19 @@
+name: pull
+
+on:
+  workflow_dispatch
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Pull from another repository
+        uses: ipfs-examples/actions-pull-directory-from-repo@main
+        with:
+          source-repo: libp2p/js-libp2p-examples
+          source-folder-path: examples/${{ github.event.repository.name }}
+          source-branch: main
+          target-branch: main
+          git-username: github-actions
+          git-email: github-actions@github.com
diff --git a/examples/js-libp2p-example-webrtc-private-to-public/LICENSE b/examples/js-libp2p-example-webrtc-private-to-public/LICENSE
@@ -0,0 +1,4 @@
+This project is dual licensed under MIT and Apache-2.0.
+
+MIT: https://www.opensource.org/licenses/mit
+Apache-2.0: https://www.apache.org/licenses/license-2.0
diff --git a/examples/js-libp2p-example-webrtc-private-to-public/LICENSE-APACHE b/examples/js-libp2p-example-webrtc-private-to-public/LICENSE-APACHE
@@ -0,0 +1,5 @@
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
diff --git a/examples/js-libp2p-example-webrtc-private-to-public/LICENSE-MIT b/examples/js-libp2p-example-webrtc-private-to-public/LICENSE-MIT
@@ -0,0 +1,19 @@
+The MIT License (MIT)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/examples/js-libp2p-example-webrtc-private-to-public/README.md b/examples/js-libp2p-example-webrtc-private-to-public/README.md
@@ -0,0 +1,47 @@
+# @libp2p/example-webrtc-browser-to-server
+
+[![libp2p.io](https://img.shields.io/badge/project-libp2p-yellow.svg?style=flat-square)](http://libp2p.io/)
+[![Discuss](https://img.shields.io/discourse/https/discuss.libp2p.io/posts.svg?style=flat-square)](https://discuss.libp2p.io)
+[![codecov](https://img.shields.io/codecov/c/github/libp2p/js-libp2p-examples.svg?style=flat-square)](https://codecov.io/gh/libp2p/js-libp2p-examples)
+[![CI](https://img.shields.io/github/actions/workflow/status/libp2p/js-libp2p-examples/ci.yml?branch=main\&style=flat-square)](https://github.com/libp2p/js-libp2p-examples/actions/workflows/ci.yml?query=branch%3Amain)
+
+This example leverages the [vite bundler](https://vitejs.dev/) to compile and serve the libp2p code in the browser. You can use other bundlers such as Webpack, but we will not be covering them here.
+
+## Running the Server
+
+To run the Go LibP2P WebRTC server:
+
+```console
+npm run server
+```
+
+Copy the multiaddress from the output.
+
+## Running the Example
+
+In a separate console tab, install dependencies and start the Vite server:
+
+```shell
+npm i && npm run start
+```
+
+The browser window will automatically open.
+Using the copied multiaddress from the Go server, paste it into the `Server MultiAddress` input and click the `Connect` button.
+Once the peer is connected, click the message section will appear.  Enter a message and click the `Send` button.
+
+The output should look like:
+
+```text
+Dialing /ip4/10.0.1.5/udp/54375/webrtc/certhash/uEiADy8JubdWrAzseyzfXFyCpdRN02eWZg86tjCrTCA5dbQ/p2p/12D3KooWEG7N4bnZfFBNZE7WG6xm2P4Sr6sonMwyD4HCAqApEthb
+Peer connected '/ip4/10.0.1.5/udp/54375/webrtc/certhash/uEiADy8JubdWrAzseyzfXFyCpdRN02eWZg86tjCrTCA5dbQ/p2p/12D3KooWEG7N4bnZfFBNZE7WG6xm2P4Sr6sonMwyD4HCAqApEthb'
+Sending message 'hello'
+Received message 'hello'
+```
+
+## Need help?
+
+- Read the [js-libp2p documentation](https://github.com/libp2p/js-libp2p/tree/main/doc)
+- Check out the [js-libp2p API docs](https://libp2p.github.io/js-libp2p/)
+- Check out the [general libp2p documentation](https://docs.libp2p.io) for tips, how-tos and more
+- Read the [libp2p specs](https://github.com/libp2p/specs)
+- Ask a question on the [js-libp2p discussion board](https://github.com/libp2p/js-libp2p/discussions)
diff --git a/examples/js-libp2p-example-webrtc-private-to-public/index.html b/examples/js-libp2p-example-webrtc-private-to-public/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>js-libp2p WebRTC</title>
+    <style>
+      label,
+      button {
+        display: block;
+        font-weight: bold;
+        margin: 5px 0;
+      }
+      div {
+        margin-bottom: 20px;
+      }
+      #send-section {
+        display: none;
+      }
+      input[type='text'] {
+        width: 800px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <div>
+        <label for="peer">Server MultiAddress:</label>
+        <input type="text" id="peer" />
+        <button id="connect">Connect</button>
+      </div>
+      <div id="send-section">
+        <label for="message">Message:</label>
+        <input type="text" id="message" value="hello" />
+        <button id="send">Send</button>
+      </div>
+      <div id="output"></div>
+    </div>
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/examples/js-libp2p-example-webrtc-private-to-public/index.js b/examples/js-libp2p-example-webrtc-private-to-public/index.js
@@ -0,0 +1,52 @@
+import { webRTCDirect } from '@libp2p/webrtc'
+import { multiaddr } from '@multiformats/multiaddr'
+import { createLibp2p } from 'libp2p'
+import { fromString, toString } from 'uint8arrays'
+
+let stream
+const output = document.getElementById('output')
+const sendSection = document.getElementById('send-section')
+const appendOutput = (line) => {
+  const div = document.createElement('div')
+  div.appendChild(document.createTextNode(line))
+  output.append(div)
+}
+const clean = (line) => line.replaceAll('\n', '')
+
+const node = await createLibp2p({
+  transports: [webRTCDirect()],
+  connectionGater: {
+    denyDialMultiaddr: () => {
+      // by default we refuse to dial local addresses from the browser since they
+      // are usually sent by remote peers broadcasting undialable multiaddrs but
+      // here we are explicitly connecting to a local node so do not deny dialing
+      // any discovered address
+      return false
+    }
+  }
+})
+
+await node.start()
+
+node.addEventListener('peer:connect', (connection) => {
+  appendOutput(`Peer connected '${node.getConnections().map(c => c.remoteAddr.toString())}'`)
+  sendSection.style.display = 'block'
+})
+
+window.connect.onclick = async () => {
+  const ma = multiaddr(window.peer.value)
+
+  appendOutput(`Dialing '${ma}'`)
+  stream = await node.dialProtocol(ma, '/echo/1.0.0')
+
+  stream.addEventListener('message', (evt) => {
+    const response = toString(evt.data.subarray())
+    appendOutput(`Received message '${clean(response)}'`)
+  })
+}
+
+window.send.onclick = async () => {
+  const message = `${window.message.value}\n`
+  appendOutput(`Sending message '${clean(message)}'`)
+  stream.send(fromString(message))
+}
diff --git a/examples/js-libp2p-example-webrtc-private-to-public/package.json b/examples/js-libp2p-example-webrtc-private-to-public/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@libp2p/example-webrtc-private-to-public",
+  "version": "1.0.0",
+  "description": "Connect a browser to a server over WebRTC",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "server": "node ./server.js",
+    "test:chrome": "npm run build && playwright test tests",
+    "test:firefox": "npm run build && playwright test --browser firefox tests",
+    "test": "npm run build && test-browser-example test"
+  },
+  "dependencies": {
+    "@libp2p/noise": "^1.0.1",
+    "@libp2p/webrtc": "^6.0.2",
+    "@multiformats/multiaddr": "^13.0.1",
+    "it-pushable": "^3.2.0",
+    "libp2p": "^3.0.2",
+    "vite": "^6.0.3"
+  },
+  "devDependencies": {
+    "test-ipfs-example": "^1.0.0"
+  }
+}
diff --git a/examples/js-libp2p-example-webrtc-private-to-public/server.js b/examples/js-libp2p-example-webrtc-private-to-public/server.js
@@ -0,0 +1,33 @@
+/* eslint-disable no-console */
+
+import { webRTCDirect } from '@libp2p/webrtc'
+import { createLibp2p } from 'libp2p'
+
+const node = await createLibp2p({
+  addresses: {
+    listen: [
+      '/ip4/127.0.0.1/udp/0/webrtc-direct'
+    ]
+  },
+  transports: [webRTCDirect()]
+})
+
+await node.start()
+
+node.handle('/echo/1.0.0', (stream) => {
+  stream.addEventListener('message', (evt) => {
+    stream.send(evt.data)
+  })
+  stream.addEventListener('remoteCloseWrite', () => {
+    stream.close()
+      .catch(err => {
+        stream.abort(err)
+      })
+  })
+})
+
+console.info('Server listening on')
+
+node.getMultiaddrs().forEach(ma => {
+  console.info(ma.toString())
+})
diff --git a/examples/js-libp2p-example-webrtc-private-to-public/test/index.spec.js b/examples/js-libp2p-example-webrtc-private-to-public/test/index.spec.js
@@ -0,0 +1,86 @@
+/* eslint-disable no-console */
+import { spawn } from 'child_process'
+import { multiaddr } from '@multiformats/multiaddr'
+import { WebRTCDirect } from '@multiformats/multiaddr-matcher'
+import { setup, expect } from 'test-ipfs-example/browser'
+
+// Setup
+const test = setup()
+
+async function spawnServer () {
+  const server = spawn('node', [
+    'server.js'
+  ], {
+    cwd: '.',
+    killSignal: 'SIGINT'
+  })
+  const serverAddr = await (new Promise(resolve => {
+    server.stdout.on('data', (data) => {
+      data.toString().split('\n')
+        .map(line => line.trim())
+        .forEach(line => {
+          try {
+            if (WebRTCDirect.matches(multiaddr(line))) {
+              resolve(line)
+            }
+          } catch {}
+        })
+    })
+  }))
+  return { server, serverAddr }
+}
+
+test.describe('connect private to public node', () => {
+  // DOM
+  const connectBtn = '#connect'
+  const connectAddr = '#peer'
+  const messageInput = '#message'
+  const sendBtn = '#send'
+  const output = '#output'
+
+  let server
+  let serverAddr
+
+  // eslint-disable-next-line no-empty-pattern
+  test.beforeAll(async ({ }, testInfo) => {
+    testInfo.setTimeout(5 * 60_000)
+    const s = await spawnServer()
+    server = s.server
+    serverAddr = s.serverAddr
+  }, {})
+
+  test.afterAll(() => {
+    server.kill('SIGINT')
+  })
+
+  test.beforeEach(async ({ servers, page }) => {
+    await page.goto(servers[0].url)
+  })
+
+  test('should connect to a private node over webrtc', async ({ page }) => {
+    const message = 'hello'
+
+    // add the go libp2p multiaddress to the input field and submit
+    await page.fill(connectAddr, serverAddr)
+    await page.click(connectBtn)
+
+    // send the relay message to the go libp2p server
+    await page.fill(messageInput, message)
+    await page.click(sendBtn)
+
+    await page.waitForSelector('#output:has(div)')
+
+    // Expected output:
+    //
+    // Dialing '${serverAddr}'
+    // Peer connected '${serverAddr}'
+    // Sending message '${message}'
+    // Received message '${message}'
+
+    await expect(page.locator(output)).toContainText(`Dialing '${serverAddr}'`)
+    await expect(page.locator(output)).toContainText(`Peer connected '${serverAddr}'`)
+
+    await expect(page.locator(output)).toContainText(`Sending message '${message}'`)
+    await expect(page.locator(output)).toContainText(`Received message '${message}'`)
+  })
+})
diff --git a/examples/js-libp2p-example-webrtc-private-to-public/vite.config.js b/examples/js-libp2p-example-webrtc-private-to-public/vite.config.js
@@ -0,0 +1,8 @@
+export default {
+  build: {
+    target: 'es2022'
+  },
+  optimizeDeps: {
+    esbuildOptions: { target: 'es2022', supported: { bigint: true } }
+  }
+}
