Skip to content

Commit 095d76f

Browse files
FUDCoFUDCo
committed
feat: libp2p browser-to-browser proof of concept
1 parent 295c98c commit 095d76f

File tree

15 files changed

+3043
-854
lines changed

15 files changed

+3043
-854
lines changed

‎packages/brow-2-brow/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Browser-to-browser connectivity demo
2+
3+
A work in progress, for sure.
4+
5+
Derived from https://github.com/libp2p/libp2p-webrtc-guide

‎packages/brow-2-brow/esbuild.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { build } from 'esbuild';
2+
3+
build({
4+
entryPoints: ['./src/index.js'],
5+
outfile: './dist/index.js',
6+
sourcemap: 'inline',
7+
minify: false,
8+
bundle: true,
9+
define: {
10+
'process.env.NODE_DEBUG': 'false',
11+
global: 'globalThis',
12+
},
13+
});

‎packages/brow-2-brow/package.json‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
{
2+
"name": "@ocap/brow-2-brow",
3+
"version": "1.0.0",
4+
"private": true,
5+
"description": "Browser-to-browser libp2p communications proof of concept",
6+
"repository": {
7+
"type": "git",
8+
"url": "https://github.com/MetaMask/ocap-kernel.git"
9+
},
10+
"type": "module",
11+
"scripts": {
12+
"build": "ts-bridge --project tsconfig.build.json --clean",
13+
"build:dev": "mkdir -p dist && ln -fs ../src/index.html dist/index.html",
14+
"build:docs": "typedoc",
15+
"changelog:validate": "../../scripts/validate-changelog.sh @ocap/brow-2-brow",
16+
"clean": "rimraf --glob './*.tsbuildinfo' ./.eslintcache ./coverage ./dist",
17+
"lint": "yarn lint:eslint && yarn lint:misc --check && yarn constraints && yarn lint:dependencies",
18+
"lint:dependencies": "depcheck",
19+
"lint:eslint": "eslint . --cache",
20+
"lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write && yarn constraints --fix && yarn lint:dependencies",
21+
"lint:misc": "prettier --no-error-on-unmatched-pattern '**/*.json' '**/*.md' '**/*.html' '!**/CHANGELOG.old.md' '**/*.yml' '!.yarnrc.yml' '!merged-packages/**' --ignore-path ../../.gitignore",
22+
"test": "vitest run --config vitest.config.ts",
23+
"test:clean": "yarn test --no-cache --coverage.clean",
24+
"test:dev": "yarn test --mode development",
25+
"test:verbose": "yarn test --reporter verbose",
26+
"test:watch": "vitest --config vitest.config.ts",
27+
"start": "npm run build:dev && esbuild src/index.js --serve --sourcemap --bundle --outdir=dist --servedir=dist --external:@types/web",
28+
"start:relay": "node dist/src/relay.mjs"
29+
},
30+
"dependencies": {
31+
"@chainsafe/libp2p-noise": "^15.1.0",
32+
"@chainsafe/libp2p-yamux": "^6.0.2",
33+
"@libp2p/autonat": "^1.1.1",
34+
"@libp2p/bootstrap": "^10.1.1",
35+
"@libp2p/circuit-relay-v2": "^1.1.1",
36+
"@libp2p/crypto": "^5.1.1",
37+
"@libp2p/identify": "^2.1.1",
38+
"@libp2p/interface": "^2.9.0",
39+
"@libp2p/peer-id": "^5.1.2",
40+
"@libp2p/tcp": "^9.1.1",
41+
"@libp2p/webrtc": "^4.1.1",
42+
"@libp2p/websockets": "^8.1.1",
43+
"@libp2p/webtransport": "^4.1.1",
44+
"@multiformats/multiaddr": "^12.3.0",
45+
"@multiformats/multiaddr-matcher": "^1.2.4",
46+
"@ts-bridge/cli": "^0.6.3",
47+
"@ts-bridge/shims": "^0.1.1",
48+
"@types/web": "^0",
49+
"it-byte-stream": "^2.0.1",
50+
"libp2p": "^1.8.0",
51+
"uint8arrays": "^5.1.0"
52+
},
53+
"devDependencies": {
54+
"@ocap/test-utils": "workspace:^",
55+
"@types/node": "^22.13.1",
56+
"@typescript-eslint/eslint-plugin": "^8.29.0",
57+
"@typescript-eslint/parser": "^8.29.0",
58+
"@typescript-eslint/utils": "^8.29.0",
59+
"depcheck": "^1.4.7",
60+
"esbuild": "^0.25.3",
61+
"eslint": "^9.23.0",
62+
"eslint-config-prettier": "^10.1.1",
63+
"eslint-import-resolver-typescript": "^4.3.1",
64+
"eslint-plugin-import-x": "^4.10.0",
65+
"eslint-plugin-jsdoc": "^50.6.9",
66+
"eslint-plugin-n": "^17.17.0",
67+
"eslint-plugin-prettier": "^5.2.6",
68+
"eslint-plugin-promise": "^7.2.1",
69+
"prettier": "^3.5.3",
70+
"rimraf": "^6.0.1",
71+
"ses": "^1.12.0",
72+
"typescript": "~5.8.2",
73+
"typescript-eslint": "^8.29.0",
74+
"vitest": "^3.1.1"
75+
},
76+
"eslintConfig": {
77+
"extends": "ipfs",
78+
"parserOptions": {
79+
"sourceType": "module"
80+
}
81+
},
82+
"engines": {
83+
"node": "^20 || >=22"
84+
},
85+
"exports": {
86+
"./package.json": "./package.json"
87+
}
88+
}

