Simplified some names and used the published npm package (#242)

This commit is contained in:
Dave Hrycyszyn
2020-05-20 15:52:36 +01:00
committed by GitHub
parent c063cf83a6
commit 1f749df59d
7 changed files with 53 additions and 42 deletions
Generated
+1 -1
View File
@@ -1697,7 +1697,7 @@ dependencies = [
[[package]]
name = "nym-client-wasm"
version = "0.7.0-pre"
version = "0.7.2"
dependencies = [
"console_error_panic_hook",
"crypto",
+1 -1
View File
@@ -1,7 +1,7 @@
[package]
name = "nym-client-wasm"
authors = ["Dave Hrycyszyn <futurechimp@users.noreply.github.com>", "Jedrzej Stuczynski <andrew@nymtech.net>"]
version = "0.7.0-pre"
version = "0.7.2"
edition = "2018"
keywords = ["nym", "sphinx", "wasm", "webassembly", "privacy", "client"]
license = "Apache-2.0"
+13 -15
View File
@@ -26,7 +26,7 @@ export class Client {
async start() {
await this.updateTopology();
this._getInitialGateway();
await this.establishGatewayConnection();
await this.connect();
// TODO: a way to somehow await for our authenticate response to be processed
}
@@ -60,17 +60,17 @@ export class Client {
}
}
establishGatewayConnection() {
connect() {
return new Promise((resolve, reject) => {
const conn = new WebSocket(this.gateway.socketAddress);
conn.onclose = this.onGatewayConnectionClose;
conn.onclose = this.onConnectionClose;
conn.onerror = (event) => {
this.onGatewayConnectionError(event);
this.onConnectionError(event);
reject(event);
};
conn.onmessage = (event) => this.onGatewayMessage(event);
conn.onmessage = (event) => this.onMessage(event);
conn.onopen = (event) => {
this.onEstablishedGatewayConnection(event);
this.onConnect(event);
if (this._isRegistered()) {
this.sendAuthenticateRequest();
resolve(); // TODO: we should wait for authenticateResponse...
@@ -110,15 +110,13 @@ export class Client {
console.error("Binary messages are not yet supported");
return
}
// TODO: CURRENTLY WE ONLY ACCEPT "recipient", not recipient@gateway
// this will be changed in the very next PR
console.log("send", this.topology)
const sphinxPacket = wasm.create_sphinx_packet(JSON.stringify(this.topology), message, recipient);
this.gateway.conn.send(sphinxPacket);
this.onMessageSend();
}
onGatewayMessage(event) {
onMessage(event) {
if (event.data instanceof Blob) {
this.onBlobResponse(event);
} else {
@@ -139,15 +137,15 @@ export class Client {
console.log("Default: Updated topology")
}
onEstablishedGatewayConnection(event) {
onConnect(event) {
console.log("Default: Established gateway connection", event);
}
onGatewayConnectionClose(event) {
onConnectionClose(event) {
console.log("Default: The the connection to gateway was closed", event);
}
onGatewayConnectionError(event) {
onConnectionError(event) {
console.error("Default: Gateway connection error: ", event);
}
@@ -196,14 +194,14 @@ export class Client {
let reader = new FileReader();
reader.onload = () => {
this.onParsedBlobResponse(reader.result)
this.onText(reader.result)
};
reader.readAsText(event.data);
}
// Alternatively you may use default implementation and get everything as a text
onParsedBlobResponse(data) {
// Alternatively you may use default implementation and treat everything as text
onText(data) {
console.log("Default: parsed the following data", data);
}
}
+9 -6
View File
@@ -9,17 +9,20 @@
<body>
<p>
<label for="fname">Our address: </label><input disabled="true" size="120" type="text" id="sender" value="">
<label>Sender: </label><input disabled="true" size="85" type="text" id="sender" value="">
</p>
<p>
<label for="fname">Recipient address: </label><input size="120" type="text" id="recipient" value="">
<label>Recipient: </label><input size="85" type="text" id="recipient" value="">
</p>
<p>
<label>Message: </label><input type="text" id="message" value="Hello mixnet!">
</p>
<p>
<button id="send-button">Send</button>
</p>
<label for="fname">Text to send: </label><input type="text" id="sendtext" value="Hello mixnet!">
<button id="send-button">Send</button>
<p>Send messages to the mixnet using the "send" button.</p>
<p>Send messages from your browser, through the mixnet, and to the recipient using the "send" button.</p>
<p><span style='color: blue;'>Sent</span> messages show in blue, <span style='color: green;'>received</span>
messages show in green.</p>
+19 -14
View File
@@ -15,31 +15,32 @@
import {
Client,
Identity
} from "nym-client-wasm/client"
} from "@nymproject/nym-client-wasm/client"
async function main() {
// Set up identity and client
let directory = "https://qa-directory.nymtech.net";
let identity = new Identity(); // or load one from storage if you have one already
document.getElementById("sender").value = "loading...";
let nymClient = new Client(directory, identity, null); // provide your authToken if you've registered before
nymClient.onEstablishedGatewayConnection = (_) => document.getElementById("sender").value = nymClient.formatAsRecipient() // overwrite default behaviour with our implementation
nymClient.onParsedBlobResponse = displayReceived // overwrite default behaviour with our implementation
nymClient.onErrorResponse = (event) => alert("Received invalid gateway response", event.data)
await nymClient.start();
let identity = new Identity();
let nymClient = new Client(directory, identity, null);
// Wire up events callbacks
nymClient.onConnect = (_) => displaySenderAddress(nymClient);
nymClient.onText = displayReceived;
nymClient.onErrorResponse = (event) => alert("Received invalid gateway response", event.data);
const sendButton = document.querySelector('#send-button');
sendButton.onclick = function () {
sendMessageTo(nymClient);
}
// Start the Nym client. Connects to a Nym gateway via websocket.
await nymClient.start();
}
// Create a Sphinx packet and send it to the mixnet through the Gateway node.
function sendMessageTo(client) {
var message = document.getElementById("sendtext").value;
// Create a Sphinx packet and send it to the mixnet through the gateway node.
function sendMessageTo(nymClient) {
var message = document.getElementById("message").value;
var recipient = document.getElementById("recipient").value;
client.sendMessage(message, recipient);
nymClient.sendMessage(message, recipient);
displaySend(message);
}
@@ -55,6 +56,10 @@ function displayReceived(message) {
document.getElementById("output").innerHTML = out + document.getElementById("output").innerHTML;
}
function displaySenderAddress(nymClient) {
document.getElementById("sender").value = nymClient.formatAsRecipient();
}
// Let's get started!
main();
+5
View File
@@ -4,6 +4,11 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@nymproject/nym-client-wasm": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/@nymproject/nym-client-wasm/-/nym-client-wasm-0.7.2.tgz",
"integrity": "sha512-Xyjkigo3IvUFsyItQkZnZjQj49VGVNeNFDk8TORx+iQNifcGlMA1T7swPcBE11xt0oTsJk9P5mFYSrMljPRrqA=="
},
"@types/events": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
+5 -5
View File
@@ -20,12 +20,12 @@
"rust",
"webpack"
],
"author": "Ashley Williams <ashley666ashley@gmail.com>",
"license": "(MIT OR Apache-2.0)",
"author": "Dave Hrycyszyn <futurechimp@users.noreply.github.com>",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/rustwasm/create-wasm-app/issues"
"url": "https://github.com/nymtech/nym/issues"
},
"homepage": "https://github.com/rustwasm/create-wasm-app#readme",
"homepage": "https://nymtech.net/docs",
"devDependencies": {
"copy-webpack-plugin": "^5.0.0",
"hello-wasm-pack": "^0.1.0",
@@ -34,6 +34,6 @@
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"nym-client-wasm": "file:../pkg"
"@nymproject/nym-client-wasm": "^0.7.2"
}
}