forked from libp2p/js-libp2p
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request libp2p#60 from little-bear-labs/feature/refactor-a…
…nd-add-tests-and-coverage Feature/refactor and add tests and coverage
- Loading branch information
Showing
27 changed files
with
1,717 additions
and
426 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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -18,6 +18,8 @@ public/css/main.css | |
|
||
# Coverage reports | ||
coverage | ||
.coverage | ||
.nyc_output | ||
|
||
# API keys and secrets | ||
.env | ||
|
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,4 @@ | ||
# Examples | ||
|
||
* [Browser to Server Echo](browser-to-server/README.md): connect to a go-libp2p-webrtc server with a browser | ||
|
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,34 @@ | ||
# js-libp2p-webrtc Browser to Server | ||
|
||
This example leverages the [vite bundler](https://vitejs.dev/) to compile and serve the libp2p code in the browser. You can use other bundlers such as Webpack, but we will not be covering them here. | ||
|
||
## Running the Go Server | ||
|
||
To run the Go LibP2P WebRTC server: | ||
|
||
```shell | ||
npm run go-libp2p-server | ||
``` | ||
|
||
Copy the multiaddress in the output. | ||
|
||
## Running the Example | ||
|
||
In a separate console tab, install dependencies and start the Vite server: | ||
|
||
```shell | ||
npm i && npm run start | ||
``` | ||
|
||
The browser window will automatically open. | ||
Using the copied multiaddress from the Go server, paste it into the `Server MultiAddress` input and click the `Connect` button. | ||
Once the peer is connected, click the message section will appear. Enter a message and click the `Send` button. | ||
|
||
The output should look like: | ||
|
||
```text | ||
Dialing /ip4/10.0.1.5/udp/54375/webrtc/certhash/uEiADy8JubdWrAzseyzfXFyCpdRN02eWZg86tjCrTCA5dbQ/p2p/12D3KooWEG7N4bnZfFBNZE7WG6xm2P4Sr6sonMwyD4HCAqApEthb | ||
Peer connected '/ip4/10.0.1.5/udp/54375/webrtc/certhash/uEiADy8JubdWrAzseyzfXFyCpdRN02eWZg86tjCrTCA5dbQ/p2p/12D3KooWEG7N4bnZfFBNZE7WG6xm2P4Sr6sonMwyD4HCAqApEthb' | ||
Sending message 'hello' | ||
Received message 'hello' | ||
``` |
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,41 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>js-libp2p WebRTC</title> | ||
<style> | ||
label, | ||
button { | ||
display: block; | ||
font-weight: bold; | ||
margin: 5px 0; | ||
} | ||
div { | ||
margin-bottom: 20px; | ||
} | ||
#send-section { | ||
display: none; | ||
} | ||
input[type='text'] { | ||
width: 800px; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div id="app"> | ||
<div> | ||
<label for="peer">Server MultiAddress:</label> | ||
<input type="text" id="peer" /> | ||
<button id="connect">Connect</button> | ||
</div> | ||
<div id="send-section"> | ||
<label for="message">Message:</label> | ||
<input type="text" id="message" value="hello" /> | ||
<button id="send">Send</button> | ||
</div> | ||
<div id="output"></div> | ||
</div> | ||
<script type="module" src="./index.js"></script> | ||
</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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { createLibp2p } from 'libp2p' | ||
import { Noise } from '@chainsafe/libp2p-noise' | ||
import { multiaddr } from '@multiformats/multiaddr' | ||
import first from "it-first"; | ||
import { pipe } from "it-pipe"; | ||
import { fromString, toString } from "uint8arrays"; | ||
import { webRTC } from 'js-libp2p-webrtc' | ||
|
||
let stream; | ||
const output = document.getElementById('output') | ||
const sendSection = document.getElementById('send-section') | ||
const appendOutput = (line) => output.innerText += `${line}\n` | ||
const clean = (line) => line.replaceAll('\n', '') | ||
|
||
const node = await createLibp2p({ | ||
transports: [webRTC()], | ||
connectionEncryption: [() => new Noise()], | ||
}); | ||
|
||
await node.start() | ||
|
||
node.connectionManager.addEventListener('peer:connect', (connection) => { | ||
appendOutput(`Peer connected '${node.getConnections().map(c => c.remoteAddr.toString())}'`) | ||
sendSection.style.display = 'block' | ||
}) | ||
|
||
window.connect.onclick = async () => { | ||
const ma = multiaddr(window.peer.value) | ||
appendOutput(`Dialing ${ma}`) | ||
stream = await node.dialProtocol(ma, ['/echo/1.0.0']) | ||
} | ||
|
||
window.send.onclick = async () => { | ||
const message = `${window.message.value}\n` | ||
appendOutput(`Sending message '${clean(message)}'`) | ||
const response = await pipe([fromString(message)], stream, async (source) => await first(source)) | ||
const responseDecoded = toString(response.slice(0, response.length)); | ||
appendOutput(`Received message '${clean(responseDecoded)}'`) | ||
} |
Oops, something went wrong.