feat: remove lab.waku.org related examples (#295)

This commit is contained in:
Sasha 2024-02-14 01:32:00 +01:00 committed by GitHub
parent fa92477fff
commit 427db17096
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
126 changed files with 1 additions and 120518 deletions

View File

@ -14,13 +14,7 @@ jobs:
example: example:
[ [
eth-pm, eth-pm,
relay-angular-chat, store-reactjs-chat
relay-reactjs-chat,
store-reactjs-chat,
web-chat,
noise-js,
noise-rtc,
relay-direct-rtc
] ]
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:

View File

@ -6,12 +6,6 @@ Here is the list of the examples using [`js-waku`](https://www.npmjs.com/package
See https://examples.waku.org/ for more examples. See https://examples.waku.org/ for more examples.
### Web Chat App
- [code](examples/web-chat)
- [website](https://examples.waku.org/web-chat)
- Demonstrates: Group chat, React/TypeScript, Relay, Store.
### Ethereum Private Messaging ### Ethereum Private Messaging
End-to-end encrypted communication between two Ethereum addresses. End-to-end encrypted communication between two Ethereum addresses.
@ -20,38 +14,6 @@ End-to-end encrypted communication between two Ethereum addresses.
- [website](https://examples.waku.org/eth-pm) - [website](https://examples.waku.org/eth-pm)
- Demonstrates: Private Messaging, React/TypeScript, Light Client, Signature with Web3, Asymmetric Encryption. - Demonstrates: Private Messaging, React/TypeScript, Light Client, Signature with Web3, Asymmetric Encryption.
### Waku Light Client in JavaScript
Send messages between several users (or just one) using light client targetted protocols.
- [code](examples/light-js)
- [website](https://examples.waku.org/light-js)
- Demonstrates: Waku Light node: Filter + Light Push, Pure Javascript/HTML using ESM/unpkg bundle.
### Minimal Angular (v13) Waku Relay
A barebone messaging app to illustrate the seamless integration of `js-waku` into AngularJS.
- [code](examples/relay-angular-chat)
- [website](https://examples.waku.org/relay-angular-chat)
- Demonstrates: Group messaging, Angular, Waku Relay, Protobuf using `protobufjs`, No async/await syntax.
### Waku Relay in JavaScript
This example uses Waku Relay to send and receive simple text messages.
- [code](examples/relay-js)
- [website](https://examples.waku.org/relay-js)
- Demonstrates: Waku Relay, Pure Javascript/HTML using ESM/unpkg bundle.
### Waku Relay in ReactJS
A barebone chat app to illustrate the seamless integration of `js-waku` into ReactJS.
- [code](examples/relay-reactjs-chat)
- [website](https://examples.waku.org/relay-reactjs-chat)
- Demonstrates: Group chat, React/JavaScript, Waku Relay, Protobuf using `protobufjs`.
### Using [RLN](https://rfc.vac.dev/spec/32/) in JavaScript ### Using [RLN](https://rfc.vac.dev/spec/32/) in JavaScript
> Rate limiting nullifier (RLN) is a construct based on zero-knowledge proofs > Rate limiting nullifier (RLN) is a construct based on zero-knowledge proofs

8
ci/Jenkinsfile vendored
View File

@ -36,21 +36,13 @@ pipeline {
stage('Examples') { stage('Examples') {
parallel { parallel {
stage('eth-pm') { steps { script { buildExample() } } } stage('eth-pm') { steps { script { buildExample() } } }
stage('relay-angular-chat') { steps { script { buildExample() } } }
stage('relay-reactjs-chat') { steps { script { buildExample() } } }
stage('store-reactjs-chat') { steps { script { buildExample() } } } stage('store-reactjs-chat') { steps { script { buildExample() } } }
stage('web-chat') { steps { script { buildExample() } } }
stage('noise-js') { steps { script { buildExample() } } }
stage('noise-rtc') { steps { script { buildExample() } } }
stage('relay-direct-rtc') { steps { script { buildExample() } } }
} }
} }
stage('HTML Examples') { stage('HTML Examples') {
parallel { parallel {
stage('relay-js') { steps { script { copyExample() } } }
stage('store-js') { steps { script { copyExample() } } } stage('store-js') { steps { script { copyExample() } } }
stage('light-js') { steps { script { copyExample() } } }
stage('light-chat') { steps { script { copyExample() } } } stage('light-chat') { steps { script { copyExample() } } }
} }
} }

View File

@ -1,13 +0,0 @@
# 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/.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

@ -1,280 +0,0 @@
<!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>Select Peer</h2>
</div>
<div>
<button id="getPeersButton" type="button">Refresh Peers</button>
<select id="peer-select">
<option value=""></option>
</select>
</div>
<div>
<label for="remote-multiaddr">Remote peer's multiaddr</label>
</div>
<div style="margin-right: 1em">
<input
id="remote-multiaddr"
type="text"
value=""
style="width: 100%; max-width: 900px"
/>
</div>
<button disabled id="dial" type="button">Dial</button>
<div>
<h2>Remote Peers</h2>
</div>
<div id="remote-peer-id"></div>
<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>
<div>
<h2>Store</h2>
</div>
<button disabled id="queryStoreButton" type="button">
Retrieve past messages
</button>
<script src="https://unpkg.com/@multiformats/multiaddr@12.1.1/dist/index.min.js"></script>
<script type="module">
import {
createLightNode,
waitForRemotePeer,
createEncoder,
createDecoder,
utf8ToBytes,
bytesToUtf8,
} from "https://unpkg.com/@waku/sdk@0.0.20/bundle/index.js";
import {
enrTree,
DnsNodeDiscovery,
} from "https://unpkg.com/@waku/dns-discovery@0.0.16/bundle/index.js";
import { messageHash } from "https://unpkg.com/@waku/message-hash@0.1.8/bundle/index.js";
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 queryStoreButton = document.getElementById("queryStoreButton");
const messagesDiv = document.getElementById("messages");
const textInput = document.getElementById("textInput");
const sendButton = document.getElementById("sendButton");
const getPeersButton = document.getElementById("getPeersButton");
const peersSelector = document.getElementById("peer-select");
const ContentTopic = "/js-waku-examples/1/chat/utf8";
const decoder = createDecoder(ContentTopic);
const encoder = createEncoder({ contentTopic: ContentTopic });
// Each key is a unique identifier for the message. Each value is an obj { text, timestamp }
let messages = {};
let unsubscribe;
const updateMessages = (msgs, div) => {
div.innerHTML = "<ul>";
Object.values(msgs)
.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
.forEach(
(msg) =>
(div.innerHTML +=
"<li>" + `${msg.text} - ${msg.timestamp}` + "</li>")
);
div.innerHTML += "</ul>";
};
try {
await getPeers();
} catch (e) {
console.log("Failed to find a peer", e);
remoteMultiAddrDiv.value =
"/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/8000/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm";
}
statusDiv.innerHTML = "<p>Creating Waku node.</p>";
const node = await createLightNode();
statusDiv.innerHTML = "<p>Starting Waku node.</p>";
await node.start();
window.waku = node;
console.info(
"Use window.waku to access the waku node running in the browser directly through the console."
);
// Queries all peers from libp2p peer store and updates list of connected peers
const updatePeersList = async () => {
// Generate <p> element with connection string from each peer
const peers = await node.libp2p.peerStore.all();
const peerIdElements = peers.map((peer) => {
const element = document.createElement("p");
element.textContent = `${peer.addresses[1].multiaddr}/p2p/${peer.id}`;
return element;
});
// Update elements displaying list of peers
remotePeerIdDiv.replaceChildren(...peerIdElements);
};
// Refreshes list of connected peers each time a new one is detected
node.store.addLibp2pEventListener("peer:connect", async (event) => {
const peerId = event.detail;
console.log(`Peer connected with peer id: ${peerId}`);
// Wait half a second after receiving event for peer to show up in peer store
setTimeout(async () => {
updatePeersList();
}, 500);
// Update status
statusDiv.innerHTML = `<p>Peer dialed: ${peerId}</p>`;
// Enable send and subscribe inputs as we are now connected to a peer
textInput.disabled = false;
sendButton.disabled = false;
subscribeButton.disabled = false;
queryStoreButton.disabled = false;
});
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>";
let multiaddr;
try {
multiaddr = MultiformatsMultiaddr.multiaddr(ma);
} catch (err) {
statusDiv.innerHTML = "<p>Error: invalid multiaddr provided</p>";
throw err;
}
await node.dial(multiaddr, ["filter", "lightpush", "store"]);
};
const messageReceivedCallback = (wakuMessage) => {
// create a unique key for the message
const msgHash =
bytesToUtf8(messageHash(ContentTopic, wakuMessage)) +
wakuMessage.proto.timestamp;
const text = bytesToUtf8(wakuMessage.payload);
// store message by its key
messages[msgHash + wakuMessage.proto.timestamp] = {
text,
timestamp: wakuMessage.timestamp,
};
// call function to refresh display of messages
updateMessages(messages, messagesDiv);
};
subscribeButton.onclick = async () => {
unsubscribe = await node.filter.subscribe(
[decoder],
messageReceivedCallback
);
unsubscribeButton.disabled = false;
subscribeButton.disabled = true;
};
queryStoreButton.onclick = async () => {
await node.store.queryWithOrderedCallback(
[decoder],
messageReceivedCallback
);
};
unsubscribeButton.onclick = async () => {
await unsubscribe();
unsubscribe = undefined;
unsubscribeButton.disabled = true;
subscribeButton.disabled = false;
};
sendButton.onclick = async () => {
const text = textInput.value;
await node.lightPush.send(encoder, {
payload: utf8ToBytes(text),
});
console.log("Message sent!");
textInput.value = null;
};
getPeersButton.onclick = async () => {
await getPeers(statusDiv, remoteMultiAddrDiv);
};
peersSelector.addEventListener("change", function (event) {
remoteMultiAddrDiv.value = event.target.value;
});
async function getPeers() {
// Display status
statusDiv.innerHTML = "<p>Discovering peers</p>";
// Clear all options in select element
peersSelector.innerHTML = "";
// Get peers using DNS discovery
const defaultNodeCount = 5;
const dnsDiscovery = await DnsNodeDiscovery.dnsOverHttp();
const peers = await dnsDiscovery.getPeers([enrTree["TEST"]], {
relay: defaultNodeCount,
store: defaultNodeCount,
filter: defaultNodeCount,
lightPush: defaultNodeCount,
});
// Create an option element for each peer's multiaddr and append to select element
const optionElements = peers.map((peer) => {
const optionElement = document.createElement("option");
optionElement.value = `${peer.multiaddrs[1]}/p2p/${peer.peerId}`;
optionElement.text = `${peer.multiaddrs[1]}/p2p/${peer.peerId}`;
return optionElement;
});
peersSelector.append(...optionElements);
// Set first peer as selected
peersSelector.options[0].selected = true;
remoteMultiAddrDiv.value = peersSelector.options[0].value;
statusDiv.innerHTML = "<p>Peers discovered</p>";
}
</script>
</body>
</html>

View File

@ -1,19 +0,0 @@
{
"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"
}

View File

@ -1,7 +0,0 @@
# Waku Noise Pairing Example App
```
npm install
npm start
```
Browse to http://localhost:8080

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

@ -1,200 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Waku Noise</title>
<link rel="apple-touch-icon" href="./favicon.png" />
<link rel="manifest" href="./manifest.json" />
<link rel="icon" href="./favicon.ico" />
<style>
* {
margin: 0;
padding: 0;
word-wrap: break-word;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
html {
font-size: 16px;
overflow: hidden;
}
body {
display: flex;
align-items: center;
padding: 10px;
flex-direction: column;
justify-content: center;
}
.container {
width: 100%;
min-width: 300px;
max-width: 800px;
height: 100%;
display: flex;
flex-direction: column;
align-content: space-between;
}
h2 {
text-align: center;
margin-bottom: 5px;
}
h3 {
margin-bottom: 10px;
}
h3:last-of-type {
margin-bottom: 20px;
}
h2 span,
h3 span {
font-weight: normal;
}
.progress {
color: #9ea13b;
}
.success {
color: #3ba183;
}
.error {
color: #c84740;
}
button.progress {
color: white;
background-color: #9ea13b;
}
button.success {
color: white;
background-color: #3ba183;
}
button.error {
color: white;
background-color: #c84740;
}
.pairingInfo {
display: flex;
flex-direction: column;
align-items: center;
}
.pairingInfo input {
display: block;
min-width: 250px;
width: 100%;
max-width: 600px;
font-size: 1.1rem;
line-height: 1.5rem;
padding: 5px;
margin-bottom: 10px;
}
.pairingInfo button {
flex-grow: 1;
cursor: pointer;
padding: 10px;
}
.pairingInfo button + button {
margin-left: 5px;
}
.chatArea {
}
.chatArea ul {
margin-bottom: 30px;
list-style: none;
}
.chatArea ul li + li {
margin-top: 5px;
}
.chatArea div {
display: flex;
flex-direction: column;
}
.chatArea div > * {
font-size: 1.1rem;
line-height: 1.5rem;
padding: 5px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="status">
<h3>
<b>Waku Node Status:</b> <span id="waku-status">connecting...</span>
</h3>
<h3 id="handshake-span">
<b>Handshake Status:</b>
<span id="handshake-status" class="progress">waiting for waku</span>
</h3>
</div>
<div class="pairingInfo" id="qr-url-container" style="display: none">
<h2>Pairing information</h2>
<input
type="text"
id="qr-url"
readonly
placeholder="generating URL..."
/>
<div>
<button id="copy-url" style="width: 100px">Copy URL</button>
<button id="open-tab" style="width: 150px">Open in new tab</button>
</div>
<canvas id="qr-canvas"></canvas>
</div>
<div class="chatArea" id="chat-area" style="display: none">
<h2>Chat</h2>
<ul id="messages"></ul>
<div>
<input id="nick-input" placeholder="Choose a nickname" type="text" />
<textarea
id="text-input"
placeholder="Type your message here"
type="text"
></textarea>
<button id="send-btn" type="button" disabled>Send message</button>
</div>
</div>
</div>
<div>
<p>
NOTICE: you can try also try to pair your browser with a
<a href="https://github.com/waku-org/go-waku/tree/master/examples/noise"
>go-waku based node</a
>.
</p>
</div>
<script src="./index.js"></script>
</body>
</html>

View File

@ -1,274 +0,0 @@
import { createLightNode, waitForRemotePeer } from "@waku/sdk";
import * as utils from "@waku/utils/bytes";
import * as noise from "@waku/noise";
import protobuf from "protobufjs";
import QRCode from "qrcode";
// Protobuf
const ProtoChatMessage = new protobuf.Type("ChatMessage")
.add(new protobuf.Field("timestamp", 1, "uint64"))
.add(new protobuf.Field("nick", 2, "string"))
.add(new protobuf.Field("text", 3, "bytes"));
main();
async function main() {
const ui = initUI();
ui.waku.connecting();
// Starting the node
const node = await createLightNode({
defaultBootstrap: true,
});
try {
await node.start();
await waitForRemotePeer(node, ["filter", "lightpush"]);
ui.waku.connected();
const myStaticKey = noise.generateX25519KeyPair();
const urlPairingInfo = getPairingInfoFromURL();
const pairingObj = new noise.WakuPairing(
node.lightPush,
node.filter,
myStaticKey,
urlPairingInfo || new noise.ResponderParameters()
);
const pExecute = pairingObj.execute(120000); // timeout after 2m
scheduleHandshakeAuthConfirmation(pairingObj, ui);
let encoder;
let decoder;
try {
ui.handshake.waiting();
if (!urlPairingInfo) {
const pairingURL = buildPairingURLFromObj(pairingObj);
ui.shareInfo.setURL(pairingURL);
ui.shareInfo.renderQR(pairingURL);
ui.shareInfo.show();
}
[encoder, decoder] = await pExecute;
ui.handshake.connected();
ui.shareInfo.hide();
} catch (err) {
ui.handshake.error(err.message);
ui.hide();
}
ui.message.display();
await node.filter.subscribe(
[decoder],
ui.message.onReceive.bind(ui.message)
);
ui.message.onSend(async (text, nick) => {
const timestamp = Math.floor(Date.now() / 1000);
const message = ProtoChatMessage.create({
nick,
timestamp,
text: utils.utf8ToBytes(text),
});
const payload = ProtoChatMessage.encode(message).finish();
await node.lightPush.send(encoder, { payload, timestamp });
});
} catch (err) {
ui.waku.error(err.message);
ui.hide();
}
}
function buildPairingURLFromObj(pairingObj) {
const pInfo = pairingObj.getPairingInfo();
// Data to encode in the QR code. The qrMessageNametag too to the QR string (separated by )
const messageNameTagParam = `messageNameTag=${utils.bytesToHex(
pInfo.qrMessageNameTag
)}`;
const qrCodeParam = `qrCode=${encodeURIComponent(pInfo.qrCode)}`;
return `${window.location.href}?${messageNameTagParam}&${qrCodeParam}`;
}
function getPairingInfoFromURL() {
const urlParams = new URLSearchParams(window.location.search);
const messageNameTag = urlParams.get("messageNameTag");
const qrCodeString = urlParams.get("qrCode");
if (!(messageNameTag && qrCodeString)) {
return undefined;
}
return new noise.InitiatorParameters(
decodeURIComponent(qrCodeString),
utils.hexToBytes(messageNameTag)
);
}
async function scheduleHandshakeAuthConfirmation(pairingObj, ui) {
const authCode = await pairingObj.getAuthCode();
ui.handshake.connecting();
pairingObj.validateAuthCode(confirm("Confirm that authcode is: " + authCode));
}
function initUI() {
const messagesList = document.getElementById("messages");
const nicknameInput = document.getElementById("nick-input");
const textInput = document.getElementById("text-input");
const sendButton = document.getElementById("send-btn");
const chatArea = document.getElementById("chat-area");
const wakuStatusSpan = document.getElementById("waku-status");
const handshakeStatusSpan = document.getElementById("handshake-status");
const qrCanvas = document.getElementById("qr-canvas");
const qrUrlContainer = document.getElementById("qr-url-container");
const qrUrl = document.getElementById("qr-url");
const copyURLButton = document.getElementById("copy-url");
const openTabButton = document.getElementById("open-tab");
copyURLButton.onclick = () => {
const copyText = document.getElementById("qr-url"); // need to get it each time otherwise copying does not work
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
};
openTabButton.onclick = () => {
window.open(qrUrl.value, "_blank");
};
const disableChatUIStateIfNeeded = () => {
const readyToSend = nicknameInput.value !== "";
textInput.disabled = !readyToSend;
sendButton.disabled = !readyToSend;
};
nicknameInput.onchange = disableChatUIStateIfNeeded;
nicknameInput.onblur = disableChatUIStateIfNeeded;
return {
shareInfo: {
setURL(url) {
qrUrl.value = url;
},
hide() {
qrUrlContainer.style.display = "none";
},
show() {
qrUrlContainer.style.display = "flex";
},
renderQR(url) {
QRCode.toCanvas(qrCanvas, url, (err) => {
if (err) {
throw err;
}
});
},
},
waku: {
_val(msg) {
wakuStatusSpan.innerText = msg;
},
_class(name) {
wakuStatusSpan.className = name;
},
connecting() {
this._val("connecting...");
this._class("progress");
},
connected() {
this._val("connected");
this._class("success");
},
error(msg) {
this._val(msg);
this._class("error");
},
},
handshake: {
_val(val) {
handshakeStatusSpan.innerText = val;
},
_class(name) {
handshakeStatusSpan.className = name;
},
error(msg) {
this._val(msg);
this._class("error");
},
waiting() {
this._val("waiting for handshake...");
this._class("progress");
},
generating() {
this._val("generating QR code...");
this._class("progress");
},
connecting() {
this._val("executing handshake...");
this._class("progress");
},
connected() {
this._val("handshake completed!");
this._class("success");
},
},
message: {
_render({ time, text, nick }) {
messagesList.innerHTML += `
<li>
(${nick})
<strong>${text}</strong>
<i>[${new Date(time).toISOString()}]</i>
</li>
`;
},
_status(text, className) {
sendButton.className = className;
},
onReceive({ payload }) {
const { timestamp, nick, text } = ProtoChatMessage.decode(payload);
this._render({
nick,
time: timestamp * 1000,
text: utils.bytesToUtf8(text),
});
},
onSend(cb) {
sendButton.addEventListener("click", async () => {
try {
this._status("sending...", "progress");
await cb(textInput.value, nicknameInput.value);
this._status("sent", "success");
this._render({
time: Date.now(), // a bit different from what receiver will see but for the matter of example is good enough
text: textInput.value,
nick: nicknameInput.value,
});
textInput.value = "";
} catch (e) {
this._status(`error: ${e.message}`, "error");
}
});
},
display() {
chatArea.style.display = "block";
this._status("waiting for input", "progress");
},
},
hide() {
this.shareInfo.hide();
chatArea.style.display = "none";
},
};
}

View File

@ -1,19 +0,0 @@
{
"name": "Waku Noise",
"description": "Example showing Waku noise capabilities.",
"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"
}

File diff suppressed because it is too large Load Diff

View File

@ -1,24 +0,0 @@
{
"name": "@waku/noise-example",
"private": true,
"version": "0.1.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server"
},
"dependencies": {
"@waku/sdk": "0.0.18",
"@waku/noise": "0.0.3-31510da",
"@waku/utils": "0.0.10",
"protobufjs": "^7.1.2",
"qrcode": "^1.5.1"
},
"devDependencies": {
"copy-webpack-plugin": "^11.0.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
}

View File

@ -1,19 +0,0 @@
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"],
}),
],
};

Binary file not shown.

View File

@ -1,11 +0,0 @@
State of this example: **work in progress**
What's done:
- By using `js-noise` users can establish secure communication channel.
- This channel is used to exchange `offer/answer` to initiate direct WebRTC connection.
What should be done:
- `STUN` server: in order not to loose benefits of peer-to-peer protocols used underneath we should find a way to be able to retrieve coordinates of a user to build `offer/answer` by not involving one `STUN` server for it;
- `TURN` server: similarly to prev point we should be able to cover a need to create WebRTC connection for users who are behind secure `NAT` and are not able to communicated just as it is.
Additional reading that explains why `STUN/TURN` is not easily removable from the equation: https://github.com/libp2p/specs/pull/497/files#diff-2cb0b0dcc282bd123b21f5a0610e8a01b516fc453b95c655cf7e16734f2f7b11R48-R53

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

@ -1,198 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Waku NoiseRTC</title>
<link rel="apple-touch-icon" href="./favicon.png" />
<link rel="manifest" href="./manifest.json" />
<link rel="icon" href="./favicon.ico" />
<style>
* {
margin: 0;
padding: 0;
word-wrap: break-word;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
html {
font-size: 16px;
overflow: hidden;
}
body {
display: flex;
align-items: center;
padding: 10px;
flex-direction: column;
justify-content: center;
}
.container {
width: 100%;
min-width: 300px;
max-width: 800px;
height: 100%;
display: flex;
flex-direction: column;
align-content: space-between;
}
h2 {
text-align: center;
margin-bottom: 5px;
}
h3 {
margin-bottom: 10px;
}
h3:last-of-type {
margin-bottom: 20px;
}
h2 span,
h3 span {
font-weight: normal;
}
.progress {
color: #9ea13b;
}
.success {
color: #3ba183;
}
.error {
color: #c84740;
}
button.progress {
color: white;
background-color: #9ea13b;
}
button.success {
color: white;
background-color: #3ba183;
}
button.error {
color: white;
background-color: #c84740;
}
.pairingInfo {
display: flex;
flex-direction: column;
align-items: center;
}
.pairingInfo input {
display: block;
min-width: 250px;
width: 100%;
max-width: 600px;
font-size: 1.1rem;
line-height: 1.5rem;
padding: 5px;
margin-bottom: 10px;
}
.pairingInfo button {
flex-grow: 1;
cursor: pointer;
padding: 10px;
}
.pairingInfo button + button {
margin-left: 5px;
}
.chatArea {
}
.chatArea ul {
margin-bottom: 30px;
list-style: none;
}
.chatArea ul li + li {
margin-top: 5px;
}
.chatArea div {
display: flex;
flex-direction: column;
}
.chatArea div > * {
font-size: 1.1rem;
line-height: 1.5rem;
padding: 5px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="status">
<h3>
<b>Waku Node Status:</b>
<span id="waku-status" class="progress">connecting...</span>
</h3>
<h3 id="handshake-span">
<b>Handshake Status:</b>
<span id="handshake-status" class="progress">waiting for waku</span>
</h3>
<h3>
<b>RTC Status:</b>
<span id="rtc-status" class="progress"
>waiting for noise to be established</span
>
</h3>
</div>
<div class="pairingInfo" id="qr-url-container" style="display: none">
<h2>Pairing information</h2>
<input
type="text"
id="qr-url"
readonly
placeholder="generating URL..."
/>
<div>
<button id="copy-url" style="width: 100px">Copy URL</button>
<button id="open-tab" style="width: 100px">Open in new</button>
</div>
<canvas id="qr-canvas"></canvas>
</div>
<div class="chatArea" id="chat-area" style="display: none">
<h2>Chat</h2>
<ul id="messages"></ul>
<div>
<input id="nick-input" placeholder="Choose a nickname" type="text" />
<textarea
id="text-input"
placeholder="Type your message here"
type="text"
></textarea>
<button id="send-btn" type="button" disabled>Send message</button>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

View File

@ -1,464 +0,0 @@
import { createLightNode, waitForRemotePeer } from "@waku/sdk";
import * as utils from "@waku/utils/bytes";
import * as noise from "@waku/noise";
import protobuf from "protobufjs";
import QRCode from "qrcode";
// Protobuf
const ProtoMessage = new protobuf.Type("Message").add(
new protobuf.Field("data", 3, "string")
);
main();
async function main() {
const ui = initUI();
ui.waku.connecting();
// Starting the node
const node = await createLightNode({ defaultBootstrap: true });
try {
await node.start();
await waitForRemotePeer(node, ["filter", "lightpush"]);
ui.waku.connected();
const myStaticKey = noise.generateX25519KeyPair();
const urlPairingInfo = getPairingInfoFromURL();
const pairingObj = new noise.WakuPairing(
node.lightPush,
node.filter,
myStaticKey,
urlPairingInfo || new noise.ResponderParameters()
);
const pExecute = pairingObj.execute(120000); // timeout after 2m
scheduleHandshakeAuthConfirmation(pairingObj, ui);
let sendWakuMessage;
let listenToWakuMessages;
try {
ui.handshake.waiting();
if (!urlPairingInfo) {
const pairingURL = buildPairingURLFromObj(pairingObj);
ui.shareInfo.setURL(pairingURL);
ui.shareInfo.renderQR(pairingURL);
ui.shareInfo.show();
}
[sendWakuMessage, listenToWakuMessages] = await buildWakuMessage(
node,
pExecute
);
ui.handshake.connected();
ui.shareInfo.hide();
} catch (err) {
ui.handshake.error(err.message);
ui.hide();
}
ui.message.display();
const { peerConnection, sendMessage: sendRTCMessage } = initRTC({
ui,
onReceive: ui.message.onReceive.bind(ui.message),
});
peerConnection.onicecandidate = async (event) => {
if (event.candidate) {
console.log("candidate sent");
try {
ui.rtc.sendingCandidate();
await sendWakuMessage({
type: "candidate",
candidate: event.candidate,
});
} catch (error) {
ui.rtc.error(error.message);
}
}
};
const sendOffer = async () => {
console.log("offer sent");
ui.rtc.sendingOffer();
try {
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
await sendWakuMessage({
type: "offer",
offer,
});
} catch (error) {
ui.rtc.error(error.message);
}
};
const sendAnswer = async (data) => {
console.log("answer sent");
ui.rtc.sendingAnswer();
try {
await peerConnection.setRemoteDescription(
new RTCSessionDescription(data.offer)
);
const answer = await peerConnection.createAnswer();
peerConnection.setLocalDescription(answer);
await sendWakuMessage({
type: "answer",
answer,
});
} catch (error) {
ui.rtc.error(error.message);
}
};
const receiveAnswer = async (data) => {
try {
console.log("answer received");
await peerConnection.setRemoteDescription(
new RTCSessionDescription(data.answer)
);
console.log("answer saved");
await sendWakuMessage({
type: "ready",
text: "received answer",
});
} catch (error) {
ui.rtc.error(error.message);
}
};
const receiveCandidate = async (data) => {
try {
console.log("candidate saved");
await peerConnection.addIceCandidate(
new RTCIceCandidate(data.candidate)
);
} catch (error) {
ui.rtc.error(error.message);
}
};
const handleWakuMessages = async (data) => {
if (data.type === "offer") {
await sendAnswer(data);
}
if (data.type === "answer") {
await receiveAnswer(data);
}
if (data.type === "ready") {
console.log("RTC: partner is", data.text);
}
if (data.type === "candidate") {
await receiveCandidate(data);
}
};
await listenToWakuMessages(handleWakuMessages);
ui.message.onSend(sendRTCMessage);
// if we are initiator of Noise handshake
// let's initiate Web RTC as well
if (!urlPairingInfo) {
await sendOffer();
}
} catch (err) {
ui.waku.error(err.message);
ui.hide();
}
}
function buildPairingURLFromObj(pairingObj) {
const pInfo = pairingObj.getPairingInfo();
// Data to encode in the QR code. The qrMessageNametag too to the QR string (separated by )
const messageNameTagParam = `messageNameTag=${utils.bytesToHex(
pInfo.qrMessageNameTag
)}`;
const qrCodeParam = `qrCode=${encodeURIComponent(pInfo.qrCode)}`;
return `${window.location.href}?${messageNameTagParam}&${qrCodeParam}`;
}
function getPairingInfoFromURL() {
const urlParams = new URLSearchParams(window.location.search);
const messageNameTag = urlParams.get("messageNameTag");
const qrCodeString = urlParams.get("qrCode");
if (!(messageNameTag && qrCodeString)) {
return undefined;
}
return new noise.InitiatorParameters(
decodeURIComponent(qrCodeString),
utils.hexToBytes(messageNameTag)
);
}
async function scheduleHandshakeAuthConfirmation(pairingObj, ui) {
const authCode = await pairingObj.getAuthCode();
ui.handshake.connecting();
pairingObj.validateAuthCode(confirm("Confirm that authcode is: " + authCode));
}
async function buildWakuMessage(node, noiseExecute) {
const [encoder, decoder] = await noiseExecute;
const sendMessage = async (message) => {
let payload = ProtoMessage.create({
data: JSON.stringify(message),
});
payload = ProtoMessage.encode(payload).finish();
return node.lightPush.send(encoder, { payload });
};
const listenToMessages = async (fn) => {
return node.filter.subscribe([decoder], ({ payload }) => {
const { data } = ProtoMessage.decode(payload);
fn(JSON.parse(data));
});
};
return [sendMessage, listenToMessages];
}
function initRTC({ ui, onReceive }) {
const configuration = {
iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
};
const peerConnection = new RTCPeerConnection(configuration);
const sendChannel = peerConnection.createDataChannel("chat");
let receiveChannel;
sendChannel.onopen = (event) => {
ui.rtc.ready();
console.log("onopen send", event);
};
peerConnection.ondatachannel = (event) => {
receiveChannel = event.channel;
receiveChannel.onmessage = (event) => {
onReceive(JSON.parse(event.data));
};
receiveChannel.onopen = (event) => {
ui.rtc.ready();
console.log("onopen receive", event);
};
};
const sendMessage = (text, nick) => {
sendChannel.send(JSON.stringify({ text, nick, timestamp: Date.now() }));
};
return {
peerConnection,
sendChannel,
receiveChannel,
sendMessage,
};
}
function initUI() {
const messagesList = document.getElementById("messages");
const nicknameInput = document.getElementById("nick-input");
const textInput = document.getElementById("text-input");
const sendButton = document.getElementById("send-btn");
const chatArea = document.getElementById("chat-area");
const wakuStatusSpan = document.getElementById("waku-status");
const handshakeStatusSpan = document.getElementById("handshake-status");
const qrCanvas = document.getElementById("qr-canvas");
const qrUrlContainer = document.getElementById("qr-url-container");
const qrUrl = document.getElementById("qr-url");
const copyURLButton = document.getElementById("copy-url");
const openTabButton = document.getElementById("open-tab");
const rtcStatus = document.getElementById("rtc-status");
const connectChat = document.getElementById("connect-chat-btn");
copyURLButton.onclick = () => {
const copyText = document.getElementById("qr-url"); // need to get it each time otherwise copying does not work
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
};
openTabButton.onclick = () => {
window.open(qrUrl.value, "_blank");
};
const disableChatUIStateIfNeeded = () => {
const readyToSend = nicknameInput.value !== "";
textInput.disabled = !readyToSend;
sendButton.disabled = !readyToSend;
};
nicknameInput.onchange = disableChatUIStateIfNeeded;
nicknameInput.onblur = disableChatUIStateIfNeeded;
return {
shareInfo: {
setURL(url) {
qrUrl.value = url;
},
hide() {
qrUrlContainer.style.display = "none";
},
show() {
qrUrlContainer.style.display = "flex";
},
renderQR(url) {
QRCode.toCanvas(qrCanvas, url, (err) => {
if (err) {
throw err;
}
});
},
},
waku: {
_val(msg) {
wakuStatusSpan.innerText = msg;
},
_class(name) {
wakuStatusSpan.className = name;
},
connecting() {
this._val("connecting...");
this._class("progress");
},
connected() {
this._val("connected");
this._class("success");
},
error(msg) {
this._val(msg);
this._class("error");
},
},
handshake: {
_val(val) {
handshakeStatusSpan.innerText = val;
},
_class(name) {
handshakeStatusSpan.className = name;
},
error(msg) {
this._val(msg);
this._class("error");
},
waiting() {
this._val("waiting for handshake...");
this._class("progress");
},
generating() {
this._val("generating QR code...");
this._class("progress");
},
connecting() {
this._val("executing handshake...");
this._class("progress");
},
connected() {
this._val("handshake completed!");
this._class("success");
},
},
message: {
_render({ time, text, nick }) {
messagesList.innerHTML += `
<li>
(${nick})
<strong>${text}</strong>
<i>[${new Date(time).toISOString()}]</i>
</li>
`;
},
_status(text, className) {
sendButton.className = className;
},
onReceive(data) {
const { timestamp, nick, text } = data;
this._render({
nick,
time: timestamp,
text,
});
},
onSend(cb) {
sendButton.addEventListener("click", async () => {
try {
this._status("sending...", "progress");
await cb(textInput.value, nicknameInput.value);
this._status("sent", "success");
this._render({
time: Date.now(), // a bit different from what receiver will see but for the matter of example is good enough
text: textInput.value,
nick: nicknameInput.value,
});
textInput.value = "";
} catch (e) {
this._status(`error: ${e.message}`, "error");
}
});
},
display() {
chatArea.style.display = "block";
this._status("waiting for input", "progress");
},
},
rtc: {
_val(msg) {
rtcStatus.innerText = msg;
},
_class(name) {
rtcStatus.className = name;
},
sendingOffer() {
this._val("sending offer");
this._class("progress");
},
sendingAnswer() {
this._val("sending answer");
this._class("progress");
},
sendingCandidate() {
this._val("sending ice candidate");
this._class("progress");
},
ready() {
this._val("ready");
this._class("success");
},
error(msg) {
this._val(msg);
this._class("error");
},
onConnect(cb) {
connectChat.addEventListener("click", cb);
},
},
hide() {
this.shareInfo.hide();
chatArea.style.display = "none";
},
};
}

View File

@ -1,19 +0,0 @@
{
"name": "Waku NoiseRTC",
"description": "Example showing WebRTC with Waku Noise.",
"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"
}

File diff suppressed because it is too large Load Diff

View File

@ -1,24 +0,0 @@
{
"name": "@waku/noise-rtc",
"private": true,
"version": "0.1.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server"
},
"dependencies": {
"@waku/sdk": "0.0.18",
"@waku/noise": "0.0.3-31510da",
"@waku/utils": "0.0.10",
"protobufjs": "^7.1.2",
"qrcode": "^1.5.1"
},
"devDependencies": {
"copy-webpack-plugin": "^11.0.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
}

View File

@ -1,19 +0,0 @@
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"],
}),
],
};

View File

@ -1 +0,0 @@
/.angular/cache

View File

@ -1,26 +0,0 @@
# Minimal Angular (v13) Waku Relay App
**Demonstrates**:
- Group messaging
- Angular
- Waku Relay
- Protobuf using `protobufjs`
- No async/await syntax
A barebone messaging app to illustrate the seamless integration of `js-waku` into AngularJS.
The `master` branch's HEAD is deployed at https://examples.waku.org/relay-angular-chat/.
To run a development version locally, do:
```shell
git clone https://github.com/waku-org/js-waku-examples
cd js-waku-examples/examples/relay-angular-chat
npm install
npm start
```
### Known issues
There is a problem when using `npm` to install/run the Angular app.

View File

@ -1,97 +0,0 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"relay-angular-chat": {
"projectType": "application",
"schematics": {
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "build",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.css"],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "2mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "relay-angular-chat:build:production"
},
"development": {
"browserTarget": "relay-angular-chat:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "relay-angular-chat:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.css"],
"scripts": []
}
}
}
}
},
"defaultProject": "relay-angular-chat",
"cli": {
"analytics": false
}
}

