diff --git a/Cargo.lock b/Cargo.lock index 4d42e5e054..04e404295a 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -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", diff --git a/clients/webassembly/Cargo.toml b/clients/webassembly/Cargo.toml index d5ddb1ea82..fad6bdbfe8 100644 --- a/clients/webassembly/Cargo.toml +++ b/clients/webassembly/Cargo.toml @@ -1,7 +1,7 @@ [package] name = "nym-client-wasm" authors = ["Dave Hrycyszyn ", "Jedrzej Stuczynski "] -version = "0.7.0-pre" +version = "0.7.2" edition = "2018" keywords = ["nym", "sphinx", "wasm", "webassembly", "privacy", "client"] license = "Apache-2.0" diff --git a/clients/webassembly/client.js b/clients/webassembly/client.js index 7e5cca3320..df4e8116b4 100644 --- a/clients/webassembly/client.js +++ b/clients/webassembly/client.js @@ -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); } } diff --git a/clients/webassembly/js-example/index.html b/clients/webassembly/js-example/index.html index 658a11609e..040255e9df 100644 --- a/clients/webassembly/js-example/index.html +++ b/clients/webassembly/js-example/index.html @@ -9,17 +9,20 @@

- +

- + +

+

+ +

+

+

- - - -

Send messages to the mixnet using the "send" button.

+

Send messages from your browser, through the mixnet, and to the recipient using the "send" button.

Sent messages show in blue, received messages show in green.

diff --git a/clients/webassembly/js-example/index.js b/clients/webassembly/js-example/index.js index 7ac63abf86..bd2a9caa2b 100644 --- a/clients/webassembly/js-example/index.js +++ b/clients/webassembly/js-example/index.js @@ -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(); \ No newline at end of file diff --git a/clients/webassembly/js-example/package-lock.json b/clients/webassembly/js-example/package-lock.json index 9f121a59d1..8ef029f36b 100644 --- a/clients/webassembly/js-example/package-lock.json +++ b/clients/webassembly/js-example/package-lock.json @@ -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", diff --git a/clients/webassembly/js-example/package.json b/clients/webassembly/js-example/package.json index 1a25d44a42..6503bddf16 100644 --- a/clients/webassembly/js-example/package.json +++ b/clients/webassembly/js-example/package.json @@ -20,12 +20,12 @@ "rust", "webpack" ], - "author": "Ashley Williams ", - "license": "(MIT OR Apache-2.0)", + "author": "Dave Hrycyszyn ", + "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" } }