move example from js-noise repo
This commit is contained in:
weboko
parent
266916be74
commit
465fe17e34
|
|
@ -0,0 +1,7 @@
|
|||
# Waku Noise Pairing example app
|
||||
|
||||
```
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
Browse http://localhost:8080 and open the developer tools to see console logs
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Press F12 to open the console</p>
|
||||
<p><b>Waku Status:</b> <span id="waku-status">connecting...</span></p>
|
||||
<p id="handshake-span">
|
||||
<b>Handshake Status:</b> <span id="handshake-status">-</span>
|
||||
</p>
|
||||
<canvas id="qr-canvas"></canvas>
|
||||
<a href="#" id="qr-url" style="display: none" target="_blank"
|
||||
>Open QR code link in new window instead of scanning it.</a
|
||||
>
|
||||
|
||||
<div id="chat-area" style="display: none">
|
||||
<label for="nick-input">Your nickname</label>
|
||||
<input id="nick-input" placeholder="Choose a nickname" type="text" />
|
||||
<label for="text-input">Message text</label>
|
||||
<input id="text-input" placeholder="Type your message here" type="text" />
|
||||
<button id="send-btn" type="button" disabled>
|
||||
Send message using Light Push
|
||||
</button>
|
||||
<span id="sending-status"></span>
|
||||
|
||||
<h4 class="mu1">Messages</h4>
|
||||
<div id="messages"></div>
|
||||
</div>
|
||||
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,320 @@
|
|||
import { createLightNode } from "js-waku/lib/create_waku";
|
||||
import { utils } from "js-waku";
|
||||
import { waitForRemotePeer } from "js-waku/lib/wait_for_remote_peer";
|
||||
import {
|
||||
Fleet,
|
||||
getPredefinedBootstrapNodes,
|
||||
} from "js-waku/lib/predefined_bootstrap_nodes";
|
||||
import { PeerDiscoveryStaticPeers } from "js-waku/lib/peer_discovery_static_list";
|
||||
import { Protocols } from "js-waku";
|
||||
import * as noise from "@waku/noise";
|
||||
import protobuf from "protobufjs";
|
||||
import QRCode from "qrcode";
|
||||
// TODO: Get rid of these
|
||||
import hexToArrayBuffer from "hex-to-array-buffer";
|
||||
import arrayBufferToHex from "array-buffer-to-hex";
|
||||
|
||||
const messagesDiv = document.getElementById("messages");
|
||||
const nicknameInput = document.getElementById("nick-input");
|
||||
const textInput = document.getElementById("text-input");
|
||||
const sendButton = document.getElementById("send-btn");
|
||||
const sendingStatusSpan = document.getElementById("sending-status");
|
||||
const chatArea = document.getElementById("chat-area");
|
||||
const qrCanvas = document.getElementById("qr-canvas");
|
||||
const qrUrl = document.getElementById("qr-url");
|
||||
const wakuStatusSpan = document.getElementById("waku-status");
|
||||
const handshakeStatusSpan = document.getElementById("handshake-status");
|
||||
|
||||
function getPairingInfofromUrl() {
|
||||
const urlParts = window.location.href.split("?");
|
||||
if (urlParts.length < 2) return undefined;
|
||||
|
||||
const pairingParts = decodeURIComponent(urlParts[1]).split(":");
|
||||
if (pairingParts.length < 6)
|
||||
throw new Error("invalid pairing information format");
|
||||
|
||||
const qrMessageNameTag = new Uint8Array(
|
||||
hexToArrayBuffer(pairingParts.shift())
|
||||
);
|
||||
|
||||
return new noise.InitiatorParameters(
|
||||
pairingParts.join(":"),
|
||||
qrMessageNameTag
|
||||
);
|
||||
}
|
||||
|
||||
function getSenderAndResponder(node) {
|
||||
const sender = {
|
||||
async publish(encoder, msg) {
|
||||
await node.lightPush.push(encoder, msg);
|
||||
},
|
||||
};
|
||||
|
||||
const msgQueue = new Array();
|
||||
const subscriptions = new Map();
|
||||
const intervals = new Map();
|
||||
|
||||
const responder = {
|
||||
async subscribe(decoder) {
|
||||
const subscription = await node.filter.subscribe(
|
||||
[decoder],
|
||||
(wakuMessage) => {
|
||||
msgQueue.push(wakuMessage);
|
||||
}
|
||||
);
|
||||
subscriptions.set(decoder.contentTopic, subscription);
|
||||
},
|
||||
async nextMessage(contentTopic) {
|
||||
if (msgQueue.length != 0) {
|
||||
const oldestMsg = msgQueue.shift();
|
||||
if (oldestMsg.contentTopic === contentTopic) {
|
||||
return oldestMsg;
|
||||
}
|
||||
}
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const interval = setInterval(() => {
|
||||
if (msgQueue.length != 0) {
|
||||
clearInterval(interval);
|
||||
const oldestMsg = msgQueue.shift();
|
||||
if (oldestMsg.contentTopic === contentTopic) {
|
||||
resolve(oldestMsg);
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
intervals.set(contentTopic, interval);
|
||||
});
|
||||
},
|
||||
async stop(contentTopic) {
|
||||
if (intervals.has(contentTopic)) {
|
||||
clearInterval(intervals.get(contentTopic));
|
||||
intervals.delete(contentTopic);
|
||||
}
|
||||
if (subscriptions.has(contentTopic)) {
|
||||
await subscriptions.get(contentTopic)();
|
||||
subscriptions.delete(contentTopic);
|
||||
} else {
|
||||
console.log("Subscriptipon doesnt exist");
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
return [sender, responder];
|
||||
}
|
||||
|
||||
async function confirmAuthCodeFlow(pairingObj) {
|
||||
const authCode = await pairingObj.getAuthCode();
|
||||
pairingObj.validateAuthCode(confirm("Confirm that authcode is: " + authCode));
|
||||
}
|
||||
|
||||
async function hideQR() {
|
||||
qrCanvas.remove();
|
||||
qrUrl.remove();
|
||||
}
|
||||
|
||||
async function disableUI() {
|
||||
hideQR();
|
||||
chatArea.remove();
|
||||
}
|
||||
|
||||
// Function to update the fields to guide the user by disabling buttons.
|
||||
const updateFields = () => {
|
||||
const readyToSend = nicknameInput.value !== "";
|
||||
textInput.disabled = !readyToSend;
|
||||
sendButton.disabled = !readyToSend;
|
||||
};
|
||||
|
||||
// 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"));
|
||||
|
||||
let messages = [];
|
||||
|
||||
const updateMessages = () => {
|
||||
messagesDiv.innerHTML = "<ul>";
|
||||
messages.forEach((msg) => {
|
||||
messagesDiv.innerHTML += `<li>${msg}</li>`;
|
||||
});
|
||||
messagesDiv.innerHTML += "</ul>";
|
||||
};
|
||||
|
||||
const onMessage = (wakuMessage) => {
|
||||
const { timestamp, nick, text } = ProtoChatMessage.decode(
|
||||
wakuMessage.payload
|
||||
);
|
||||
const time = new Date();
|
||||
time.setTime(Number(timestamp) * 1000);
|
||||
|
||||
messages.push(
|
||||
`(${nick}) <strong>${utils.bytesToUtf8(
|
||||
text
|
||||
)}</strong> <i>[${time.toISOString()}]</i>`
|
||||
);
|
||||
updateMessages();
|
||||
};
|
||||
|
||||
async function main() {
|
||||
// Starting the node
|
||||
const node = await createLightNode({
|
||||
libp2p: {
|
||||
peerDiscovery: [
|
||||
new PeerDiscoveryStaticPeers(getPredefinedBootstrapNodes(Fleet.Test)),
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
try {
|
||||
await node.start();
|
||||
|
||||
await waitForRemotePeer(node, [Protocols.Filter, Protocols.LightPush]);
|
||||
|
||||
wakuStatusSpan.innerHTML = "connected";
|
||||
|
||||
const [sender, responder] = getSenderAndResponder(node);
|
||||
|
||||
const myStaticKey = noise.generateX25519KeyPair();
|
||||
|
||||
const pairingParameters = getPairingInfofromUrl();
|
||||
|
||||
const initiator = pairingParameters ? true : false;
|
||||
|
||||
let encoder;
|
||||
let decoder;
|
||||
|
||||
if (initiator) {
|
||||
console.log("Initiator");
|
||||
qrCanvas.remove(); // Initiator does not require a QR code
|
||||
|
||||
const pairingObj = new noise.WakuPairing(
|
||||
sender,
|
||||
responder,
|
||||
myStaticKey,
|
||||
pairingParameters
|
||||
);
|
||||
const pExecute = pairingObj.execute(120000); // timeout after 2m
|
||||
|
||||
confirmAuthCodeFlow(pairingObj);
|
||||
|
||||
try {
|
||||
handshakeStatusSpan.innerHTML = "executing handshake...";
|
||||
|
||||
[encoder, decoder] = await pExecute;
|
||||
|
||||
handshakeStatusSpan.innerHTML = "handshake completed!";
|
||||
} catch (err) {
|
||||
handshakeStatusSpan.innerHTML = err.message;
|
||||
disableUI();
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
/*
|
||||
// The information needs to be backed up to decrypt messages sent with
|
||||
// codecs generated with the handshake. The `handshakeResult` variable
|
||||
// contains private information that needs to be stored safely
|
||||
const contentTopic = pairingObj.contentTopic;
|
||||
const handshakeResult = pairingObj.getHandshakeResult();
|
||||
|
||||
// To restore the codecs for decrypting older messages, or continuing an existing
|
||||
// session, use this:
|
||||
[encoder, decoder] = WakuPairing.getSecureCodec(contentTopic, handshakeResult);
|
||||
*/
|
||||
} else {
|
||||
console.log("Responder");
|
||||
|
||||
const pairingObj = new noise.WakuPairing(
|
||||
sender,
|
||||
responder,
|
||||
myStaticKey,
|
||||
new noise.ResponderParameters()
|
||||
);
|
||||
const pExecute = pairingObj.execute(120000); // timeout after 2m
|
||||
|
||||
confirmAuthCodeFlow(pairingObj);
|
||||
|
||||
const pInfo = pairingObj.getPairingInfo();
|
||||
|
||||
// Data to encode in the QR code. The qrMessageNametag too to the QR string (separated by )
|
||||
const qrString =
|
||||
arrayBufferToHex(pInfo.qrMessageNameTag) + ":" + pInfo.qrCode;
|
||||
const qrURLString =
|
||||
window.location.href + "?" + encodeURIComponent(qrString);
|
||||
|
||||
handshakeStatusSpan.innerHTML = "generating QR code...";
|
||||
|
||||
console.log("Generating QR...");
|
||||
|
||||
QRCode.toCanvas(qrCanvas, qrURLString, (err) => {
|
||||
if (err) {
|
||||
handshakeStatusSpan.innerHTML = err.message;
|
||||
disableUI();
|
||||
console.error(err);
|
||||
} else {
|
||||
handshakeStatusSpan.innerHTML = "waiting for handshake to start";
|
||||
qrUrl.href = qrURLString;
|
||||
qrUrl.style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
try {
|
||||
handshakeStatusSpan.innerHTML = "executing handshake...";
|
||||
|
||||
[encoder, decoder] = await pExecute;
|
||||
|
||||
handshakeStatusSpan.innerHTML = "handshake completed!";
|
||||
|
||||
hideQR();
|
||||
} catch (err) {
|
||||
handshakeStatusSpan.innerHTML = err.message;
|
||||
disableUI();
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
/*
|
||||
// The information needs to be backed up to decrypt messages sent with
|
||||
// codecs generated with the handshake. The `handshakeResult` variable
|
||||
// contains private information that needs to be stored safely
|
||||
const contentTopic = pairingObj.contentTopic;
|
||||
const handshakeResult = pairingObj.getHandshakeResult();
|
||||
|
||||
// To restore the codecs for decrypting older messages, or continuing an existing
|
||||
// session, use this:
|
||||
[encoder, decoder] = WakuPairing.getSecureCodec(contentTopic, handshakeResult);
|
||||
*/
|
||||
}
|
||||
|
||||
nicknameInput.onchange = updateFields;
|
||||
nicknameInput.onblur = updateFields;
|
||||
|
||||
sendButton.onclick = async () => {
|
||||
const text = utils.utf8ToBytes(textInput.value);
|
||||
const timestamp = new Date();
|
||||
const msg = ProtoChatMessage.create({
|
||||
text,
|
||||
nick: nicknameInput.value,
|
||||
timestamp: Math.floor(timestamp.valueOf() / 1000),
|
||||
});
|
||||
const payload = ProtoChatMessage.encode(msg).finish();
|
||||
sendingStatusSpan.innerText = "sending...";
|
||||
await node.lightPush.push(encoder, { payload, timestamp });
|
||||
sendingStatusSpan.innerText = "sent!";
|
||||
|
||||
onMessage({ payload });
|
||||
|
||||
textInput.value = null;
|
||||
setTimeout(() => {
|
||||
sendingStatusSpan.innerText = "";
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
await node.filter.subscribe([decoder], onMessage);
|
||||
|
||||
chatArea.style.display = "block";
|
||||
} catch (err) {
|
||||
wakuStatusSpan.innerHTML = err.message;
|
||||
disableUI();
|
||||
return;
|
||||
}
|
||||
}
|
||||
main();
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"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/noise": "https://github.com/waku-org/js-noise.git",
|
||||
"array-buffer-to-hex": "^1.0.0",
|
||||
"hex-to-array-buffer": "^2.0.0",
|
||||
"js-waku": "^0.29.0-29436ea",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||
const path = require("path");
|
||||
|
||||
module.exports = {
|
||||
entry: "./index.js",
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "index.js",
|
||||
},
|
||||
experiments: {
|
||||
asyncWebAssembly: true,
|
||||
},
|
||||
mode: "development",
|
||||
plugins: [
|
||||
new CopyWebpackPlugin({
|
||||
patterns: ["index.html"],
|
||||
}),
|
||||
],
|
||||
};
|
||||
Loading…
Reference in New Issue