View File

@ -1,41 +0,0 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: "",
frameworks: ["jasmine", "@angular-devkit/build-angular"],
plugins: [
require("karma-jasmine"),
require("karma-chrome-launcher"),
require("karma-jasmine-html-reporter"),
require("karma-coverage"),
require("@angular-devkit/build-angular/plugins/karma"),
],
client: {
jasmine: {
// you can add configuration options for Jasmine here
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
// for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321`
},
clearContext: false, // leave Jasmine Spec Runner output visible in browser
},
jasmineHtmlReporter: {
suppressAll: true, // removes the duplicated traces
},
coverageReporter: {
dir: require("path").join(__dirname, "./coverage/relay-angular-chat"),
subdir: ".",
reporters: [{ type: "html" }, { type: "text-summary" }],
},
reporters: ["progress", "kjhtml"],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ["Chrome"],
singleRun: false,
restartOnFileChange: true,
});
};

File diff suppressed because it is too large Load Diff

View File

@ -1,50 +0,0 @@
{
"name": "@waku/relay-angular-chat",
"version": "0.1.0",
"homepage": "/relay-angular-chat",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --base-href /relay-angular-chat --deploy-url /relay-angular-chat/",
"watch": "ng build --watch --configuration development",
"test": "exit 0",
"test:local": "ng test",
"test:ci": "ng test --watch=false --browsers=ChromeHeadless"
},
"private": true,
"dependencies": {
"@angular/animations": "~14.2.11",
"@angular/common": "~14.2.11",
"@angular/compiler": "~14.2.11",
"@angular/core": "~14.2.11",
"@angular/forms": "~14.2.11",
"@angular/platform-browser": "~14.2.11",
"@angular/platform-browser-dynamic": "~14.2.11",
"@angular/router": "~14.2.11",
"@waku/core": "^0.0.6",
"@waku/create": "^0.0.4",
"@waku/interfaces": "^0.0.5",
"protobufjs": "^7.1.2",
"rxjs": "~7.5.7",
"tslib": "^2.4.1",
"zone.js": "~0.11.8"
},
"browser": {
"util": false
},
"devDependencies": {
"@angular-devkit/build-angular": "~14.2.10",
"@angular/cli": "~14.2.10",
"@angular/compiler-cli": "~14.2.11",
"@types/jasmine": "~4.3.0",
"@types/node": "^17.0.45",
"is-ci-cli": "^2.2.0",
"jasmine-core": "~4.3.0",
"karma": "~6.4.1",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~4.7.4"
}
}

