This repository was archived by the owner on Feb 12, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* docs(example): Use browser with a script-tag * feat: expose IPFS Types under ipfs.types
- Loading branch information
Showing
7 changed files
with
159 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| # Use IPFS in the browser with `<script>` tags | ||
|
|
||
| You can use IPFS in your in-browser JavaScript code with just a `<script>` tag. | ||
|
|
||
| ``` | ||
| <script src="https://unpkg.com/ipfs/dist/index.min.js"></script> | ||
| ``` | ||
|
|
||
| This exposes a global `Ipfs`; you can get a node by making a `new Ipfs()`. | ||
|
|
||
| See `index.html` for a working example. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <title>IPFS in the Browser</title> | ||
| <script src="https://unpkg.com/ipfs/dist/index.min.js"></script> | ||
| <script type="text/javascript"> | ||
| // We provide a hosted signalling endpoint that you can use to discover | ||
| // and dial to other nodes. It is hosted at `star-signal.cloud.ipfs.team` | ||
| // If you run your own signalling, you can change this multiaddr. | ||
| const SIGNALING_SERVER = '/libp2p-webrtc-star/dns4/star-signal.cloud.ipfs.team/wss/ipfs/' | ||
|
|
||
| const repoPath = 'ipfs-' + Math.random() | ||
|
|
||
| // Create an IPFS node | ||
| const node = new Ipfs({ | ||
| repo: repoPath | ||
| }) | ||
|
|
||
| // Init the node | ||
| node.init(handleInit) | ||
|
|
||
| function handleInit (err) { | ||
| if (!err) { // The repo was initialized for the first time, we need to configure it | ||
| addWebRTCMultiaddr() | ||
| } else if (err && err.message !== 'repo already exists') { // The repo already existed, let's just load it | ||
| loadRepo() | ||
| } else { | ||
| throw err | ||
| } | ||
| } | ||
|
|
||
| function addWebRTCMultiaddr() { | ||
| // Addj the WebrTCStar Multiaddr to your node | ||
| node.config.get(function (err, config) { | ||
| if (err) { | ||
| throw err | ||
| } | ||
|
|
||
| const starAddr = (SIGNALING_SERVER + config.Identity.PeerID) | ||
|
|
||
| node.config.set('Addresses.Swarm[1]', starAddr, loadRepo) | ||
| }) | ||
| } | ||
|
|
||
| function loadRepo() { | ||
| node.load(() => node.goOnline(() => { | ||
| console.log('Online status: ', node.isOnline() ? 'online' : 'offline') | ||
|
|
||
| document.getElementById("status").innerHTML= 'Node status: ' + (node.isOnline() ? 'online' : 'offline') | ||
|
|
||
| // \o/ Now you have an IPFS node using WebRTC to find other nodes! | ||
| // You can write more code here to use it. Use methods like | ||
| // node.files.add, node.files.get. See the API docs here: | ||
| // https://github.com/ipfs/interface-ipfs-core/tree/master/API | ||
| })) | ||
| } | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <h1>IPFS in the Browser</h1> | ||
| <p>This page creates an IPFS node in your browser and drops it into the global Javascript namespace as <b><em style="background-color:#d7d6d6">node</em></b>. Open the console to play around with it.</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> | ||
| <div id="status">Node status: offline</div> | ||
|
|
||
| <h2>Some suggestions</h2> | ||
|
|
||
| <p>Try adding a new file:</p> | ||
|
|
||
| <code style="display:block; white-space:pre-wrap; background-color:#d7d6d6"> | ||
| node.files.add(new node.types.Buffer('Hello world!'), function (err, res) { | ||
| if (err || !res) { | ||
| return console.error('Error - ipfs files add', err, res) | ||
| } | ||
|
|
||
| res.forEach(function (file) { | ||
| console.log('successfully stored', file) | ||
| }) | ||
| }) | ||
| </code> | ||
|
|
||
| <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: 'QmQzCQn4puG4qu8PVysxZmscmQ5vT1ZXpqo7f58Uh9QfyY'</p> | ||
|
|
||
| <code style="display:block; white-space:pre-wrap; background-color:#d7d6d6"> | ||
| node.files.cat('QmQzCQn4puG4qu8PVysxZmscmQ5vT1ZXpqo7f58Uh9QfyY', function (err, stream) { | ||
| var res = '' | ||
|
|
||
| stream.on('data', function (chunk) { | ||
| res += chunk.toString() | ||
| }) | ||
|
|
||
| stream.on('error', function (err) { | ||
| console.error('Error - ipfs files cat ', err) | ||
| }) | ||
|
|
||
| stream.on('end', function () { | ||
| console.log('Got:', res) | ||
| }) | ||
| }) | ||
| </code> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters