generated from ipfs-examples/example-fork-go-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
254 lines (250 loc) · 8.28 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!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>Publish to IPNS from the browser</title>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/css/tachyons.min.css"
crossorigin
/>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/ipfs.css"
crossorigin
/>
<script type="module" src="src/index.js" defer></script>
</head>
<body class="sans-serif">
<header class="pv3 ph2 ph3-l bg-navy cf mb4">
<a href="https://ipfs.io/" title="ipfs.io">
<img src="./public/ipfs-logo.svg" class="v-mid" style="height: 50px" />
</a>
<h1 class="aqua fw2 montserrat dib ma0 pv2 ph1 v-mid fr f3 lh-copy">
IPNS Publish from JS to Go Peer
</h1>
</header>
<div class="ph3 mb3">
<div class="fw2 tracked ttu f6 teal-muted mb2">
IPNS PUBLISH SET-UP STEPS
</div>
<main class="page" data-v-4f5abb4a="">
<div class="theme-default-content content__default" data-v-4f5abb4a="">
<div
class="custom-block callout"
style="font-size: 0.75em; width: 75%; margin: 1em"
>
<p>
Code repo for this demo
<a
href="https://github.com/js-ipfs/examples/browser-ipns-publish/"
>on Github</a
>
</p>
<p>
The idea is to publish from js-ipfs so you control your own
private keys, but publish to go-ipfs to benefit from the DHT.
Since the DHT in js-ipfs is still in the experimental phase, we
need to use PubSub and have a go-ipfs node subscribed to that
PubSub to get our IPNS record onto the DHT. In order to use PubSub
between these two nodes, you'll need a websocket to connect them.
</p>
<div>
To make this demo work, you're going to need:
<ul>
<li style="list-style-type: none">
<b>1. Access to a go-ipfs node and it's API</b>, a-la
<pre>/dns4/domain.com/tcp/5001</pre>
</li>
<li>
This is how the demo talks to the server, to ensure things
like:
</li>
<ul>
<li>
A) pubsub is enabled, { EXPERIMENTAL: { ipnsPubsub: true } }
and --enable-pubsub-experiment
</li>
<li>
B) go-ipfs is connected to the js-ipfs node in the browser,
via node.swarm.peers(),
</li>
<li>
C) the pubsub messages are getting through to the go node,
via node.pubsub.subscribe().
</li>
</ul>
</ul>
<ul>
<li style="list-style-type: none">
<b>2. Access to a go-ipfs Websocket port</b>, a-la
<pre>/dns4/domain.com/tcp/4003/wss/p2p/QmTheDomainPeerId</pre>
</li>
<li>
Since we need PubSub for IPNS to reach the go-IPFS node (and
further replicate through the go-DHT network) we need to
connect our pubsub enabled JS-IPFS node in the browser to our
go-IPFS node on the server. The way we connect is via
Websocket. See
<a
href="https://github.com/ipfs/js-ipfs/tree/master/packages/ipfs-http-client/examples/browser-pubsub"
>this example</a
>
for reference.
</li>
</ul>
<p>
Once we can talk to go-IPFS and we're connected via Websocket,
then we can publish in our browser node, have the pubsub push it
to the go-IPFS server, and then check with the server that it's
confirmed as published. Once it's on the go-IPFS node it should
replicate throughout the rest of the DHT amongst the go-Nodes.
</p>
</div>
</div>
</div>
</main>
</div>
<div class="ph3 mb3">
<div class="fw2 tracked ttu f6 teal-muted mb2">
1. Connect to Go-IPFS via API MultiAddress
</div>
<input
id="api-url"
class="dib w-50 ph1 pv2 monospace input-reset ba b--black-20 border-box"
placeholder="/dns4/yourdomain.com/tcp/5001"
disabled="disabled"
/>
<button
id="node-connect"
class="dib ph3 pv2 input-reset ba b--black-20 border-box"
disabled="disabled"
>
Connect
</button>
<div
class="custom-block callout"
style="font-size: 0.75em; width: 75%; margin: 1em"
>
For connecting to a local go-ipfs node, you can check its listening
address similar to:
<pre>/ip4/127.0.0.1/tcp/4003/ws/p2p/QmTheirServerPeerId</pre>
</div>
</div>
<div class="ph3 mb3">
<div class="fw2 tracked ttu f6 teal-muted mb2">
2. Connect to Go-IPFS via Websocket MultiAddress (for PubSub to work)
</div>
<input
id="peer-addr"
class="dib w-50 ph1 pv2 monospace input-reset ba b--black-20 border-box"
placeholder="/dns4/yourdomain.com/tcp/4003/wss/p2p/QmTheirServerPeerId"
disabled="disabled"
/>
<button
id="peer-connect"
class="dib ph3 pv2 input-reset ba b--black-20 border-box"
disabled="disabled"
>
Connect
</button>
</div>
<div class="ph3 mb3">
<div class="fw2 tracked ttu f6 teal-muted mb2">3. Choose a key:</div>
<form>
<ul style="list-style-type: none">
<li>
<input type="radio" id="male" name="keyName" value="self" checked />
<label for="male"
>Self (the
<a
href="https://github.com/ipfs/js-ipfs/blob/master/docs/core-api/KEY.md#ipfskeylistoptions"
target="_blank"
>PeerId of the runing node</a
>)</label
><br />
</li>
<li>
<input
type="radio"
id="female"
name="keyName"
value="custom-key"
disabled="disabled"
/>
<label for="female"
>Custom Key (<a
href="https://github.com/ipfs/js-ipfs/blob/master/docs/core-api/KEY.md#ipfskeyimportname-pem-password-options"
target="_blank"
>imported</a
>
onto the keychain) [waiting for
<a href="https://github.com/ipfs/go-ipfs/issues/6360">#6360</a> to
work]</label
><br />
</li>
</ul>
</form>
</div>
<div class="ph3 mb3">
<div class="fw2 tracked ttu f6 teal-muted mb2">
4. IPFS hash to publish
</div>
<input
id="topic"
class="dib w-50 ph1 pv2 monospace input-reset ba b--black-20 border-box"
placeholder="/ipfs/QmFoo"
disabled="disabled"
/>
<button
id="publish"
class="dib ph3 pv2 input-reset ba b--black-20 border-box"
disabled="disabled"
>
Publish to IPNS
</button>
</div>
<div class="ph3 mb3">
<div class="fw2 tracked ttu f6 teal-muted mb2">Browser Console</div>
<div
id="console"
class="
f7
db
w-100
ph1
pv2
monospace
input-reset
ba
b--black-20
border-box
overflow-scroll
"
style="height: 300px"
></div>
</div>
<div class="ph3 mb3">
<div class="fw2 tracked ttu f6 teal-muted mb2">Server Console</div>
<div
id="server-console"
class="
f7
db
w-100
ph1
pv2
monospace
input-reset
ba
b--black-20
border-box
overflow-scroll
"
style="height: 300px"
></div>
</div>
</body>
</html>