View File

@ -1 +0,0 @@
declare module "protons";

View File

@ -1,13 +0,0 @@
declare module "time-cache" {
interface ITimeCache {
put(key: string, value: any, validity: number): void;
get(key: string): any;
has(key: string): boolean;
}
type TimeCache = ITimeCache;
function TimeCache(options: object): TimeCache;
export = TimeCache;
}

View File

@ -1,25 +0,0 @@
/* Application-wide Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2,
h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body,
input[type="text"],
button {
color: #333;
font-family: Cambria, Georgia, serif;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}

View File

@ -1,3 +0,0 @@
<h1>{{ title }}</h1>
<p>Waku node's status: {{ wakuStatus }}</p>
<app-messages></app-messages>

View File

@ -1,32 +0,0 @@
import { TestBed } from "@angular/core/testing";
import { AppComponent } from "./app.component";
import { MessagesComponent } from "./messages/messages.component";
describe("AppComponent", () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [AppComponent, MessagesComponent],
}).compileComponents();
});
xit("should create the app", () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
xit(`should have as title 'relay-angular-chat'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual("relay-angular-chat");
});
xit("should render title", () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector(".h1")?.textContent).toContain(
"relay-angular-chat"
);
});
});

View File

@ -1,21 +0,0 @@
import { Component } from "@angular/core";
import { WakuService } from "./waku.service";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
title: string = "relay-angular-chat";
wakuStatus!: string;
constructor(private wakuService: WakuService) {}
ngOnInit(): void {
this.wakuService.init();
this.wakuService.wakuStatus.subscribe((wakuStatus) => {
this.wakuStatus = wakuStatus;
});
}
}

View File

@ -1,12 +0,0 @@
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { MessagesComponent } from "./messages/messages.component";
@NgModule({
declarations: [AppComponent, MessagesComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}

View File

@ -1,9 +0,0 @@
<button (click)="sendMessage()" [disabled]="wakuStatus !== 'Connected'">
Send Message
</button>
<h2>Messages</h2>
<ul class="messages">
<li *ngFor="let message of messages">
<span>{{ message.timestamp }} {{ message.text }}</span>
</li>
</ul>

View File

@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { MessagesComponent } from "./messages.component";
describe("MessagesComponent", () => {
let component: MessagesComponent;
let fixture: ComponentFixture<MessagesComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [MessagesComponent],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(MessagesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
xit("should create", () => {
expect(component).toBeTruthy();
});
});

View File

@ -1,84 +0,0 @@
import { Component, OnInit } from "@angular/core";
import { WakuService } from "../waku.service";
import type { WakuPrivacy } from "@waku/interfaces";
import protobuf from "protobufjs";
import { DecoderV0, EncoderV0 } from "@waku/core/lib/waku_message/version_0";
import type { MessageV0 } from "@waku/core/lib/waku_message/version_0";
const ProtoChatMessage = new protobuf.Type("ChatMessage")
.add(new protobuf.Field("timestamp", 1, "uint32"))
.add(new protobuf.Field("text", 2, "string"));
interface MessageInterface {
timestamp: Date;
text: string;
}
@Component({
selector: "app-messages",
templateUrl: "./messages.component.html",
styleUrls: ["./messages.component.css"],
})
export class MessagesComponent implements OnInit {
contentTopic: string = `/js-waku-examples/1/chat/proto`;
decoder: DecoderV0;
encoder: EncoderV0;
messages: MessageInterface[] = [];
messageCount: number = 0;
waku!: WakuPrivacy;
wakuStatus!: string;
deleteObserver?: () => void;
constructor(private wakuService: WakuService) {
this.decoder = new DecoderV0(this.contentTopic);
this.encoder = new EncoderV0(this.contentTopic);
}
ngOnInit(): void {
this.wakuService.wakuStatus.subscribe((wakuStatus) => {
this.wakuStatus = wakuStatus;
});
this.wakuService.waku.subscribe((waku) => {
this.waku = waku;
this.deleteObserver = this.waku.relay.addObserver(
this.decoder,
this.processIncomingMessages
);
});
window.onbeforeunload = () => this.ngOnDestroy();
}
ngOnDestroy(): void {
if (this.deleteObserver) this.deleteObserver();
}
sendMessage(): void {
const time = new Date().getTime();
const protoMsg = ProtoChatMessage.create({
timestamp: time,
text: `Here is a message #${this.messageCount}`,
});
const payload = ProtoChatMessage.encode(protoMsg).finish();
this.waku.relay.send(this.encoder, { payload }).then(() => {
console.log(`Message #${this.messageCount} sent`);
this.messageCount += 1;
});
}
processIncomingMessages = (wakuMessage: MessageV0) => {
if (!wakuMessage.payload) return;
const { text, timestamp } = ProtoChatMessage.decode(
wakuMessage.payload
) as unknown as { text: string; timestamp: bigint };
const time = new Date();
time.setTime(Number(timestamp));
const message = { text, timestamp: time };
this.messages.push(message);
};
}

View File

@ -1,16 +0,0 @@
import { TestBed } from "@angular/core/testing";
import { WakuService } from "./waku.service";
describe("WakuService", () => {
let service: WakuService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(WakuService);
});
it("should be created", () => {
expect(service).toBeTruthy();
});
});

View File

@ -1,31 +0,0 @@
import { Injectable } from "@angular/core";
import { BehaviorSubject, Subject } from "rxjs";
import { createPrivacyNode } from "@waku/create";
import { waitForRemotePeer } from "@waku/core/lib/wait_for_remote_peer";
import type { WakuPrivacy } from "@waku/interfaces";
@Injectable({
providedIn: "root",
})
export class WakuService {
private wakuSubject = new Subject<WakuPrivacy>();
public waku = this.wakuSubject.asObservable();
private wakuStatusSubject = new BehaviorSubject("");
public wakuStatus = this.wakuStatusSubject.asObservable();
constructor() {}
init() {
createPrivacyNode({ defaultBootstrap: true }).then((waku) => {
waku.start().then(() => {
this.wakuSubject.next(waku);
this.wakuStatusSubject.next("Connecting...");
waitForRemotePeer(waku).then(() => {
this.wakuStatusSubject.next("Connected");
});
});
});
}
}

View File

@ -1,3 +0,0 @@
export const environment = {
production: true,
};

View File

@ -1,16 +0,0 @@
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false,
};
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

@ -1,15 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>RelayAngularChat</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" href="./favicon.png" />
<link rel="manifest" href="./manifest.json" />
<link rel="icon" href="./favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>

View File

@ -1,15 +0,0 @@
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";
import "zone.js";
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));

View File

@ -1,19 +0,0 @@
{
"name": "Relay Chat",
"description": "A barebone messaging app to illustrate the Angular Relay guide.",
"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"
}

View File

@ -1 +0,0 @@
/* You can add global styles to this file, and also import other style files */

