forked from ipfs-examples/helia-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (109 loc) · 5.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>IPFS in the Browser via Helia</title>
<link rel="icon favicon" href="https://unpkg.com/@helia/[email protected]/logos/favicon.ico" />
<link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" rel="stylesheet" />
</head>
<body>
<h1>IPFS in the Browser via Helia</h1>
<p>
This page creates an IPFS Helia node in your browser and sets a few other useful components into the
global Javascript namespace:
<ul>
<li><b><em style="background-color:#d7d6d6">helia</em></b> - A helia instance. You can access the <a href="https://www.npmjs.com/package/libp2p" target="_blank">libp2p</a> instance used by helia with <b><em style="background-color:#d7d6d6">helia.libp2p</em></b></li>
<li><b><em style="background-color:#d7d6d6">heliaFs</em></b> - A <a href="https://www.npmjs.com/package/@helia/unixfs" target="_blank">@helia/unixFS</a> instance</li>
<li><b><em style="background-color:#d7d6d6">discoveredPeers</em></b> - A <b><em style="background-color:#d7d6d6">Map<peerIdString, peerDiscoveryEventDetail></em></b> that is filled as we discover peers</li>
</ul>
Open the console to play around with them.
</p>
<p>
Note that opening two tabs of this page in the same browser won't work
well, because they will share node configuration. You'll end up trying to
run two instances of the same node, with the same private key and
identity, which is a Bad Idea.
</p>
<hr />
<div>
<button class="e2e-startHelia" onclick="window.helia.start()">Start Helia</button>
<button class="e2e-stopHelia" onclick="window.helia.stop()">Stop Helia</button>
</div>
<h1 id="status">Node status: <span id="statusValue">Not Started</span></h1>
<div id="nodeInfo">
<h3>ID: <span id="nodeId">unknown</span></h3>
<h3>Discovered Peers: <span id="discoveredPeerCount">0</span></h3>
<h3>Connected Peers: <span id="connectedPeerCount">0</span></h3>
<ul id="connectedPeersList"></ul>
</div>
<hr />
<h2>Some suggestions</h2>
<p>Try adding a new file:</p>
<pre><code class="language-javascript">
async function addFile () {
const textEncoder = new TextEncoder()
const cid = await heliaFs.addFile({content: textEncoder.encode('Hello world!')})
console.log('successfully stored', cid.toString())
}
await addFile()
</code></pre>
<p>
You can cat that same file. If you used the exact same string as above
('Hello world!') you should have an hash like this:
'bafkreigaknpexyvxt76zgkitavbwx6ejgfheup5oybpm77f3pxzrvwpfdi'
</p>
<pre><code class="language-javascript">
async function catFile () {
const textDecoder = new TextDecoder()
for await (const data of heliaFs.cat('bafkreigaknpexyvxt76zgkitavbwx6ejgfheup5oybpm77f3pxzrvwpfdi')) {
console.log(textDecoder.decode(data))
}
}
await catFile()
</code></pre>
<p>
Display the multiaddrs of the peers you've discovered:
</p>
<pre><code class="language-javascript">
for (const [peerIdString, peer] of discoveredPeers.entries()) {
console.log(`${peerIdString}: ${peer.multiaddrs.toString()}`)
}
</code></pre>
<p>
Provide the CIDs you create (once you're connected to a peer)
</p>
<pre><code class="language-javascript">
const textEncoder = new TextEncoder()
const cid = await heliaFs.addFile({content: textEncoder.encode('Hello world!')})
for await (const event of helia.libp2p.dht.provide(cid)) {
console.log(event)
}
</code></pre>
<hr />
<h2>Event Log:</h2>
<article id="runningLog"></article>
</body>
<style>
#runningLog span {
display: block;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-core.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/helia@^1.0.0/dist/index.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@helia/unixfs@^1.1.0/dist/index.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/libp2p@^0.43.0/dist/index.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@chainsafe/libp2p-yamux@^3.0.7/dist/index.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@chainsafe/libp2p-noise@^11.0.2/dist/index.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@libp2p/websockets@^5.0.5/dist/index.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@libp2p/bootstrap@^6.0.0/dist/index.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/blockstore-core@^4.0.1/dist/index.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/datastore-core@^9.0.3/dist/index.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@libp2p/kad-dht@^8.0.0/dist/index.min.js" defer></script>
<script src="./src/index.js" type="module" defer></script>
<script nomodule>
alert('Your browser does not support importing ESM modules')
</script>
</html>