refactor: examples-browser (#508)

* refactor: examples-browser * chore: add information to use signalling server * chore: apply suggestions from code review Co-Authored-By: Jacob Heun <jacobheun@gmail.com> * chore: update deps * docs: refactor libp2p browser example * docs(examples): add back websockets and boostrap nodes docs(examples): redo the browser readme * fix: handle edge case of connections closing early * chore: fix lint * chore: update example deps and readme * chore: update webrtc-star * chore: apply suggestions from code review Co-Authored-By: Alan Shaw <alan.shaw@protocol.ai> Co-authored-by: Jacob Heun <jacobheun@gmail.com> Co-authored-by: Alan Shaw <alan.shaw@protocol.ai>
libp2p · Jan 24, 2020 · 560d708 · 560d708
1 parent d21b7ce
commit 560d708
Show file tree

Hide file tree

Showing 14 changed files with 190 additions and 245 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ docs
 **/*.log
 test/repo-tests*
 **/bundle.js
+.cache
 
 # Logs
 logs

diff --git a/examples/libp2p-in-the-browser/.babelrc b/examples/libp2p-in-the-browser/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": ["syntax-async-functions","transform-regenerator"]
+}
diff --git a/examples/libp2p-in-the-browser/1/.gitignore b/examples/libp2p-in-the-browser/1/.gitignore
diff --git a/examples/libp2p-in-the-browser/1/package.json b/examples/libp2p-in-the-browser/1/package.json
diff --git a/examples/libp2p-in-the-browser/1/public/index.html b/examples/libp2p-in-the-browser/1/public/index.html
diff --git a/examples/libp2p-in-the-browser/1/src/browser-bundle.js b/examples/libp2p-in-the-browser/1/src/browser-bundle.js
diff --git a/examples/libp2p-in-the-browser/1/src/create-node.js b/examples/libp2p-in-the-browser/1/src/create-node.js
diff --git a/examples/libp2p-in-the-browser/1/src/index.js b/examples/libp2p-in-the-browser/1/src/index.js
diff --git a/examples/libp2p-in-the-browser/README.md b/examples/libp2p-in-the-browser/README.md
@@ -1,22 +1,55 @@
-# libp2p running in the Browser
+# libp2p in the browser
 
-One of the primary goals with libp2p P2P was to get it fully working in the browser and interopable with the versions running in Go and in Node.js.
+This example leverages the [Parcel.js bundler](https://parceljs.org/) to compile and serve the libp2p code in the browser. Parcel uses [Babel](https://babeljs.io/) to handle transpilation of the code. You can use other bundlers such as Webpack or Browserify, but we will not be covering them here.
 
-# 1. Setting up a simple app that lists connections to other nodes
+## Setup
 
-Start by installing libp2p's dependencies.
+In order to run the example, first install the dependencies from same directory as this README:
 
-```bash
-> cd ../../
-> npm install
-> cd examples/libp2p-in-the-browser
 ```
+cd ./examples/libp2p-in-the-browser
+npm install
+```
+
+## Signaling Server
+
+This example uses the `libp2p-webrtc-star` module, which enables libp2p browser nodes to establish direct connections to one another via a central signaling server. For this example, we are using the signaling server that ships with `libp2p-webrtc-star`.
+
+You can start the server by running `npm run server`. This will start a signaling server locally on port `9090`. If you'd like to run a signaling server outside of this example, you can see instructions on how to do so in the [`libp2p-webrtc-star` README](https://github.com/libp2p/js-libp2p-webrtc-star).
+
+When you run the server, you should see output that looks something like this:
+
+```log
+$ npm run server
+
+> libp2p-in-browser@1.0.0 server
+> star-signal
+
+Listening on: http://0.0.0.0:9090
+```
+
+## Running the examples
 
-Then simply go into the folder [1](./1) and execute the following
+Once you have started the signaling server, you can run the Parcel server.
 
-```bash
-> cd 1
-> npm install
-> npm start
-# open your browser in port :9090
 ```
+npm start
+```
+
+The output should look something like this:
+
+```log
+$ npm start
+
+> libp2p-in-browser@1.0.0 start
+> parcel index.html
+
+Server running at http://localhost:1234
+✨  Built in 1000ms.
+```
+
+This will compile the code and start a server listening on port [http://localhost:1234](http://localhost:1234). Now open your browser to `http://localhost:1234`. You should see a log of your node's Peer ID, the discovered peers from the Bootstrap module, and connections to those peers as they are created.
+
+Now, if you open a second browser tab to `http://localhost:1234`, you should discover your node from the previous tab. This is due to the fact that the `libp2p-webrtc-star` transport also acts as a Peer Discovery interface. Your node will be notified of any peer that connects to the same signaling server you are connected to. Once libp2p discovers this new peer, it will attempt to establish a direct WebRTC connection.
+
+**Note**: In the example we assign libp2p to `window.libp2p`, in case you would like to play around with the API directly in the browser. You can of course make changes to `index.js` and Parcel will automatically rebuild and reload the browser tabs.
diff --git a/examples/libp2p-in-the-browser/index.html b/examples/libp2p-in-the-browser/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+  <head>
+    <meta charset="utf-8">
+    <title>js-libp2p parcel.js browser example</title>
+  </head>
+
+  <body>
+    <header>
+      <h1 id="status">Starting libp2p...</h1>
+    </header>
+
+    <main>
+      <pre id="output"></pre>
+    </main>
+
+    <script src="./index.js"></script>
+
+  </body>
+
+</html>