View File

@ -1,30 +0,0 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import "zone.js/testing";
import { getTestBed } from "@angular/core/testing";
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from "@angular/platform-browser-dynamic/testing";
declare const require: {
context(
path: string,
deep?: boolean,
filter?: RegExp
): {
<T>(id: string): T;
keys(): string[];
};
};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context("./", true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

View File

@ -1,10 +0,0 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": ["src/main.ts"],
"include": ["src/**/*.d.ts"]
}

View File

@ -1,30 +0,0 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2020",
"module": "es2020",
"lib": ["es2020", "dom"],
"allowSyntheticDefaultImports": true
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}

View File

@ -1,10 +0,0 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": ["jasmine"]
},
"files": ["src/test.ts"],
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

View File

@ -1,25 +0,0 @@
# Direct WebRTC connection for Waku Relay
**Demonstrates**:
- Waku Relay node with direct WebRTC connection
- Pure Javascript/HTML.
This example uses WebRTC transport and Waku Relay to exchange messages.
To test the example run `npm install` and then `npm start`.
The `master` branch's HEAD is deployed at https://examples.waku.org/relay-direct-chat/.
### Steps to run an example:
1. Get a Waku node that implements `/libp2p/circuit/relay/0.2.0/hop` and `/libp2p/circuit/relay/0.2.0/stop`
1.1. Find `go-waku` node or
1.2. Build and then run `go-waku` node with following command: `./build/waku --ws true --relay true --circuit-relay true`
2. Copy node's multiaddr (e.g `/ip4/192.168.0.101/tcp/60001/ws/p2p/16Uiu2HAm9w2xeDWFJm5eeGLZfJdaPtkNatQD1xrzK5EFWSeXdFvu`)
3. In `relay-chat` example's folder run `npm install` and then `npm start`
4. Use `go-waku`'s multiaddr for **Remote node multiaddr** and press dial. Repeat in two more tabs.
5. In `tab2` copy **Local Peer Id** and use as **WebRTC Peer** in `tab1` and press dial.
6. In `tab1` or `tab2` press **Ensure WebRTC Relay connection**
7. In `tab1` press **Drop non WebRTC connections**
8. In `tab1` enter **Nickname** and **Message** and send.
9. See the message in `tab3` which was connected only to `go-waku` node.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

