Skip to content
This repository was archived by the owner on May 7, 2024. It is now read-only.

Commit 4a8f2f3

Browse files
MarcoPoloachingbrain
MarcoPolo
and
achingbrain
authored
docs: add fetch-file-from-kubo example (#12)
* Add fetch-file-from-kubo example * Cleanup * Cleanup * Update examples/fetch-file-from-kubo/package.json Co-authored-by: Alex Potsides <[email protected]> * Update examples/fetch-file-from-kubo/src/libp2p.ts Co-authored-by: Alex Potsides <[email protected]> * Update examples/fetch-file-from-kubo/package.json Co-authored-by: Alex Potsides <[email protected]> * Update examples/fetch-file-from-kubo/src/libp2p.ts Co-authored-by: Alex Potsides <[email protected]> * Test examples * Fiddle with CI * Fiddle with CI * Nit * Increase timeout when building Go server * Fix existsSync test * Increase timeout when building Go server * Use destructuring pattern Co-authored-by: Alex Potsides <[email protected]>
1 parent ec205fb commit 4a8f2f3

11 files changed

Lines changed: 438 additions & 0 deletions

File tree

‎.github/workflows/examples.yml‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
name: CI
2+
3+
on:
4+
workflow_dispatch:
5+
push:
6+
branches: [main]
7+
pull_request:
8+
branches: [main]
9+
10+
concurrency:
11+
group: ${{ github.head_ref || github.ref_name }}
12+
cancel-in-progress: true
13+
14+
jobs:
15+
examples:
16+
runs-on: ubuntu-latest
17+
name: Test example ${{ matrix.project }}
18+
strategy:
19+
fail-fast: false
20+
matrix:
21+
project:
22+
- fetch-file-from-kubo
23+
defaults:
24+
run:
25+
working-directory: examples/${{ matrix.project }}
26+
steps:
27+
- uses: actions/checkout@v3
28+
- uses: actions/setup-node@v3
29+
with:
30+
node-version: lts/*
31+
- uses: actions/setup-go@v3
32+
with:
33+
go-version: '>=1.19.0'
34+
- name: Install dependencies for webtransport in root
35+
run: npm install
36+
working-directory: .
37+
- name: build js-libp2p webtransport in root
38+
run: npm run build
39+
working-directory: .
40+
- name: Install dependencies
41+
run: npm install
42+
- name: Install Playwright
43+
run: npx -y playwright install --with-deps
44+
- name: Run tests
45+
run: npm run test
46+
env:
47+
CI: true

‎examples/fetch-file-from-kubo/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/fetch-file-from-kubo/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>js-libp2p WebTransport</title>
8+
</head>
9+
10+
<body>
11+
<div id="app">
12+
<div>
13+
<p> Connect to (multiaddr with p2p): </p>
14+
<input id="peerInput" type="text" placeholder="multiaddr"
15+
value="/ip4/18.237.216.248/udp/4002/quic/webtransport/certhash/uEiD_zsX_4c3px3fXGcR7l7Y1uuUVBNrzvDZ3Yo0gG7icvg/certhash/uEiDa3KMjw1j1X7eoyNBLODDh_4TEsKFNKTE7T2Ji-QTE-w/p2p/12D3KooWKasdPzM2iDcBQTHP3YWR8DdgAoBMP4BqXWvxhuCVAYFU"></input>
16+
<button id="connectBtn">Connect</button>
17+
</div>
18+
<div id="connlistWrapperEl" hidden="true">
19+
<h3>Active Connections:</h3>
20+
<ul id="connlistEl"></ul>
21+
</div>
22+
<div id="downloadCidWrapperEl" hidden="true">
23+
<p> Cid to download: </p>
24+
<input id="cidInput" type="text" placeholder="CID to download"
25+
value="QmUeN71m4BgvMGtDun8JioAEaeUyqB65dnKVV2oLEsA5WJ"></input>
26+
<button id="fetchBtn">fetch</button>
27+
</div>
28+
<div>
29+
<p id="statusEl" hidden="true">fetching</p>
30+
<a id="downloadEl" hidden="true" href="">Download</a>
31+
</div>
32+
33+
</div>
34+
<script type="module" src="/src/main.ts"></script>
35+
</body>
36+
37+
</html>

‎examples/fetch-file-from-kubo/package.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "fetch-file-from-kubo",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"start": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview",
10+
"test": "npm run build && playwright test tests"
11+
},
12+
"dependencies": {
13+
"@chainsafe/libp2p-noise": "^9.0.0",
14+
"@libp2p/webtransport": "1.0.2",
15+
"@multiformats/multiaddr": "^11.0.3",
16+
"blockstore-core": "^2.0.1",
17+
"ipfs-bitswap": "^13.0.0",
18+
"libp2p": "^0.40.0",
19+
"test-util-ipfs-example": "^1.0.2"
20+
},
21+
"devDependencies": {
22+
"@playwright/test": "^1.27.1",
23+
"typescript": "^4.6.4",
24+
"vite": "^3.1.0"
25+
}
26+
}

‎examples/fetch-file-from-kubo/src/libp2p.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { webTransport } from '@libp2p/webtransport'
2+
import { Noise } from '@chainsafe/libp2p-noise'
3+
import { createLibp2p, Libp2p } from 'libp2p'
4+
import { createBitswap } from 'ipfs-bitswap'
5+
import { MemoryBlockstore } from 'blockstore-core/memory'
6+
7+
type Bitswap = ReturnType<typeof createBitswap>
8+
9+
export async function setup (): Promise<{libp2p: Libp2p, bitswap: Bitswap}> {
10+
const store = new MemoryBlockstore()
11+
12+
const node = await createLibp2p({
13+
transports: [webTransport()],
14+
connectionEncryption: [() => new Noise()]
15+
})
16+
17+
await node.start()
18+
19+
const bitswap = createBitswap(node, store)
20+
await bitswap.start()
21+
22+
return { libp2p: node, bitswap }
23+
}

‎examples/fetch-file-from-kubo/src/main.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import './style.css'
2+
import { multiaddr } from '@multiformats/multiaddr'
3+
import { setup as libp2pSetup } from './libp2p'
4+
import { CID } from 'multiformats/cid'
5+
6+
localStorage.debug = '*'
7+
8+
declare global {
9+
interface Window {
10+
fetchBtn: HTMLButtonElement
11+
connectBtn: HTMLButtonElement
12+
peerInput: HTMLInputElement
13+
cidInput: HTMLInputElement
14+
statusEl: HTMLParagraphElement
15+
downloadEl: HTMLAnchorElement
16+
downloadCidWrapperEl: HTMLDivElement
17+
connlistWrapperEl: HTMLDivElement
18+
connlistEl: HTMLUListElement
19+
}
20+
}
21+
22+
(async function () {
23+
const { libp2p, bitswap } = await libp2pSetup()
24+
window.connectBtn.onclick = async () => {
25+
const ma = multiaddr(window.peerInput.value)
26+
await libp2p.dial(ma)
27+
}
28+
29+
libp2p.connectionManager.addEventListener('peer:connect', (_connection) => {
30+
updateConnList()
31+
})
32+
libp2p.connectionManager.addEventListener('peer:disconnect', (_connection) => {
33+
updateConnList()
34+
})
35+
36+
function updateConnList () {
37+
const addrs = libp2p.getConnections().map(c => c.remoteAddr.toString())
38+
if (addrs.length > 0) {
39+
window.downloadCidWrapperEl.hidden = false
40+
window.connlistWrapperEl.hidden = false
41+
window.connlistEl.innerHTML = ''
42+
addrs.forEach(a => {
43+
const li = document.createElement('li')
44+
li.innerText = a
45+
window.connlistEl.appendChild(li)
46+
})
47+
} else {
48+
window.downloadCidWrapperEl.hidden = true
49+
window.connlistWrapperEl.hidden = true
50+
window.connlistEl.innerHTML = ''
51+
}
52+
}
53+
54+
window.fetchBtn.onclick = async () => {
55+
const c = CID.parse(window.cidInput.value)
56+
window.statusEl.hidden = false
57+
const val = await bitswap.get(c)
58+
window.statusEl.hidden = true
59+
60+
window.downloadEl.href = window.URL.createObjectURL(new Blob([val], { type: 'bytes' }))
61+
window.downloadEl.hidden = false
62+
}
63+
// eslint-disable-next-line no-console
64+
})().catch(err => console.error(err))

‎examples/fetch-file-from-kubo/src/style.css‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
:root {
2+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3+
font-size: 16px;
4+
line-height: 24px;
5+
font-weight: 400;
6+
7+
color-scheme: light dark;
8+
color: rgba(255, 255, 255, 0.87);
9+
background-color: #242424;
10+
11+
font-synthesis: none;
12+
text-rendering: optimizeLegibility;
13+
-webkit-font-smoothing: antialiased;
14+
-moz-osx-font-smoothing: grayscale;
15+
-webkit-text-size-adjust: 100%;
16+
}
17+
18+
a {
19+
font-weight: 500;
20+
color: #646cff;
21+
text-decoration: inherit;
22+
}
23+
24+
a:hover {
25+
color: #535bf2;
26+
}
27+
28+
body {
29+
margin: 0;
30+
display: flex;
31+
place-items: center;
32+
min-width: 320px;
33+
min-height: 100vh;
34+
}
35+
36+
h1 {
37+
font-size: 3.2em;
38+
line-height: 1.1;
39+
}
40+
41+
#app {
42+
max-width: 1280px;
43+
margin: 0 auto;
44+
padding: 2rem;
45+
text-align: center;
46+
}
47+
48+
.logo {
49+
height: 6em;
50+
padding: 1.5em;
51+
will-change: filter;
52+
}
53+
54+
.logo:hover {
55+
filter: drop-shadow(0 0 2em #646cffaa);
56+
}
57+
58+
.logo.vanilla:hover {
59+
filter: drop-shadow(0 0 2em #3178c6aa);
60+
}
61+
62+
.card {
63+
padding: 2em;
64+
}
65+
66+
.read-the-docs {
67+
color: #888;
68+
}
69+
70+
button {
71+
border-radius: 8px;
72+
border: 1px solid transparent;
73+
padding: 0.6em 1.2em;
74+
font-size: 1em;
75+
font-weight: 500;
76+
font-family: inherit;
77+
background-color: #1a1a1a;
78+
cursor: pointer;
79+
transition: border-color 0.25s;
80+
}
81+
82+
button:hover {
83+
border-color: #646cff;
84+
}
85+
86+
button:focus,
87+
button:focus-visible {
88+
outline: 4px auto -webkit-focus-ring-color;
89+
}
90+
91+
@media (prefers-color-scheme: light) {
92+
:root {
93+
color: #213547;
94+
background-color: #ffffff;
95+
}
96+
97+
a:hover {
98+
color: #747bff;
99+
}
100+
101+
button {
102+
background-color: #f9f9f9;
103+
}
104+
}
105+
106+
#connlistWrapperEl ul {
107+
max-width: 400px;
108+
overflow-x: auto;
109+
}

‎examples/fetch-file-from-kubo/src/vite-env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

0 commit comments

Comments
 (0)