‎packages/brow-2-brow/src/constants.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// peer ids of known bootstrap nodes
2+
export const bootstrapPeers = [
3+
'QmNnooDu7bfjPFoTZYxMNLWUQJyrVwtbZg5gBMjTezGAJN',
4+
'QmQCU2EcMqAqQPR2i9bChDtGNJchTbq5TbXJJ16u19uLTa',
5+
'QmbLHAnMoJPWSCR5Zhtx6BHJX9KiKNN6tpvbUcqanj75Nb',
6+
'QmcZf59bWwK5XFi76CZX8cbJ4BhTzzA3gU1ZjYZcYW3dwt',
7+
'QmaCpDMGvV2BGHeYERUEnRQAwe3N8SzbUtfsmvsqQLuvuJ',
8+
'QmZa1sAxajnQjVM8WjWXoMbmPd7NsWhfKsPkErzpm9wGkp',
9+
];
10+
11+
export const PUBSUB_PEER_DISCOVERY = 'browser-peer-discovery';

‎packages/brow-2-brow/src/index.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Browser-to-browser comm test</title>
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
<script type="module" defer src="./index.js"></script>
10+
</head>
11+
<body class="bg-gray-100 text-gray-900 font-sans leading-relaxed">
12+
<main class="container mx-auto p-6 bg-white shadow-md rounded-lg mt-10">
13+
<h1 class="font-bold text-2xl text-blue-600 mb-4">
14+
Browser-to-browser comm test
15+
</h1>
16+
17+
<section class="my-4">
18+
<h2 class="font-bold text-xl text-blue-600 mb-2">Node</h2>
19+
<ul class="list-disc list-inside ml-4">
20+
<li>
21+
Peer ID:
22+
<span class="font-bold" id="output-node-peer-id">Unknown</span>
23+
</li>
24+
<li>Status: <span id="output-node-status">Initialising</span></li>
25+
<li>
26+
Connections: <span id="output-peer-count">0</span>
27+
<ul class="list-disc list-inside ml-6" id="output-peer-types"></ul>
28+
</li>
29+
<li>
30+
My addresses: <span id="output-address-count">0</span>
31+
<ul class="list-disc list-inside ml-6" id="output-addresses"></ul>
32+
</li>
33+
</ul>
34+
</section>
35+
36+
<section class="my-6">
37+
<h2 class="font-bold text-xl text-blue-600 mb-2">Peers</h2>
38+
<p class="flex flex-row items-center gap-2">
39+
<label
40+
class="block text-gray-700 text-sm font-bold"
41+
for="input-multiaddr"
42+
>Multiaddr</label
43+
>
44+
<input
45+
class="shadow appearance-none border rounded w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
46+
id="input-multiaddr"
47+
type="text"
48+
placeholder="/ip4/..."
49+
/>
50+
<button
51+
class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
52+
id="button-connect"
53+
type="button"
54+
>
55+
Connect
56+
</button>
57+
</p>
58+
<ul class="list-disc list-inside ml-4" id="output-peer-details"></ul>
59+
</section>
60+
61+
<section class="my-6">
62+
<h2 class="font-bold text-xl text-blue-600 mb-2">Message</h2>
63+
<p class="flex flex-row items-center gap-2">
64+
<label
65+
class="block text-gray-700 text-sm font-bold"
66+
for="input-target"
67+
>Target</label
68+
>
69+
<input
70+
class="shadow appearance-none border rounded w-20 py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
71+
id="input-target"
72+
type="text"
73+
placeholder="target id"
74+
/>
75+
<label
76+
class="block text-gray-700 text-sm font-bold"
77+
for="input-message"
78+
>Message</label
79+
>
80+
<input
81+
class="shadow appearance-none border rounded w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
82+
id="input-message"
83+
type="text"
84+
placeholder="your message here..."
85+
/>
86+
<button
87+
class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
88+
id="button-send"
89+
type="button"
90+
>
91+
Send
92+
</button>
93+
</p>
94+
</section>
95+
96+
<h2 class="font-bold text-xl text-blue-600 mb-2">Output</h2>
97+
<pre
98+
class="bg-gray-100 p-4 rounded shadow-inner"
99+
id="output-messages"
100+
></pre>
101+
102+
<hr class="my-6 border-gray-300" />
103+
</main>
104+
</body>
105+
</html>

0 commit comments

Comments
 (0)