Feature/improve js example (#190)
* nym-client: refactoring js example code a bit. * nym-client: ignoring node modules in demo * nym-client: adding webpack and a dev server * nym-client: banging example into webpack format * nym-client: webpack starting to work in the demo * nym-client: more webpacking * nym-client: ignoring bundle.js in dist * Example code starting to breathe with webpack, not quite there yet * nym-client: high point of attempted webpack business. Will revert to minimal, it's getting crazy. * nym-client: removed lots of npm deps * nym-client: added webpack html plugin to demo * nym-client: removed app.scss from demo * nym-client: removed lots of webpack config * nym-client: ugly but working simple javascript demo * nym-client: more demo simplification * Simplifying a bit more * nym-client: added some comments to js demo * parameter rename
This commit is contained in:
Dave Hrycyszyn
@@ -0,0 +1,2 @@
|
||||
dist/bundle.js
|
||||
node_modules
|
||||
@@ -0,0 +1,10 @@
|
||||
### Prerequisites
|
||||
|
||||
* Reasonably up to date Node + `npm`
|
||||
|
||||
### Running it
|
||||
|
||||
```
|
||||
npm install
|
||||
npm start # starts a webserver on port 8888
|
||||
```
|
||||
@@ -1,20 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<script src="socket.js" async></script>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nym Client Demo</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>
|
||||
<div id="output">Loading JavaScript...</div>
|
||||
</p>
|
||||
<p>
|
||||
Fetched messages: <span id="fetch">none<div>
|
||||
</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+9332
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "nym-client-websocket-demo",
|
||||
"version": "0.7.0",
|
||||
"description": "Connect to a local Nym client, send and retrieve from the Nym network. ",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
"start": "webpack-dev-server"
|
||||
},
|
||||
"keywords": [
|
||||
"nym",
|
||||
"anonymity",
|
||||
"mixnet",
|
||||
"client",
|
||||
"rust",
|
||||
"websockets"
|
||||
],
|
||||
"author": "Dave Hrycyszyn",
|
||||
"license": "Apache-2.0",
|
||||
"devDependencies": {
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"webpack": "^4.42.1",
|
||||
"webpack-cli": "^3.3.11",
|
||||
"webpack-dev-server": "^3.10.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"html-webpack-plugin": "^4.2.0"
|
||||
}
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
display("Initialising...");
|
||||
|
||||
var port = '9001' // client websocket listens on 9001 by default, change if yours is different
|
||||
var connection = new WebSocket('ws://127.0.0.1:' + port);
|
||||
|
||||
// When the connection is open, send some data to the server
|
||||
connection.onopen = function () {
|
||||
display('Opened connection to Nym client websocket.');
|
||||
};
|
||||
|
||||
// Log errors
|
||||
connection.onerror = function (error) {
|
||||
display('WebSocket Error ' + error);
|
||||
};
|
||||
|
||||
// Log messages from the server
|
||||
connection.onmessage = function (e) {
|
||||
let response = JSON.parse(e.data);
|
||||
if (response.type == "error") {
|
||||
display('Server responded with error: ' + response.message);
|
||||
} else if (response.type == "fetch") {
|
||||
displayFetch(response.messages);
|
||||
}
|
||||
};
|
||||
|
||||
function display(message) {
|
||||
document.getElementById("output").innerHTML = message;
|
||||
}
|
||||
|
||||
function displayFetch(message) {
|
||||
document.getElementById("fetch").innerHTML = message;
|
||||
}
|
||||
|
||||
display("Nym client demo started.");
|
||||
|
||||
var sequenceNum = 0;
|
||||
|
||||
// window.setInterval(function () {
|
||||
// var message = {
|
||||
// type: "send",
|
||||
// message: "FOOMP " + sequenceNum,
|
||||
// recipient_address: "2ub7f2s5en4Pn2nhY69uyWqGSMLZwhtPASjePq4gLxQs"
|
||||
// }
|
||||
// connection.send(JSON.stringify(message));
|
||||
// display("Sent message: " + message.message + " to " + message.recipient_address);
|
||||
// sequenceNum += 1;
|
||||
// }, 500);
|
||||
|
||||
window.setInterval(function () {
|
||||
var message = {
|
||||
type: "fetch",
|
||||
}
|
||||
// displayFetch("fetching...");
|
||||
connection.send(JSON.stringify(message));
|
||||
sequenceNum += 1;
|
||||
}, 1000);
|
||||
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nym Client Demo</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<label for="fname">Text to send: </label><input type="text" id="sendtext" name="sendtext" value="Hello mixnet!">
|
||||
<button id="send-button">Send</button>
|
||||
|
||||
<p>Send messages to the mixnet 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>
|
||||
|
||||
<hr>
|
||||
<p>
|
||||
<span id="output"></div>
|
||||
</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
var ourAddress;
|
||||
|
||||
async function main() {
|
||||
var port = '9001' // client websocket listens on 9001 by default, change if yours is different
|
||||
var localClientUrl = "ws://127.0.0.1:" + port;
|
||||
|
||||
// Set up and handle websocket connection to our desktop client.
|
||||
var connection = await connectWebsocket(localClientUrl).then(function (c) {
|
||||
return c;
|
||||
}).catch(function (err) {
|
||||
display("Websocket ERROR: " + err);
|
||||
})
|
||||
connection.onmessage = function (e) {
|
||||
handleResponse(e);
|
||||
};
|
||||
|
||||
|
||||
sendOwnDetailsRequest(connection);
|
||||
pollForMessages(connection);
|
||||
|
||||
// Set up the send button
|
||||
const sendButton = document.querySelector('#send-button');
|
||||
sendButton.onclick = function () {
|
||||
sendMessageToMixnet(connection);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle any messages that come back down the websocket.
|
||||
function handleResponse(resp) {
|
||||
let response = JSON.parse(resp.data);
|
||||
if (response.type == "error") {
|
||||
displayJsonResponse("Server responded with error: " + response);
|
||||
} else if (response.type == "fetch") {
|
||||
if (response.messages.length > 0) {
|
||||
displayJsonResponse(response);
|
||||
}
|
||||
} else if (response.type == "ownDetails") {
|
||||
displayJsonResponse(response);
|
||||
ourAddress = response.address;
|
||||
display("Our address is: " + ourAddress + ", we will now send messages to ourself.");
|
||||
}
|
||||
}
|
||||
|
||||
// Send a message to the mixnet.
|
||||
function sendMessageToMixnet(connection) {
|
||||
var sendText = document.getElementById("sendtext").value;
|
||||
var message = {
|
||||
type: "send",
|
||||
message: sendText,
|
||||
recipient_address: ourAddress
|
||||
}
|
||||
|
||||
displayJsonSend(message);
|
||||
connection.send(JSON.stringify(message));
|
||||
}
|
||||
|
||||
// Send a message to the mixnet client, asking what our own address is.
|
||||
// In this simplistic demo, we'll just use our own address to send ourselves messages.
|
||||
//
|
||||
// In a real application, you might want to ensure that somebody else got your
|
||||
// address so that they could send messages to you.
|
||||
function sendOwnDetailsRequest(connection) {
|
||||
var ownDetails = {
|
||||
type: "ownDetails"
|
||||
}
|
||||
displayJsonSend(ownDetails);
|
||||
connection.send(JSON.stringify(ownDetails));
|
||||
}
|
||||
|
||||
// Periodically poll for any messages waiting for us on the mixnet. This is
|
||||
// an annoying source of latency and will soon go away.
|
||||
function pollForMessages(connection) {
|
||||
setInterval(() => {
|
||||
var message = {
|
||||
type: "fetch"
|
||||
}
|
||||
connection.send(JSON.stringify(message));
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function display(message) {
|
||||
document.getElementById("output").innerHTML += "<p>" + message + "</p >";
|
||||
}
|
||||
|
||||
function displayJsonSend(message) {
|
||||
document.getElementById("output").innerHTML += "<p style='color: blue;'>sent >>> " + JSON.stringify(message) + "</p >";
|
||||
}
|
||||
|
||||
function displayJsonResponse(message) {
|
||||
document.getElementById("output").innerHTML += "<p style='color: green;'>received <<<" + JSON.stringify(message) + "</p >";
|
||||
}
|
||||
|
||||
// Connect to a websocket.
|
||||
function connectWebsocket(url) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var server = new WebSocket(url);
|
||||
server.onopen = function () {
|
||||
resolve(server);
|
||||
};
|
||||
server.onerror = function (err) {
|
||||
reject(err);
|
||||
};
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// Start it!
|
||||
main();
|
||||
@@ -0,0 +1,25 @@
|
||||
const autoprefixer = require('autoprefixer');
|
||||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
output: {
|
||||
filename: 'bundle.js',
|
||||
// path: path.resolve(__dirname, 'dist'),
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
hash: true,
|
||||
template: './src/index.html',
|
||||
filename: '.././dist/index.html' //relative to root of the application
|
||||
})
|
||||
],
|
||||
devServer: {
|
||||
contentBase: path.join(__dirname, 'dist'),
|
||||
compress: true,
|
||||
port: 8888
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user