@ -1,73 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Relay direct chat</title>
<link rel="stylesheet" href="./style.css" />
<link rel="apple-touch-icon" href="./favicon.png" />
<link rel="manifest" href="./manifest.json" />
<link rel="icon" href="./favicon.ico" />
</head>
<body>
<div class="content">
<div class="header">
<h3>Status: <span id="status"></span></h3>
<h4><label for="remoteNode">Remote node multiaddr</label></h4>
<div>
<input
id="remoteNode"
value="/dns4/node-01.ac-cn-hongkong-c.go-waku.prod.statusim.net/tcp/443/wss/p2p/16Uiu2HAm1fVVprL9EaDpDw4frNX3CPfZu5cBqhtk9Ncm6WCvprpv"
/>
<button id="connectRemoteNode">Dial</button>
</div>
<h4><label for="webrtcPeer">WebRTC Peer</label></h4>
<div>
<input id="webrtcPeer" />
<button id="connectWebrtcPeer">Dial</button>
</div>
<div>
<button id="relayWebRTC">Ensure WebRTC Relay connection</button>
<button id="dropNonWebRTC">Drop non WebRTC connections</button>
</div>
<details open>
<summary>Peer's information</summary>
<h4>Content topic</h4>
<p id="contentTopic"></p>
<h4>Local Peer Id</h4>
<p id="localPeerId"></p>
<h4>Remote Peer Id</h4>
<p id="remotePeerId"></p>
<h4>Relay mesh's protocols</h4>
<p id="relayMeshInfo"></p>
</details>
</div>
<div id="messages"></div>
<div class="footer">
<div class="inputArea">
<input type="text" id="nickText" placeholder="Nickname" />
<textarea id="messageText" placeholder="Message"></textarea>
</div>
<div class="controls">
<button id="send">Send</button>
<button id="exit">Exit chat</button>
</div>
</div>
</div>
<script src="//cdn.jsdelivr.net/npm/protobufjs@7.X.X/dist/protobuf.min.js"></script>
<script type="module" src="./index.js"></script>
</body>
</html>

