mirror of
https://github.com/logos-messaging/examples.waku.org.git
synced 2026-01-05 22:33:08 +00:00
add relay-rtc example
This commit is contained in:
Sasha
parent
c6e560af0b
commit
f0b204de3d
13
examples/relay-rtc/README.md
Normal file
13
examples/relay-rtc/README.md
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
# Using Waku Light Push and Filter in JavaScript
|
||||||
|
|
||||||
|
**Demonstrates**:
|
||||||
|
|
||||||
|
- Waku Light node: Waku Filter + Waku Light Push
|
||||||
|
- Pure Javascript/HTML.
|
||||||
|
- Use minified bundle of js from unpkg.com, no import, no package manager.
|
||||||
|
|
||||||
|
This example uses Waku Filter to listen to messages and Waku Light Push to send messages.
|
||||||
|
|
||||||
|
To test the example, simply download the `index.html` file from this folder and open it in a browser.
|
||||||
|
|
||||||
|
The `master` branch's HEAD is deployed at https://examples.waku.org/light-js/.
|
||||||
BIN
examples/relay-rtc/favicon.ico
Normal file
BIN
examples/relay-rtc/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
examples/relay-rtc/favicon.png
Normal file
BIN
examples/relay-rtc/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
42
examples/relay-rtc/index.html
Normal file
42
examples/relay-rtc/index.html
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||||
|
<title>JS-Waku light node example</title>
|
||||||
|
<link rel="apple-touch-icon" href="./favicon.png" />
|
||||||
|
<link rel="manifest" href="./manifest.json" />
|
||||||
|
<link rel="icon" href="./favicon.ico" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div><h2>Status</h2></div>
|
||||||
|
<div id="status"></div>
|
||||||
|
|
||||||
|
<div><h2>Local Peer Id</h2></div>
|
||||||
|
<div id="peer-id"></div>
|
||||||
|
|
||||||
|
<div><h2>Remote Peer Id</h2></div>
|
||||||
|
<div id="remote-peer-id"></div>
|
||||||
|
|
||||||
|
<label for="remote-multiaddr">Remote peer's multiaddr</label>
|
||||||
|
<input id="remote-multiaddr" type="text" value="" />
|
||||||
|
<button disabled id="dial" type="button">Dial</button>
|
||||||
|
<br />
|
||||||
|
<button disabled id="subscribe" type="button">Subscribe with Filter</button>
|
||||||
|
<button disabled id="unsubscribe" type="button">
|
||||||
|
Unsubscribe with Filter
|
||||||
|
</button>
|
||||||
|
<br />
|
||||||
|
<label for="textInput">Message text</label>
|
||||||
|
<input id="textInput" placeholder="Type your message here" type="text" />
|
||||||
|
<button disabled id="sendButton" type="button">
|
||||||
|
Send message using Light Push
|
||||||
|
</button>
|
||||||
|
<br />
|
||||||
|
<div id="messages"></div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/@multiformats/multiaddr@12.1.1/dist/index.min.js"></script>
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
132
examples/relay-rtc/index.js
Normal file
132
examples/relay-rtc/index.js
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
import {
|
||||||
|
createRelayNode,
|
||||||
|
waitForRemotePeer,
|
||||||
|
createEncoder,
|
||||||
|
createDecoder,
|
||||||
|
utf8ToBytes,
|
||||||
|
bytesToUtf8,
|
||||||
|
} from "@waku/sdk";
|
||||||
|
import { webSockets } from "@libp2p/websockets";
|
||||||
|
import { all as filterAll } from "@libp2p/websockets/filters";
|
||||||
|
|
||||||
|
import { webRTC } from "@libp2p/webrtc";
|
||||||
|
import { circuitRelayTransport } from "libp2p/circuit-relay";
|
||||||
|
|
||||||
|
const peerIdDiv = document.getElementById("peer-id");
|
||||||
|
const remotePeerIdDiv = document.getElementById("remote-peer-id");
|
||||||
|
const statusDiv = document.getElementById("status");
|
||||||
|
const remoteMultiAddrDiv = document.getElementById("remote-multiaddr");
|
||||||
|
const dialButton = document.getElementById("dial");
|
||||||
|
const subscribeButton = document.getElementById("subscribe");
|
||||||
|
const unsubscribeButton = document.getElementById("unsubscribe");
|
||||||
|
const messagesDiv = document.getElementById("messages");
|
||||||
|
const textInput = document.getElementById("textInput");
|
||||||
|
const sendButton = document.getElementById("sendButton");
|
||||||
|
|
||||||
|
const ContentTopic = "/js-waku-examples/1/chat/utf8";
|
||||||
|
const decoder = createDecoder(ContentTopic);
|
||||||
|
const encoder = createEncoder({ contentTopic: ContentTopic });
|
||||||
|
let messages = [];
|
||||||
|
let unsubscribe;
|
||||||
|
|
||||||
|
const updateMessages = (msgs, div) => {
|
||||||
|
div.innerHTML = "<ul>";
|
||||||
|
messages.forEach((msg) => (div.innerHTML += "<li>" + msg + "</li>"));
|
||||||
|
div.innerHTML += "</ul>";
|
||||||
|
};
|
||||||
|
|
||||||
|
statusDiv.innerHTML = "<p>Creating Waku node.</p>";
|
||||||
|
const node = await createRelayNode({
|
||||||
|
libp2p: {
|
||||||
|
addresses: {
|
||||||
|
listen: ["/webrtc"],
|
||||||
|
},
|
||||||
|
connectionGater: {
|
||||||
|
denyDialMultiaddr: () => {
|
||||||
|
// by default we refuse to dial local addresses from the browser since they
|
||||||
|
// are usually sent by remote peers broadcasting undialable multiaddrs but
|
||||||
|
// here we are explicitly connecting to a local node so do not deny dialing
|
||||||
|
// any discovered address
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
transports: [
|
||||||
|
webRTC({}),
|
||||||
|
circuitRelayTransport({
|
||||||
|
discoverRelays: 1,
|
||||||
|
}),
|
||||||
|
webSockets({ filter: filterAll }),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
window.node = node;
|
||||||
|
|
||||||
|
statusDiv.innerHTML = "<p>Starting Waku node.</p>";
|
||||||
|
await node.start();
|
||||||
|
statusDiv.innerHTML = "<p>Waku node started.</p>";
|
||||||
|
peerIdDiv.innerHTML = "<p>" + node.libp2p.peerId.toString() + "</p>";
|
||||||
|
dialButton.disabled = false;
|
||||||
|
|
||||||
|
dialButton.onclick = async () => {
|
||||||
|
const ma = remoteMultiAddrDiv.value;
|
||||||
|
if (!ma) {
|
||||||
|
statusDiv.innerHTML = "<p>Error: No multiaddr provided.</p>";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
statusDiv.innerHTML = "<p>Dialing peer.</p>";
|
||||||
|
const multiaddr = MultiformatsMultiaddr.multiaddr(ma);
|
||||||
|
await node.dial(multiaddr, ["relay"]);
|
||||||
|
await waitForRemotePeer(node, ["relay"]);
|
||||||
|
const peers = await node.libp2p.peerStore.all();
|
||||||
|
statusDiv.innerHTML = "<p>Peer dialed.</p>";
|
||||||
|
remotePeerIdDiv.innerHTML = "<p>" + peers[0].id.toString() + "</p>";
|
||||||
|
textInput.disabled = false;
|
||||||
|
sendButton.disabled = false;
|
||||||
|
subscribeButton.disabled = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const callback = (wakuMessage) => {
|
||||||
|
const text = bytesToUtf8(wakuMessage.payload);
|
||||||
|
const timestamp = wakuMessage.timestamp.toString();
|
||||||
|
messages.push(text + " - " + timestamp);
|
||||||
|
updateMessages(messages, messagesDiv);
|
||||||
|
};
|
||||||
|
|
||||||
|
subscribeButton.onclick = async () => {
|
||||||
|
unsubscribe = await node.relay.subscribe([decoder], callback);
|
||||||
|
unsubscribeButton.disabled = false;
|
||||||
|
subscribeButton.disabled = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
unsubscribeButton.onclick = async () => {
|
||||||
|
await unsubscribe();
|
||||||
|
unsubscribe = undefined;
|
||||||
|
unsubscribeButton.disabled = true;
|
||||||
|
subscribeButton.disabled = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
sendButton.onclick = async () => {
|
||||||
|
const text = textInput.value;
|
||||||
|
|
||||||
|
await node.relay.send(encoder, {
|
||||||
|
payload: utf8ToBytes(text),
|
||||||
|
});
|
||||||
|
console.log("Message sent!");
|
||||||
|
textInput.value = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const GONODE = "16Uiu2HAmUdyH4P2UhgX3hTCbeeJHpxxfsn8EdyHkMnPyb54a92jZ";
|
||||||
|
const root = `/ip4/192.168.0.101/tcp/60001/ws/p2p/${GONODE}`;
|
||||||
|
|
||||||
|
remoteMultiAddrDiv.value = root;
|
||||||
|
|
||||||
|
window.dial = (id) => node.dial(`${root}/p2p-circuit/webrtc/p2p/${id}`);
|
||||||
|
|
||||||
|
window.drop = () =>
|
||||||
|
Array.from(node.libp2p.components.connectionManager.connections.entries())
|
||||||
|
.filter((c) => c[0].toString() === GONODE)
|
||||||
|
.map((c) => console.log(c[1][0].close()));
|
||||||
|
/*
|
||||||
|
/ip4/127.0.0.1/tcp/60001/ws/p2p/16Uiu2HAm3s9fFHbcVrKQz2h5fMAsUzm3AeCUxg52e3SBFjt7q4Gg
|
||||||
|
/ip4/127.0.0.1/tcp/60001/ws/p2p/16Uiu2HAm3s9fFHbcVrKQz2h5fMAsUzm3AeCUxg52e3SBFjt7q4Gg/p2p-circuit/p2p/12D3KooWMghpY8592CnQQTyg4fiSJcUuA7Pu8n8YzUPYaLjzH7Yo/p2p-circuit/webrtc/p2p/12D3KooWMghpY8592CnQQTyg4fiSJcUuA7Pu8n8YzUPYaLjzH7Yo
|
||||||
|
*/
|
||||||
19
examples/relay-rtc/manifest.json
Normal file
19
examples/relay-rtc/manifest.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"name": "Light JS",
|
||||||
|
"description": "Send messages between several users (or just one) using light client targeted protocols.",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "favicon.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#ffffff",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
10568
examples/relay-rtc/package-lock.json
generated
Normal file
10568
examples/relay-rtc/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
26
examples/relay-rtc/package.json
Normal file
26
examples/relay-rtc/package.json
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "light",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "**Demonstrates**:",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "webpack --config webpack.config.js",
|
||||||
|
"start": "webpack-dev-server"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"@libp2p/webrtc": "^2.0.11",
|
||||||
|
"@libp2p/websockets": "^6.0.3",
|
||||||
|
"@waku/dns-discovery": "^0.0.15",
|
||||||
|
"@waku/sdk": "^0.0.17",
|
||||||
|
"libp2p": "^0.45.9"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"copy-webpack-plugin": "^11.0.0",
|
||||||
|
"webpack": "^5.74.0",
|
||||||
|
"webpack-cli": "^4.10.0",
|
||||||
|
"webpack-dev-server": "^4.11.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
19
examples/relay-rtc/webpack.config.js
Normal file
19
examples/relay-rtc/webpack.config.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: "./index.js",
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, "build"),
|
||||||
|
filename: "index.js",
|
||||||
|
},
|
||||||
|
experiments: {
|
||||||
|
asyncWebAssembly: true,
|
||||||
|
},
|
||||||
|
mode: "development",
|
||||||
|
plugins: [
|
||||||
|
new CopyWebpackPlugin({
|
||||||
|
patterns: ["index.html", "favicon.ico", "favicon.png", "manifest.json"],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user