View File

@ -1,340 +0,0 @@
import {
createRelayNode,
bytesToUtf8,
utf8ToBytes,
createDecoder,
createEncoder,
} 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 CONTENT_TOPIC = "/toy-chat/2/huilong/proto";
const ui = initUI();
runApp(ui).catch((err) => {
console.error(err);
ui.setStatus(`error: ${err.message}`, "error");
});
async function runApp(ui) {
const {
info,
sendMessage,
unsubscribeFromMessages,
dial,
dialWebRTCpeer,
dropNetworkConnections,
ensureWebRTCconnectionInRelayMesh,
} = await initWakuContext({
ui,
contentTopic: CONTENT_TOPIC,
});
ui.setLocalPeer(info.localPeerId);
ui.setContentTopic(info.contentTopic);
ui.onSendMessage(sendMessage);
ui.onRemoteNodeConnect(dial);
ui.onWebrtcConnect(dialWebRTCpeer);
ui.onRelayWebRTC(ensureWebRTCconnectionInRelayMesh);
ui.onDropNonWebRTC(dropNetworkConnections);
ui.onExit(async () => {
ui.setStatus("disconnecting...", "progress");
await unsubscribeFromMessages();
ui.setStatus("disconnected", "terminated");
ui.resetMessages();
});
}
async function initWakuContext({ ui, contentTopic }) {
const Decoder = createDecoder(contentTopic);
const Encoder = createEncoder({ contentTopic });
const ChatMessage = new protobuf.Type("ChatMessage")
.add(new protobuf.Field("timestamp", 1, "uint64"))
.add(new protobuf.Field("nick", 2, "string"))
.add(new protobuf.Field("text", 3, "bytes"));
ui.setStatus("starting...", "progress");
const node = await createRelayNode({
libp2p: {
addresses: {
listen: ["/webrtc"],
},
connectionGater: {
denyDialMultiaddr: () => {
// refuse to deny localhost addresses
return false;
},
},
transports: [
webRTC({}),
circuitRelayTransport({
discoverRelays: 1,
}),
webSockets({ filter: filterAll }),
],
},
});
await node.start();
// Set a filter by using Decoder for a given ContentTopic
const unsubscribeFromMessages = await node.relay.subscribe(
[Decoder],
(wakuMessage) => {
const messageObj = ChatMessage.decode(wakuMessage.payload);
ui.renderMessage({
...messageObj,
text: bytesToUtf8(messageObj.text),
});
}
);
ui.setStatus("started", "success");
const localPeerId = node.libp2p.peerId.toString();
const remotePeers = await node.libp2p.peerStore.all();
const remotePeerIds = new Set(remotePeers.map((peer) => peer.id.toString()));
ui.setRemotePeer(Array.from(remotePeerIds.keys()));
node.libp2p.addEventListener("peer:connect", async (event) => {
remotePeerIds.add(event.detail.toString());
ui.setRemotePeer(Array.from(remotePeerIds.keys()));
ui.setRelayMeshInfo(node.relay.gossipSub);
});
node.libp2p.addEventListener("peer:disconnect", (event) => {
remotePeerIds.delete(event.detail.toString());
ui.setRemotePeer(Array.from(remotePeerIds.keys()));
ui.setRelayMeshInfo(node.relay.gossipSub);
});
node.libp2p.addEventListener("peer:identify", (event) => {
const peer = event.detail;
if (!peer.protocols.includes("/webrtc-signaling/0.0.1")) {
return;
}
ui.setWebrtcPeer(peer.peerId.toString());
ui.setRelayMeshInfo(node.relay.gossipSub);
});
window.node = node;
return {
unsubscribeFromMessages,
info: {
contentTopic,
localPeerId,
},
sendMessage: async ({ text, nick }) => {
if (!text || !nick) {
return;
}
const protoMessage = ChatMessage.create({
nick,
timestamp: Date.now(),
text: utf8ToBytes(text),
});
await node.relay.send(Encoder, {
payload: ChatMessage.encode(protoMessage).finish(),
});
},
dial: async (multiaddr) => {
ui.setStatus("connecting...", "progress");
await node.dial(multiaddr);
ui.setStatus("connected", "success");
},
dialWebRTCpeer: async (peerId) => {
const peers = await node.libp2p.peerStore.all();
const circuitPeer = peers.filter(
(p) =>
p.protocols.includes("/libp2p/circuit/relay/0.2.0/hop") &&
p.protocols.includes("/libp2p/circuit/relay/0.2.0/stop")
)[0];
if (!circuitPeer) {
throw Error("No Circuit peer is found");
}
let multiaddr = circuitPeer.addresses.pop().multiaddr;
multiaddr = `${multiaddr}/p2p/${circuitPeer.id.toString()}/p2p-circuit/webrtc/p2p/${peerId}`;
await node.dial(multiaddr);
ui.setRelayMeshInfo(node.relay.gossipSub);
},
ensureWebRTCconnectionInRelayMesh: async () => {
const promises = node.libp2p
.getConnections()
.filter((c) => c.stat.multiplexer === "/webrtc")
.map(async (c) => {
const outboundStream = node.relay.gossipSub.streamsOutbound.get(
c.remotePeer.toString()
);
const isWebRTCOutbound =
outboundStream.rawStream.constructor.name === "WebRTCStream";
if (isWebRTCOutbound) {
return;
}
node.relay.gossipSub.streamsOutbound.delete(c.remotePeer.toString());
await node.relay.gossipSub.createOutboundStream(
c.remotePeer.toString(),
c
);
});
await Promise.all(promises);
ui.setRelayMeshInfo(node.relay.gossipSub);
},
dropNetworkConnections: async () => {
const promises = node.libp2p
.getConnections()
.filter((c) => c.stat.multiplexer !== "/webrtc")
.map(async (c) => {
const peerId = c.remotePeer.toString();
node.relay.gossipSub.peers.delete(peerId);
node.relay.gossipSub.streamsInbound.delete(peerId);
node.relay.gossipSub.streamsOutbound.delete(peerId);
await node.libp2p.peerStore.delete(c.remotePeer);
await c.close();
});
await Promise.all(promises);
ui.setRelayMeshInfo(node.relay.gossipSub);
},
};
}
// UI adapter
function initUI() {
const exitButton = document.getElementById("exit");
const sendButton = document.getElementById("send");
const statusBlock = document.getElementById("status");
const localPeerBlock = document.getElementById("localPeerId");
const remotePeerId = document.getElementById("remotePeerId");
const contentTopicBlock = document.getElementById("contentTopic");
const messagesBlock = document.getElementById("messages");
const nickText = document.getElementById("nickText");
const messageText = document.getElementById("messageText");
const remoteNode = document.getElementById("remoteNode");
const connectRemoteNode = document.getElementById("connectRemoteNode");
const webrtcPeer = document.getElementById("webrtcPeer");
const connectWebrtcPeer = document.getElementById("connectWebrtcPeer");
const relayWebRTCbutton = document.getElementById("relayWebRTC");
const dropNonWebRTCbutton = document.getElementById("dropNonWebRTC");
const relayMeshInfo = document.getElementById("relayMeshInfo");
return {
// UI events
onExit: (cb) => {
exitButton.addEventListener("click", cb);
},
onSendMessage: (cb) => {
sendButton.addEventListener("click", async () => {
await cb({
nick: nickText.value,
text: messageText.value,
});
messageText.value = "";
});
},
// UI renderers
setStatus: (value, className) => {
statusBlock.innerHTML = `<span class=${className || ""}>${value}</span>`;
},
setLocalPeer: (id) => {
localPeerBlock.innerText = id.toString();
},
setRemotePeer: (ids) => {
remotePeerId.innerText = ids.join("\n");
},
setContentTopic: (topic) => {
contentTopicBlock.innerText = topic.toString();
},
renderMessage: (messageObj) => {
const { nick, text, timestamp } = messageObj;
const date = new Date(timestamp);
// WARNING: XSS vulnerable
messagesBlock.innerHTML += `
<div class="message">
<p>${nick} <span>(${date.toDateString()})</span>:</p>
<p>${text}</p>
<div>
`;
},
resetMessages: () => {
messagesBlock.innerHTML = "";
},
setWebrtcPeer: (peerId) => {
webrtcPeer.value = peerId;
},
onRemoteNodeConnect: (cb) => {
connectRemoteNode.addEventListener("click", () => {
const multiaddr = remoteNode.value;
if (!multiaddr) {
throw Error("No multiaddr set to dial");
}
cb(multiaddr);
});
},
onWebrtcConnect: (cb) => {
connectWebrtcPeer.addEventListener("click", () => {
const multiaddr = webrtcPeer.value;
if (!multiaddr) {
throw Error("No multiaddr to dial webrtc");
}
cb(multiaddr);
});
},
onRelayWebRTC: (cb) => {
relayWebRTCbutton.addEventListener("click", cb);
},
onDropNonWebRTC: (cb) => {
dropNonWebRTCbutton.addEventListener("click", cb);
},
setRelayMeshInfo: (gossipSub) => {
relayMeshInfo.innerHTML = "";
Array.from(gossipSub.peers)
.map((peerId) => {
let inbound = gossipSub.streamsInbound.get(peerId);
inbound = inbound ? inbound.rawStream.constructor.name : "none";
let outbound = gossipSub.streamsOutbound.get(peerId);
outbound = outbound ? outbound.rawStream.constructor.name : "none";
return [peerId, inbound, outbound];
})
.map(([peerId, inbound, outbound]) => {
relayMeshInfo.innerHTML += `${peerId}<br /><b>inbound</b>: ${inbound}\t<b>outbound</b>: ${outbound}`;
relayMeshInfo.innerHTML += "<br /><br />";
});
},
};
}

View File

@ -1,19 +0,0 @@
{
"name": "Relay direct chat",
"description": "Send messages between several users (or just one) using Relay with direct WebRTC connection.",
"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"
}

File diff suppressed because it is too large Load Diff

View File

@ -1,26 +0,0 @@
{
"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"
}
}

View File

@ -1,185 +0,0 @@
* {
margin: 0;
padding: 0;
word-wrap: break-word;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
html {
font-size: 16px;
overflow: hidden;
}
body {
display: flex;
align-items: center;
padding: 10px;
justify-content: center;
}
h3 + h4,
div + h4,
div + details,
div + div {
margin-top: 20px;
}
.header div {
display: flex;
justify-content: space-between;
}
.header div input {
min-width: 300px;
min-height: 30px;
width: 80%;
margin-right: 10px;
}
.header div button {
min-width: 50px;
min-height: 30px;
width: 10%;
flex-grow: 1;
}
.header div button + button {
margin-left: 10px;
}
details {
margin-bottom: 15px;
}
details p {
margin-bottom: 10px;
}
summary {
cursor: pointer;
max-width: 100%;
margin-bottom: 5px;
}
span {
font-weight: 300;
}
input,
textarea {
line-height: 1rem;
padding: 5px;
}
textarea {
min-height: 3rem;
}
h3 {
margin-bottom: 5px;
}
.content {
width: 800px;
min-width: 300px;
max-width: 800px;
height: 100%;
display: flex;
flex-direction: column;
align-content: space-between;
}
#messages {
overflow-y: scroll;
overflow-x: hidden;
}
.message + .message {
margin-top: 15px;
}
.message :first-child {
font-weight: bold;
}
.message p + p {
margin-top: 5px;
}
.message span {
font-size: 0.8rem;
}
.inputArea {
display: flex;
gap: 10px;
flex-direction: column;
margin-top: 20px;
}
.controls {
margin-top: 10px;
display: flex;
gap: 10px;
}
.controls button {
flex-grow: 1;
cursor: pointer;
padding: 10px;
}
#send {
background-color: #32d1a0;
border: none;
color: white;
}
#send:hover {
background-color: #3abd96;
}
#send:active {
background-color: #3ba183;
}
#exit {
color: white;
border: none;
background-color: #ff3a31;
}
#exit:hover {
background-color: #e4423a;
}
#exit:active {
background-color: #c84740;
}
.success {
color: #3ba183;
}
.progress {
color: #9ea13b;
}
.terminated {
color: black;
}
.error {
color: #c84740;
}
.footer {
display: flex;
width: 100%;
flex-direction: column;
align-self: flex-end;
}

View File

@ -1,25 +0,0 @@
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",
"style.css",
],
}),
],
};

View File

@ -1,13 +0,0 @@
# Using Waku Relay in JavaScript
**Demonstrates**:
- Waku Relay: Send and receive messages using Waku Relay.
- Pure Javascript/HTML.
- Use minified bundle of js from unpkg.com, no import, no package manager.
This example uses Waku Relay to send and receive simple text 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/relay-js/.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

@ -1,131 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>JS-Waku Chat</title>
<link rel="apple-touch-icon" href="./favicon.png" />
<link rel="manifest" href="./manifest.json" />
<link rel="icon" href="./favicon.ico" />
</head>
<body>
<div><h1>Waku Node Status</h1></div>
<div id="status"></div>
<label for="textInput">Message text</label>
<input
disabled
id="textInput"
placeholder="Type your message here"
type="text"
/>
<button disabled id="sendButton" type="button">
Send Message using Relay
</button>
<div><h1>Messages</h1></div>
<div id="messages"></div>
<script type="module">
/**
* Demonstrate usage of js-waku in the browser. Use relay, gossip sub protocol to send and receive messages.
* Recommended payload is protobuf. Using simple utf-8 string for demo purposes only.
*/
import {
waitForRemotePeer,
createDecoder,
createEncoder,
bytesToUtf8,
utf8ToBytes,
createRelayNode,
} from "https://unpkg.com/@waku/sdk@0.0.18/bundle/index.js";
const statusDiv = document.getElementById("status");
const messagesDiv = document.getElementById("messages");
const textInput = document.getElementById("textInput");
const sendButton = document.getElementById("sendButton");
// Every Waku Message has a content topic that categorizes it.
// It is always encoded in clear text.
// Recommendation: `/dapp-name/version/functionality/codec`
// We recommend to use protobuf as codec (`proto`), this demo uses utf-8
// for simplicity's sake.
const contentTopic = "/js-waku-examples/1/chat/utf8";
// Prepare encoder and decoder, `V0` for clear text messages.
const encoder = createEncoder({ contentTopic });
const decoder = createDecoder(contentTopic);
try {
statusDiv.innerHTML = "<p>Starting</p>";
// Create and starts a Waku node.
// `defaultBootstrap: true` bootstraps by connecting to pre-defined/hardcoded Waku nodes.
// `emitSelf`: emits event of sent message to itself and invokes subscribers by it
// We are currently working on migrating this method to DNS Discovery.
//
// https://js.waku.org/functions/lib_create_waku.createPrivacyNode.html
const waku = await createRelayNode({
emitSelf: true,
defaultBootstrap: true,
});
await waku.start();
// Add a hook to process all incoming messages on a specified content topic.
//
// https://js.waku.org/classes/index.waku_relay.WakuRelay.html#addObserver
waku.relay.subscribe(
decoder,
(message) => {
// Checks there is a payload on the message.
// Waku Message is encoded in protobuf, in proto v3 fields are always optional.
//
// https://js.waku.org/interfaces/index.proto_message.WakuMessage-1.html#payload
if (!message.payload) return;
// Helper method to decode the payload to utf-8. A production dApp should
// use `wakuMessage.payload` (Uint8Array) which enables encoding a data
// structure of their choice.
//
// https://js.waku.org/functions/index.utils.bytesToUtf8.html
const text = bytesToUtf8(message.payload);
messagesDiv.innerHTML =
`<p>${text}</p><br />` + messagesDiv.innerHTML;
},
[contentTopic]
);
statusDiv.innerHTML = "<p>Connecting to a peer</p>";
// Best effort method that waits for the Waku node to be connected to remote
// waku nodes (peers) and for appropriate handshakes to be done.
//
// https://js.waku.org/functions/lib_wait_for_remote_peer.waitForRemotePeer.html
await waitForRemotePeer(waku);
// We are now connected to a remote peer, let's define the `sendMessage`
// function that sends the text input over Waku Relay, the gossipsub
// protocol.
sendButton.onclick = async () => {
const payload = utf8ToBytes(textInput.value);
await waku.relay.send(encoder, { payload });
console.log("Message sent!");
// Reset the text input.
textInput.value = null;
};
// Ready to send & receive messages, enable text input.
textInput.disabled = false;
sendButton.disabled = false;
statusDiv.innerHTML = "<p>Ready!</p>";
} catch (e) {
statusDiv.innerHTML = "Failed to start application";
console.log(e);
}
</script>
</body>
</html>

View File

@ -1,19 +0,0 @@
{
"name": "Relay JS",
"description": "This example uses Waku Relay to send and receive simple text messages.",
"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"
}

View File

@ -1,23 +0,0 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

View File

@ -1 +0,0 @@
auto-install-peers=true

View File

@ -1,22 +0,0 @@
# Minimal ReactJS Waku Relay App
**Demonstrates**:
- Group chat
- React/JavaScript
- `create-react-app`/`react-scripts` 5.0.0
- Waku Relay
- Protobuf using `protobufjs`.
A barebone chat app to illustrate the seamless integration of `js-waku` into ReactJS.
The `master` branch's HEAD is deployed at https://examples.waku.org/relay-reactjs-chat/.
To run a development version locally, do:
```shell
git clone https://github.com/waku-org/js-waku-examples
cd js-waku-examples/examples/relay-reactjs-chat
npm install
npm run start
```

View File

@ -1,28 +0,0 @@
const { getLoaders, loaderByName } = require("@craco/craco");
module.exports = {
webpack: {
configure: (webpackConfig) => {
const { hasFoundAny, matches } = getLoaders(
webpackConfig,
loaderByName("babel-loader")
);
if (hasFoundAny) {
matches.forEach((c) => {
// Modify test to include cjs for @chainsafe/libp2p-gossipsub rpc module
if (c.loader.test.toString().includes("mjs")) {
// If your project uses typescript then do not forget to include `ts`/`tsx`
if (c.loader.test.toString().includes("jsx")) {
c.loader.test = /\.(js|cjs|mjs|jsx)$/;
} else {
c.loader.test = /\.(js|cjs|mjs)$/;
}
}
});
}
return webpackConfig;
},
},
};

File diff suppressed because it is too large Load Diff

View File

@ -1,49 +0,0 @@
{
"name": "relay-reactjs-chat",
"version": "0.1.0",
"private": true,
"homepage": "/relay-reactjs-chat",
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@waku/sdk": "^0.0.18",
"protobufjs": "^7.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1"
},
"scripts": {
"start": "GENERATE_SOURCEMAP=false PORT=3001 craco start",
"build": "GENERATE_SOURCEMAP=false craco build",
"test": "exit 0",
"eject": "craco eject"
},
"browser": {
"crypto": false
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not ie <= 99",
"not android <= 4.4.4",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@craco/craco": "7.0.0",
"eslint": "^8.28.0"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="A barebone chat app to illustrate the ReactJS Relay guide."
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React Relay</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

View File

@ -1,19 +0,0 @@
{
"name": "Waku Relay",
"description": "A barebone chat app to illustrate the ReactJS Relay guide.",
"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"
}

View File

@ -1,3 +0,0 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

View File

@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

View File

@ -1,119 +0,0 @@
import * as React from "react";
import protobuf from "protobufjs";
import {
createRelayNode,
createDecoder,
createEncoder,
waitForRemotePeer,
} from "@waku/sdk";
const ContentTopic = `/js-waku-examples/1/chat/proto`;
const Encoder = createEncoder({ contentTopic: ContentTopic });
const Decoder = createDecoder(ContentTopic);
const SimpleChatMessage = new protobuf.Type("SimpleChatMessage")
.add(new protobuf.Field("timestamp", 1, "uint32"))
.add(new protobuf.Field("text", 2, "string"));
function App() {
const [waku, setWaku] = React.useState(undefined);
const [wakuStatus, setWakuStatus] = React.useState("None");
// Using a counter just for the messages to be different
const [sendCounter, setSendCounter] = React.useState(0);
const [messages, setMessages] = React.useState([]);
React.useEffect(() => {
if (!!waku) return;
if (wakuStatus !== "None") return;
setWakuStatus("Starting");
(async () => {
const waku = await createRelayNode({ defaultBootstrap: true });
setWaku(waku);
await waku.start();
setWakuStatus("Connecting");
await waitForRemotePeer(waku, ["relay"]);
setWakuStatus("Ready");
})();
}, [waku, wakuStatus]);
const processIncomingMessage = React.useCallback((wakuMessage) => {
console.log("Message received", wakuMessage);
if (!wakuMessage.payload) return;
const { text, timestamp } = SimpleChatMessage.decode(wakuMessage.payload);
const time = new Date();
time.setTime(timestamp);
const message = { text, timestamp: time };
setMessages((messages) => {
return [message].concat(messages);
});
}, []);
React.useEffect(() => {
if (!waku) return;
// Pass the content topic to only process messages related to your dApp
const deleteObserver = waku.relay.subscribe(
Decoder,
processIncomingMessage
);
// Called when the component is unmounted, see ReactJS doc.
return deleteObserver;
}, [waku, wakuStatus, processIncomingMessage]);
const sendMessageOnClick = () => {
// Check Waku is started and connected first.
if (wakuStatus !== "Ready") return;
sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() =>
console.log("Message sent")
);
// For demonstration purposes.
setSendCounter(sendCounter + 1);
};
return (
<div className="App">
<header className="App-header">
<p>{wakuStatus}</p>
<button onClick={sendMessageOnClick} disabled={wakuStatus !== "Ready"}>
Send Message
</button>
<ul>
{messages.map((msg) => {
return (
<li key={msg.timestamp.valueOf()}>
<p>
{msg.timestamp.toString()}: {msg.text}
</p>
</li>
);
})}
</ul>
</header>
</div>
);
}
function sendMessage(message, waku, timestamp) {
const time = timestamp.getTime();
// Encode to protobuf
const protoMsg = SimpleChatMessage.create({
timestamp: time,
text: message,
});
const payload = SimpleChatMessage.encode(protoMsg).finish();
// Send over Waku Relay
return waku.relay.send(Encoder, { payload });
}
export default App;

View File

@ -1,8 +0,0 @@
import { render, screen } from "@testing-library/react";
import App from "./App";
test("renders learn react link", () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

View File

@ -1,13 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

View File

@ -1,11 +0,0 @@
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -1,5 +0,0 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom";

View File

@ -1,135 +0,0 @@
{
"version": "0.1",
"$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/master/cspell.schema.json",
"language": "en",
"words": [
"Alives",
"asym",
"backoff",
"backoffs",
"bitauth",
"bitjson",
"bufbuild",
"chainsafe",
"cimg",
"ciphertext",
"circleci",
"codecov",
"commitlint",
"dependabot",
"Dialable",
"dingpu",
"Dlazy",
"dnsaddr",
"Dout",
"Dscore",
"ecies",
"editorconfig",
"enr",
"enrs",
"enrtree",
"ephem",
"esnext",
"ethersproject",
"execa",
"exponentiate",
"fanout",
"floodsub",
"fontsource",
"globby",
"gossipsub",
"huilong",
"iasked",
"ihave",
"ihaves",
"ineed",
"ipfs",
"iwant",
"jdev",
"jswaku",
"keccak",
"lastpub",
"libauth",
"libp",
"lightpush",
"livechat",
"mkdir",
"mplex",
"multiaddr",
"multiaddresses",
"multiaddrs",
"multicodec",
"multicodecs",
"multiformats",
"multihashes",
"muxed",
"muxer",
"muxers",
"mvps",
"nodekey",
"nwaku",
"opendns",
"peerhave",
"portfinder",
"prettierignore",
"proto",
"protobuf",
"protoc",
"reactjs",
"recid",
"rlnrelay",
"roadmap",
"sandboxed",
"scanf",
"secio",
"seckey",
"secp",
"sscanf",
"staticnode",
"statusim",
"submodule",
"submodules",
"supercrypto",
"transpiled",
"typedoc",
"unencrypted",
"unmarshal",
"unmount",
"unmounts",
"untracked",
"upgrader",
"vacp",
"varint",
"waku",
"wakuconnect",
"wakunode",
"wakuv",
"webfonts",
"websockets",
"wifi",
"xsalsa20"
],
"flagWords": [],
"ignorePaths": [
"package.json",
"package-lock.json",
"yarn.lock",
"tsconfig.json",
"node_modules/**",
"build",
"gen",
"proto",
"*.spec.ts"
],
"patterns": [
{
"name": "import",
"pattern": "/import .*/"
},
{
"name": "enrtree",
"pattern": "/enrtree://.*/"
}
],
"ignoreRegExpList": ["import", "enrtree"]
}

View File

@ -1,3 +0,0 @@
# Remove ReactJS warning about webpack
# because this is not a monorepo, ReactJS projects are examples
SKIP_PREFLIGHT_CHECK=true

View File

@ -1,23 +0,0 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

View File

@ -1,3 +0,0 @@
# package.json is formatted by package managers, so we ignore it here
package.json
gen

View File

@ -1,25 +0,0 @@
# Web Chat App
**Demonstrates**:
- Group chat
- React/TypeScript
- Waku Filter
- Waku Light Push
- Waku Store
- Protobuf using `protons`
A ReactJS chat app is provided as a showcase of the library used in the browser.
It implements [Waku v2 Toy Chat](https://rfc.vac.dev/spec/22/) protocol.
A deployed version is available at https://examples.waku.org/web-chat/.
To run a development version locally, do:
```shell
git clone https://github.com/waku-org/js-waku-examples
cd js-waku-examples/examples/web-chat
npm install
npm run start
```
Use `/help` to see the available commands.

View File

@ -1,6 +0,0 @@
version: v1beta1
plugins:
- name: ts_proto
out: ./src/proto
opt: grpc_js,esModuleInterop=true

View File

@ -1,5 +0,0 @@
version: v1beta1
build:
roots:
- ./src/proto

File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More