Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Tommy Verrall
|
a231c6ac4e | ||
|
Tommy Verrall
|
4f4e0bd5e8 | ||
|
Tommy Verrall
|
4e823ef79d | ||
|
Tommy Verrall
|
b20b943d74 |
@@ -0,0 +1,8 @@
|
||||
HIDDEN_GATEWAY_OWNER=
|
||||
HIDDEN_GATEWAY_EXPLICIT_IP=
|
||||
HIDDEN_GATEWAY_HOST=
|
||||
HIDDEN_GATEWAY_SPHINX_KEY=
|
||||
HIDDEN_GATEWAY_IDENTITY_KEY=
|
||||
PREFFERED_NETWORK_REQUESTER=""
|
||||
PREFERRED_GATEWAY=
|
||||
PREFERRED_VALIDATOR=https://sandbox-nym-api1.nymtech.net/api
|
||||
@@ -1,27 +1,196 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nym MixFetch Demo</title>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>NYM MixFetch Demo</title>
|
||||
<script src="bootstrap.js"></script>
|
||||
</head>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css"
|
||||
/>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Arial", sans-serif;
|
||||
background-color: #fb6e4e;
|
||||
padding: 50px 0;
|
||||
align-items: center;
|
||||
font-family: "Arial", sans-serif;
|
||||
background-color: #000000;
|
||||
background-image: url("https://nymtech.net/uploads/Header_22516d90f6.svg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
padding: 50px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
<body>
|
||||
<h1> Mix Fetch Demo</h1>
|
||||
<div>
|
||||
<label>Target Host: </label>
|
||||
<input type="text" size = "60" id="fetch_payload" value="...">
|
||||
<button id="fetch-button"> Fetch </button>
|
||||
</div>
|
||||
.container {
|
||||
background-color: #212428;
|
||||
color: #f2f2f2;
|
||||
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
|
||||
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
background-image: linear-gradient(
|
||||
rgba(255, 255, 255, 0.09),
|
||||
rgba(255, 255, 255, 0.09)
|
||||
);
|
||||
margin: 0 auto 25px;
|
||||
padding: 50px;
|
||||
flex-direction: column;
|
||||
max-width: 1200px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
position: static;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 40px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
background-color: #f2f2f2;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
<hr>
|
||||
<p>
|
||||
<span id="output"></span>
|
||||
</p>
|
||||
.mb-3 {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
</body>
|
||||
.form-label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
</html>
|
||||
.btn-primary,
|
||||
.btn-primary:hover,
|
||||
.btn-primary:active,
|
||||
.btn-primary:visited {
|
||||
background-color: hsl(11, 96%, 65%) !important;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-accordion .ui-accordion-header {
|
||||
background-color: hsl(0, 39%, 19%);
|
||||
border: color(from color srgb r g b);
|
||||
font-size: 20px;
|
||||
padding: auto;
|
||||
transition: background-color 0.4s ease;
|
||||
margin: 0 0 20px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ui-accordion .ui-accordion-header:hover {
|
||||
background-color: hsl(0, 61%, 58%);
|
||||
}
|
||||
|
||||
.ui-accordion .ui-accordion-content {
|
||||
border-top: none;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.logo-container {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#nym-logo {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<div class="logo-container">
|
||||
<img
|
||||
src="https://nymtech.net/icons/nym_logo.svg"
|
||||
alt="Nym Logo"
|
||||
id="nym-logo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<body>
|
||||
<div class="container" id="accordion1">
|
||||
<h3>Mix Fetch Demo</h3>
|
||||
<div>
|
||||
<div class="mb-6">
|
||||
<label for="urlInput" class="form-label">Target Host:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="fetch_payload"
|
||||
placeholder="Enter URL"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<!-- comment out for the time being..
|
||||
<div class="mb-6">
|
||||
<label class="form-label">Return JSON:</label>
|
||||
<div class="form-check form-switch">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="returnJsonToggle"
|
||||
checked
|
||||
/>
|
||||
<label class="form-check-label" for="returnJsonToggle"
|
||||
>Yes/No</label
|
||||
>
|
||||
</div>
|
||||
</div> -->
|
||||
<br />
|
||||
<button class="btn btn-primary w-100" id="fetch-button">Fetch</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="accordion2">
|
||||
<h3>Result</h3>
|
||||
<div>
|
||||
<div class="mb-6">
|
||||
<p>
|
||||
<span id="output"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
$("#accordion1").accordion({
|
||||
heightStyle: "content",
|
||||
collapsible: true,
|
||||
active: false,
|
||||
animate: {
|
||||
duration: 400,
|
||||
easing: "easeInOutQuart",
|
||||
},
|
||||
});
|
||||
|
||||
$("#accordion2").accordion({
|
||||
heightStyle: "content",
|
||||
collapsible: true,
|
||||
active: false,
|
||||
animate: {
|
||||
duration: 400,
|
||||
easing: "easeInOutQuart",
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -13,55 +13,90 @@
|
||||
// limitations under the License.
|
||||
|
||||
class WebWorkerClient {
|
||||
worker = null;
|
||||
worker = null;
|
||||
|
||||
constructor() {
|
||||
this.worker = new Worker('./worker.js');
|
||||
constructor(onComplete) {
|
||||
this.worker = new Worker("./worker.js");
|
||||
|
||||
this.worker.onmessage = (ev) => {
|
||||
if (ev.data && ev.data.kind) {
|
||||
switch (ev.data.kind) {
|
||||
case 'DisplayString':
|
||||
const { rawString } = ev.data.args;
|
||||
displayReceivedRawString(rawString)
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
doFetch = (target) => {
|
||||
if (!this.worker) {
|
||||
console.error('Could not send message because worker does not exist');
|
||||
return;
|
||||
this.worker.onmessage = (ev) => {
|
||||
if (ev.data && ev.data.kind) {
|
||||
switch (ev.data.kind) {
|
||||
case "DisplayString":
|
||||
const { rawString } = ev.data.args;
|
||||
displayReceivedRawString(rawString);
|
||||
break;
|
||||
}
|
||||
if(onComplete) {
|
||||
onComplete();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
this.worker.postMessage({
|
||||
kind: 'FetchPayload',
|
||||
args: {
|
||||
target,
|
||||
},
|
||||
});
|
||||
doFetch = (target) => {
|
||||
if (!this.worker) {
|
||||
console.error("Could not send message because worker does not exist");
|
||||
return;
|
||||
}
|
||||
|
||||
this.worker.postMessage({
|
||||
kind: "FetchPayload",
|
||||
args: {
|
||||
target,
|
||||
},
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
let client = null;
|
||||
|
||||
async function main() {
|
||||
client = new WebWorkerClient();
|
||||
client = new WebWorkerClient(() => {
|
||||
fetchButton.disabled = false;
|
||||
});
|
||||
|
||||
const fetchButton = document.querySelector('#fetch-button');
|
||||
fetchButton.onclick = function () {
|
||||
doFetch();
|
||||
const fetchButton = document.querySelector("#fetch-button");
|
||||
|
||||
fetchButton.onclick = function (e) {
|
||||
if (fetchButton.disabled) {
|
||||
alert("Processing... Please wait!");
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById("output").innerHTML = "";
|
||||
|
||||
if ($("#fetch_payload").val().trim() === "") {
|
||||
e.preventDefault();
|
||||
let errorDiv = document.createElement("div");
|
||||
let paragraph = document.createElement("p");
|
||||
paragraph.style.color = "red";
|
||||
paragraph.innerText = "Please enter a valid request!!";
|
||||
|
||||
errorDiv.appendChild(paragraph);
|
||||
document.getElementById("output").appendChild(errorDiv);
|
||||
return false;
|
||||
}
|
||||
|
||||
fetchButton.disabled = true;
|
||||
|
||||
client.doFetch($("#fetch_payload").val().trim());
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
async function doFetch() {
|
||||
const payload = document.getElementById('fetch_payload').value;
|
||||
await client.doFetch(payload)
|
||||
document
|
||||
.getElementById("fetch-button")
|
||||
.addEventListener("click", async () => {
|
||||
const url = document.getElementById("fetch_payload").value;
|
||||
//introduce toggle in the future
|
||||
//const returnJson = document.getElementById("returnJsonToggle").checked;
|
||||
|
||||
displaySend(`clicked the button and the payload is: ${payload}...`);
|
||||
try {
|
||||
await client.doFetch(url);
|
||||
} catch (error) {
|
||||
console.error("There was a problem fetching the data:", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -70,27 +105,34 @@ async function doFetch() {
|
||||
* @param {string} message
|
||||
*/
|
||||
function displaySend(message) {
|
||||
let timestamp = new Date().toISOString().substr(11, 12);
|
||||
let timestamp = new Date().toISOString().substr(11, 12);
|
||||
|
||||
let sendDiv = document.createElement('div');
|
||||
let paragraph = document.createElement('p');
|
||||
paragraph.setAttribute('style', 'color: blue');
|
||||
let paragraphContent = document.createTextNode(timestamp + ' sent >>> ' + message);
|
||||
paragraph.appendChild(paragraphContent);
|
||||
let sendDiv = document.createElement("div");
|
||||
let paragraph = document.createElement("p");
|
||||
paragraph.style.color = "blue";
|
||||
paragraph.innerText = timestamp + " sent >>> " + message;
|
||||
|
||||
sendDiv.appendChild(paragraph);
|
||||
document.getElementById('output').appendChild(sendDiv);
|
||||
sendDiv.appendChild(paragraph);
|
||||
document.getElementById("output").appendChild(sendDiv);
|
||||
}
|
||||
|
||||
function displayReceivedRawString(raw) {
|
||||
let timestamp = new Date().toISOString().substr(11, 12);
|
||||
let receivedDiv = document.createElement('div');
|
||||
let paragraph = document.createElement('p');
|
||||
paragraph.setAttribute('style', 'color: green');
|
||||
let paragraphContent = document.createTextNode(timestamp + ' received >>> ' + raw);
|
||||
paragraph.appendChild(paragraphContent);
|
||||
receivedDiv.appendChild(paragraph);
|
||||
document.getElementById('output').appendChild(receivedDiv);
|
||||
let timestamp = new Date().toISOString().substr(11, 12);
|
||||
let receivedDiv = document.createElement("div");
|
||||
receivedDiv.style.overflow = "auto";
|
||||
receivedDiv.style.wordWrap = "break-word";
|
||||
|
||||
let paragraph = document.createElement("p");
|
||||
paragraph.style.color = "green";
|
||||
paragraph.style.fontWeight = "bold";
|
||||
paragraph.innerText = timestamp + " received >>> " + JSON.stringify(raw);
|
||||
|
||||
receivedDiv.appendChild(paragraph);
|
||||
|
||||
document.getElementById("output").appendChild(receivedDiv);
|
||||
|
||||
let lineBreak = document.createElement("br");
|
||||
document.getElementById("output").appendChild(lineBreak);
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
@@ -1,37 +1,62 @@
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const path = require('path');
|
||||
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||
const dotenv = require("dotenv").config().parsed;
|
||||
const path = require("path");
|
||||
const webpack = require("webpack");
|
||||
|
||||
module.exports = {
|
||||
performance: {
|
||||
hints: false,
|
||||
maxEntrypointSize: 512000,
|
||||
maxAssetSize: 512000
|
||||
},
|
||||
entry: {
|
||||
bootstrap: './bootstrap.js',
|
||||
worker: './worker.js',
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: '[name].js',
|
||||
},
|
||||
mode: 'development',
|
||||
// mode: 'production',
|
||||
plugins: [
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [
|
||||
'index.html',
|
||||
{
|
||||
from: '../pkg/*.(js|wasm)',
|
||||
to: '[name][ext]',
|
||||
},
|
||||
{
|
||||
from: '../go-mix-conn/build/*.(js|wasm)',
|
||||
to: '[name][ext]',
|
||||
},
|
||||
],
|
||||
}),
|
||||
|
||||
],
|
||||
experiments: { syncWebAssembly: true },
|
||||
performance: {
|
||||
hints: false,
|
||||
maxEntrypointSize: 512000,
|
||||
maxAssetSize: 512000,
|
||||
},
|
||||
entry: {
|
||||
bootstrap: "./bootstrap.js",
|
||||
worker: "./worker.js",
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "[name].js",
|
||||
},
|
||||
mode: "development",
|
||||
// mode: 'production',
|
||||
plugins: [
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [
|
||||
"index.html",
|
||||
{
|
||||
from: "../pkg/*.(js|wasm)",
|
||||
to: "[name][ext]",
|
||||
},
|
||||
{
|
||||
from: "../go-mix-conn/build/*.(js|wasm)",
|
||||
to: "[name][ext]",
|
||||
},
|
||||
],
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
"process.env.HIDDEN_GATEWAY_OWNER": JSON.stringify(
|
||||
dotenv.HIDDEN_GATEWAY_OWNER
|
||||
),
|
||||
"process.env.HIDDEN_GATEWAY_EXPLICIT_IP": JSON.stringify(
|
||||
dotenv.HIDDEN_GATEWAY_EXPLICIT_IP
|
||||
),
|
||||
"process.env.HIDDEN_GATEWAY_HOST": JSON.stringify(
|
||||
dotenv.HIDDEN_GATEWAY_HOST
|
||||
),
|
||||
"process.env.HIDDEN_GATEWAY_SPHINX_KEY": JSON.stringify(
|
||||
dotenv.HIDDEN_GATEWAY_SPHINX_KEY
|
||||
),
|
||||
"process.env.HIDDEN_GATEWAY_IDENTITY_KEY": JSON.stringify(
|
||||
dotenv.HIDDEN_GATEWAY_IDENTITY_KEY
|
||||
),
|
||||
"process.env.PREFFERED_NETWORK_REQUESTER": JSON.stringify(
|
||||
dotenv.PREFFERED_NETWORK_REQUESTER
|
||||
),
|
||||
"process.env.PREFERRED_GATEWAY": JSON.stringify(dotenv.PREFERRED_GATEWAY),
|
||||
"process.env.PREFERRED_VALIDATOR": JSON.stringify(
|
||||
dotenv.PREFERRED_VALIDATOR
|
||||
),
|
||||
}),
|
||||
],
|
||||
experiments: { syncWebAssembly: true },
|
||||
};
|
||||
|
||||
@@ -12,31 +12,32 @@
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
const RUST_WASM_URL = "mix_fetch_wasm_bg.wasm"
|
||||
const GO_WASM_URL = "go_conn.wasm"
|
||||
const RUST_WASM_URL = "mix_fetch_wasm_bg.wasm";
|
||||
const GO_WASM_URL = "go_conn.wasm";
|
||||
|
||||
importScripts('mix_fetch_wasm.js');
|
||||
importScripts('wasm_exec.js');
|
||||
importScripts("mix_fetch_wasm.js");
|
||||
importScripts("wasm_exec.js");
|
||||
|
||||
console.log('Initializing worker');
|
||||
console.log("Initializing worker");
|
||||
|
||||
// wasm_bindgen creates a global variable (with the exports attached) that is in scope after `importScripts`
|
||||
const {
|
||||
default_debug,
|
||||
no_cover_debug,
|
||||
NymClient,
|
||||
set_panic_hook,
|
||||
Config,
|
||||
GatewayEndpointConfig,
|
||||
ClientStorage,
|
||||
MixFetchConfig,
|
||||
send_client_data,
|
||||
start_new_mixnet_connection,
|
||||
setupMixFetch,
|
||||
disconnectMixFetch,
|
||||
setupMixFetchWithConfig,
|
||||
mix_fetch_initialised,
|
||||
finish_mixnet_connection} = wasm_bindgen;
|
||||
default_debug,
|
||||
no_cover_debug,
|
||||
NymClient,
|
||||
set_panic_hook,
|
||||
Config,
|
||||
GatewayEndpointConfig,
|
||||
ClientStorage,
|
||||
MixFetchConfig,
|
||||
send_client_data,
|
||||
start_new_mixnet_connection,
|
||||
setupMixFetch,
|
||||
disconnectMixFetch,
|
||||
setupMixFetchWithConfig,
|
||||
mix_fetch_initialised,
|
||||
finish_mixnet_connection,
|
||||
} = wasm_bindgen;
|
||||
|
||||
let client = null;
|
||||
let tester = null;
|
||||
@@ -44,93 +45,101 @@ const go = new Go(); // Defined in wasm_exec.js
|
||||
var goWasm;
|
||||
|
||||
async function logFetchResult(res) {
|
||||
console.log(res)
|
||||
let text = await res.text()
|
||||
console.log("HEADERS: ", ...res.headers)
|
||||
console.log("STATUS: ", res.status)
|
||||
console.log("STATUS TEXT: ", res.statusText)
|
||||
console.log("OK: ", res.ok)
|
||||
console.log("TYPE: ", res.type)
|
||||
console.log("URL: ", res.url)
|
||||
console.log("BODYUSED: ", res.bodyUsed)
|
||||
console.log("REDIRECTED: ", res.redirected)
|
||||
console.log("TEXT: ", text)
|
||||
let text = await res.text();
|
||||
console.log("HEADERS: ", ...res.headers);
|
||||
console.log("STATUS: ", res.status);
|
||||
console.log("STATUS TEXT: ", res.statusText);
|
||||
console.log("OK: ", res.ok);
|
||||
console.log("TYPE: ", res.type);
|
||||
console.log("URL: ", res.url);
|
||||
console.log("BODYUSED: ", res.bodyUsed);
|
||||
console.log("REDIRECTED: ", res.redirected);
|
||||
console.log("TEXT: ", text);
|
||||
|
||||
try {
|
||||
console.log(text);
|
||||
|
||||
self.postMessage({
|
||||
kind: 'DisplayString',
|
||||
args: {
|
||||
rawString: text,
|
||||
},
|
||||
kind: "DisplayString",
|
||||
args: {
|
||||
rawString: text,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error: ", error);
|
||||
}
|
||||
}
|
||||
|
||||
async function wasm_bindgenSetup() {
|
||||
const preferredGateway = "6qQYb4ArXANU6HJDxzH4PFCUqYb39Dae2Gem2KpxescM";
|
||||
const validator = 'https://qa-nym-api.qa.nymte.ch/api';
|
||||
const preferredGateway = env.process.PREFERRED_GATEWAY;
|
||||
const validator = env.process.PREFERRED_VALIDATOR;
|
||||
|
||||
// local
|
||||
const mixFetchNetworkRequesterAddress= "2o47bhnXWna6VEyt4mXMGQQAbXfpKmX7BkjkxUz8uQVi.6uQGnCqSczpXwh86NdbsCoDDXuqZQM9Uwko8GE7uC9g8@6qQYb4ArXANU6HJDxzH4PFCUqYb39Dae2Gem2KpxescM";
|
||||
// const mixFetchNetworkRequesterAddress= "GqiGWmKRCbGQFSqH88BzLKijvZgipnqhmbNFsmkZw84t.4L8sXFuAUyUYyHZYgMdM3AtiusKnYUft6Pd8e41rrCHA@6qQYb4ArXANU6HJDxzH4PFCUqYb39Dae2Gem2KpxescM";
|
||||
// local
|
||||
const mixFetchNetworkRequesterAddress =
|
||||
env.process.PREFFERED_NETWORK_REQUESTER;
|
||||
// const mixFetchNetworkRequesterAddress= "GqiGWmKRCbGQFSqH88BzLKijvZgipnqhmbNFsmkZw84t.4L8sXFuAUyUYyHZYgMdM3AtiusKnYUft6Pd8e41rrCHA@6qQYb4ArXANU6HJDxzH4PFCUqYb39Dae2Gem2KpxescM";
|
||||
|
||||
// STEP 1. construct config
|
||||
// those are just some examples, there are obviously more permutations;
|
||||
// note, the extra optional argument is of the following type:
|
||||
// /*
|
||||
// export interface MixFetchConfigOpts {
|
||||
// id?: string;
|
||||
// nymApi?: string;
|
||||
// nyxd?: string;
|
||||
// debug?: DebugWasm;
|
||||
// }
|
||||
// */
|
||||
//
|
||||
// const debug = no_cover_debug()
|
||||
//
|
||||
// #1
|
||||
// const config = new MixFetchConfig(mixFetchNetworkRequesterAddress, { id: 'my-awesome-mix-fetch-client', nymApi: validator, debug: debug} );
|
||||
// #2
|
||||
// const config = new MixFetchConfig(mixFetchNetworkRequesterAddress, { nymApi: validator, debug: debug} );
|
||||
// #3
|
||||
// const config = new MixFetchConfig(mixFetchNetworkRequesterAddress, { id: 'my-awesome-mix-fetch-client' } );
|
||||
//
|
||||
// #4
|
||||
const differentDebug = default_debug()
|
||||
const updatedTraffic = differentDebug.traffic;
|
||||
updatedTraffic.use_extended_packet_size = true
|
||||
updatedTraffic.average_packet_delay_ms = 666;
|
||||
differentDebug.traffic = updatedTraffic;
|
||||
// STEP 1. construct config
|
||||
// those are just some examples, there are obviously more permutations;
|
||||
// note, the extra optional argument is of the following type:
|
||||
// /*
|
||||
// export interface MixFetchConfigOpts {
|
||||
// id?: string;
|
||||
// nymApi?: string;
|
||||
// nyxd?: string;
|
||||
// debug?: DebugWasm;
|
||||
// }
|
||||
// */
|
||||
//
|
||||
// const debug = no_cover_debug()
|
||||
//
|
||||
// #1
|
||||
// const config = new MixFetchConfig(mixFetchNetworkRequesterAddress, { id: 'my-awesome-mix-fetch-client', nymApi: validator, debug: debug} );
|
||||
// #2
|
||||
// const config = new MixFetchConfig(mixFetchNetworkRequesterAddress, { nymApi: validator, debug: debug} );
|
||||
// #3
|
||||
// const config = new MixFetchConfig(mixFetchNetworkRequesterAddress, { id: 'my-awesome-mix-fetch-client' } );
|
||||
//
|
||||
// #4
|
||||
const differentDebug = default_debug();
|
||||
const updatedTraffic = differentDebug.traffic;
|
||||
updatedTraffic.use_extended_packet_size = true;
|
||||
updatedTraffic.average_packet_delay_ms = 666;
|
||||
differentDebug.traffic = updatedTraffic;
|
||||
|
||||
const config = new MixFetchConfig(mixFetchNetworkRequesterAddress, { debug: differentDebug } );
|
||||
//
|
||||
// // STEP 2. setup the client
|
||||
// // note, the extra optional argument is of the following type:
|
||||
// /*
|
||||
// export interface MixFetchOptsSimple {
|
||||
// preferredGateway?: string;
|
||||
// storagePassphrase?: string;
|
||||
// }
|
||||
// */
|
||||
// #1
|
||||
await setupMixFetchWithConfig(config)
|
||||
//
|
||||
// #2
|
||||
// await setupMixFetchWithConfig(config, { storagePassphrase: "foomp" })
|
||||
//
|
||||
// #3
|
||||
// await setupMixFetchWithConfig(config, { storagePassphrase: "foomp", preferredGateway })
|
||||
const config = new MixFetchConfig(mixFetchNetworkRequesterAddress, {
|
||||
debug: differentDebug,
|
||||
});
|
||||
//
|
||||
// // STEP 2. setup the client
|
||||
// // note, the extra optional argument is of the following type:
|
||||
// /*
|
||||
// export interface MixFetchOptsSimple {
|
||||
// preferredGateway?: string;
|
||||
// storagePassphrase?: string;
|
||||
// }
|
||||
// */
|
||||
// #1
|
||||
await setupMixFetchWithConfig(config);
|
||||
//
|
||||
// #2
|
||||
// await setupMixFetchWithConfig(config, { storagePassphrase: "foomp" })
|
||||
//
|
||||
// #3
|
||||
// await setupMixFetchWithConfig(config, { storagePassphrase: "foomp", preferredGateway })
|
||||
}
|
||||
|
||||
async function nativeSetup() {
|
||||
// const preferredGateway = "6qQYb4ArXANU6HJDxzH4PFCUqYb39Dae2Gem2KpxescM";
|
||||
// const validator = 'https://qa-nym-api.qa.nymte.ch/api';
|
||||
const preferredGateway = process.env.PREFERRED_GATEWAY;
|
||||
const validator = process.env.PREFERRED_VALIDATOR;
|
||||
|
||||
// local
|
||||
// const preferredNetworkRequester= "2o47bhnXWna6VEyt4mXMGQQAbXfpKmX7BkjkxUz8uQVi.6uQGnCqSczpXwh86NdbsCoDDXuqZQM9Uwko8GE7uC9g8@6qQYb4ArXANU6HJDxzH4PFCUqYb39Dae2Gem2KpxescM";
|
||||
// const preferredNetworkRequester= "GqiGWmKRCbGQFSqH88BzLKijvZgipnqhmbNFsmkZw84t.4L8sXFuAUyUYyHZYgMdM3AtiusKnYUft6Pd8e41rrCHA@6qQYb4ArXANU6HJDxzH4PFCUqYb39Dae2Gem2KpxescM";
|
||||
// local
|
||||
const preferredNetworkRequester = process.env.PREFFERED_NETWORK_REQUESTER;
|
||||
// const preferredNetworkRequester= "GqiGWmKRCbGQFSqH88BzLKijvZgipnqhmbNFsmkZw84t.4L8sXFuAUyUYyHZYgMdM3AtiusKnYUft6Pd8e41rrCHA@6qQYb4ArXANU6HJDxzH4PFCUqYb39Dae2Gem2KpxescM";
|
||||
|
||||
// those are just some examples, there are obviously more permutations;
|
||||
// note, the extra optional argument is of the following type:
|
||||
/*
|
||||
// those are just some examples, there are obviously more permutations;
|
||||
// note, the extra optional argument is of the following type:
|
||||
/*
|
||||
export interface MixFetchOpts extends MixFetchOptsSimple {
|
||||
clientId?: string;
|
||||
nymApiUrl?: string;
|
||||
@@ -147,165 +156,169 @@ async function nativeSetup() {
|
||||
and `DebugWasmOverride` is a rather nested struct that you can look up yourself : )
|
||||
*/
|
||||
|
||||
// #1
|
||||
// await setupMixFetch(preferredNetworkRequester)
|
||||
// #2
|
||||
// await setupMixFetch(preferredNetworkRequester, { nymApiUrl: validator })
|
||||
// // #3
|
||||
const noCoverTrafficOverride = {
|
||||
traffic: { disableMainPoissonPacketDistribution: true },
|
||||
coverTraffic: { disableLoopCoverTrafficStream: true },
|
||||
}
|
||||
const mixFetchOverride = {
|
||||
requestTimeoutMs: 10000
|
||||
}
|
||||
// #1
|
||||
// await setupMixFetch(preferredNetworkRequester)
|
||||
// #2
|
||||
// await setupMixFetch(preferredNetworkRequester, { nymApiUrl: validator })
|
||||
// // #3
|
||||
const noCoverTrafficOverride = {
|
||||
traffic: { disableMainPoissonPacketDistribution: true },
|
||||
coverTraffic: { disableLoopCoverTrafficStream: true },
|
||||
};
|
||||
const mixFetchOverride = {
|
||||
requestTimeoutMs: 10000,
|
||||
};
|
||||
|
||||
const extra = {
|
||||
hiddenGateways: [
|
||||
{
|
||||
owner: "LoveIslandEnjoyer",
|
||||
host: "gateway1.nymtech.net",
|
||||
explicitIp: "213.219.38.119",
|
||||
identityKey: "E3mvZTHQCdBvhfr178Swx9g4QG3kkRUun7YnToLMcMbM",
|
||||
sphinxKey: "CYcrjoJ8GT7Dp54zViUyyRUfegeRCyPifWQZHRgMZrfX"
|
||||
}
|
||||
]
|
||||
}
|
||||
const extra = {
|
||||
hiddenGateways: [
|
||||
{
|
||||
owner: process.env.HIDDEN_GATEWAY_OWNER,
|
||||
explicitIp: process.env.HIDDEN_GATEWAY_EXPLICIT_IP,
|
||||
host: process.env.HIDDEN_GATEWAY_HOST,
|
||||
sphinxKey: process.env.HIDDEN_GATEWAY_SPHINX_KEY,
|
||||
identityKey: process.env.HIDDEN_GATEWAY_IDENTITY_KEY,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
await setupMixFetch({
|
||||
// preferredNetworkRequester,
|
||||
preferredGateway: "E3mvZTHQCdBvhfr178Swx9g4QG3kkRUun7YnToLMcMbM",
|
||||
storagePassphrase: "foomp",
|
||||
forceTls: true,
|
||||
// nymApiUrl: validator,
|
||||
clientId: "my-client",
|
||||
clientOverride: noCoverTrafficOverride,
|
||||
mixFetchOverride,
|
||||
extra
|
||||
})
|
||||
await setupMixFetch({
|
||||
preferredNetworkRequester,
|
||||
preferredGateway: preferredGateway,
|
||||
storagePassphrase: "foomp",
|
||||
forceTls: true,
|
||||
nymApiUrl: validator,
|
||||
clientId: "my-client",
|
||||
clientOverride: noCoverTrafficOverride,
|
||||
mixFetchOverride,
|
||||
extra,
|
||||
});
|
||||
}
|
||||
|
||||
async function testMixFetch() {
|
||||
console.log('Instantiating Mix Fetch...');
|
||||
// await wasm_bindgenSetup()
|
||||
console.log("Instantiating Mix Fetch...");
|
||||
// await wasm_bindgenSetup()
|
||||
|
||||
await nativeSetup()
|
||||
await nativeSetup();
|
||||
|
||||
console.log("Mix Fetch client running!");
|
||||
|
||||
console.log('Mix Fetch client running!');
|
||||
// Set callback to handle messages passed to the worker.
|
||||
self.onmessage = async (event) => {
|
||||
if (event.data && event.data.kind) {
|
||||
switch (event.data.kind) {
|
||||
case "FetchPayload": {
|
||||
const { target } = event.data.args;
|
||||
const url = target;
|
||||
|
||||
// Set callback to handle messages passed to the worker.
|
||||
self.onmessage = async event => {
|
||||
if (event.data && event.data.kind) {
|
||||
switch (event.data.kind) {
|
||||
case 'FetchPayload': {
|
||||
const {target} = event.data.args;
|
||||
const url = target;
|
||||
// const args = { mode: "ors", redirect: "manual", signal }
|
||||
const args = {
|
||||
mode: "unsafe-ignore-cors",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
};
|
||||
|
||||
// const args = { mode: "ors", redirect: "manual", signal }
|
||||
const args = { mode: "unsafe-ignore-cors" }
|
||||
try {
|
||||
console.log("using mixFetch...");
|
||||
const mixFetchRes = await mixFetch(url, args);
|
||||
console.log(">>> MIX FETCH");
|
||||
await logFetchResult(mixFetchRes);
|
||||
console.log("done");
|
||||
} catch (e) {
|
||||
console.error("mix fetch request failure: ", e);
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('using mixFetch...');
|
||||
const mixFetchRes = await mixFetch(url, args)
|
||||
console.log(">>> MIX FETCH")
|
||||
await logFetchResult(mixFetchRes)
|
||||
// console.log("will disconnect");
|
||||
// await disconnectMixFetch()
|
||||
//
|
||||
// try {
|
||||
// console.log('using mixFetch...');
|
||||
// const mixFetchRes = await mixFetch(url, args)
|
||||
// console.log(">>> MIX FETCH")
|
||||
// await logFetchResult(mixFetchRes)
|
||||
//
|
||||
// console.log('done')
|
||||
//
|
||||
// } catch(e) {
|
||||
// console.error("mix fetch request failure: ", e)
|
||||
// }
|
||||
|
||||
console.log('done')
|
||||
|
||||
} catch(e) {
|
||||
console.error("mix fetch request failure: ", e)
|
||||
}
|
||||
|
||||
// console.log("will disconnect");
|
||||
// await disconnectMixFetch()
|
||||
//
|
||||
// try {
|
||||
// console.log('using mixFetch...');
|
||||
// const mixFetchRes = await mixFetch(url, args)
|
||||
// console.log(">>> MIX FETCH")
|
||||
// await logFetchResult(mixFetchRes)
|
||||
//
|
||||
// console.log('done')
|
||||
//
|
||||
// } catch(e) {
|
||||
// console.error("mix fetch request failure: ", e)
|
||||
// }
|
||||
|
||||
|
||||
// try {
|
||||
// console.log('using normal Fetch...');
|
||||
// const fetchRes = await fetch(url, args)
|
||||
// console.log(">>> NORMAL FETCH")
|
||||
// await logFetchResult(fetchRes)
|
||||
// } catch(e) {
|
||||
// console.error("fetch request failure: ", e)
|
||||
// }
|
||||
}
|
||||
}
|
||||
// try {
|
||||
// console.log('using normal Fetch...');
|
||||
// const fetchRes = await fetch(url, args)
|
||||
// console.log(">>> NORMAL FETCH")
|
||||
// await logFetchResult(fetchRes)
|
||||
// } catch(e) {
|
||||
// console.error("fetch request failure: ", e)
|
||||
// }
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// TODO: look into https://www.aaron-powell.com/posts/2019-02-08-golang-wasm-5-compiling-with-webpack/
|
||||
async function loadGoWasm() {
|
||||
const resp = await fetch(GO_WASM_URL);
|
||||
const resp = await fetch(GO_WASM_URL);
|
||||
|
||||
if ('instantiateStreaming' in WebAssembly) {
|
||||
const wasmObj = await WebAssembly.instantiateStreaming(resp, go.importObject)
|
||||
goWasm = wasmObj.instance
|
||||
go.run(goWasm)
|
||||
} else {
|
||||
const bytes = await resp.arrayBuffer()
|
||||
const wasmObj = await WebAssembly.instantiate(bytes, go.importObject)
|
||||
goWasm = wasmObj.instance
|
||||
go.run(goWasm)
|
||||
}
|
||||
if ("instantiateStreaming" in WebAssembly) {
|
||||
const wasmObj = await WebAssembly.instantiateStreaming(
|
||||
resp,
|
||||
go.importObject
|
||||
);
|
||||
goWasm = wasmObj.instance;
|
||||
go.run(goWasm);
|
||||
} else {
|
||||
const bytes = await resp.arrayBuffer();
|
||||
const wasmObj = await WebAssembly.instantiate(bytes, go.importObject);
|
||||
goWasm = wasmObj.instance;
|
||||
go.run(goWasm);
|
||||
}
|
||||
}
|
||||
|
||||
function setupRsGoBridge() {
|
||||
// (note: reason for intermediate `__rs_go_bridge__` object is to decrease global scope bloat
|
||||
// and to discourage users from trying to call those methods directly)
|
||||
self.__rs_go_bridge__ = {}
|
||||
self.__rs_go_bridge__.send_client_data = send_client_data
|
||||
self.__rs_go_bridge__.start_new_mixnet_connection = start_new_mixnet_connection
|
||||
self.__rs_go_bridge__.mix_fetch_initialised = mix_fetch_initialised
|
||||
self.__rs_go_bridge__.finish_mixnet_connection = finish_mixnet_connection
|
||||
// (note: reason for intermediate `__rs_go_bridge__` object is to decrease global scope bloat
|
||||
// and to discourage users from trying to call those methods directly)
|
||||
self.__rs_go_bridge__ = {};
|
||||
self.__rs_go_bridge__.send_client_data = send_client_data;
|
||||
self.__rs_go_bridge__.start_new_mixnet_connection =
|
||||
start_new_mixnet_connection;
|
||||
self.__rs_go_bridge__.mix_fetch_initialised = mix_fetch_initialised;
|
||||
self.__rs_go_bridge__.finish_mixnet_connection = finish_mixnet_connection;
|
||||
}
|
||||
|
||||
async function main() {
|
||||
console.log(">>>>>>>>>>>>>>>>>>>>> JS WORKER MAIN START");
|
||||
console.log(">>>>>>>>>>>>>>>>>>>>> JS WORKER MAIN START");
|
||||
|
||||
// load rust WASM package
|
||||
await wasm_bindgen(RUST_WASM_URL);
|
||||
console.log('Loaded RUST WASM');
|
||||
// load rust WASM package
|
||||
await wasm_bindgen(RUST_WASM_URL);
|
||||
console.log("Loaded RUST WASM");
|
||||
|
||||
// load go WASM package
|
||||
await loadGoWasm();
|
||||
console.log("Loaded GO WASM");
|
||||
// load go WASM package
|
||||
await loadGoWasm();
|
||||
console.log("Loaded GO WASM");
|
||||
|
||||
// sets up better stack traces in case of in-rust panics
|
||||
set_panic_hook();
|
||||
// sets up better stack traces in case of in-rust panics
|
||||
set_panic_hook();
|
||||
|
||||
setupRsGoBridge();
|
||||
setupRsGoBridge();
|
||||
|
||||
goWasmSetLogging("trace")
|
||||
goWasmSetLogging("trace");
|
||||
|
||||
// test mixFetch
|
||||
await testMixFetch();
|
||||
//
|
||||
// // run test on simplified and dedicated tester:
|
||||
// // await testWithTester()
|
||||
//
|
||||
// // hook-up the whole client for testing
|
||||
// // await testWithNymClient()
|
||||
//
|
||||
// // 'Normal' client setup (to send 'normal' messages)
|
||||
// // await normalNymClientUsage()
|
||||
//
|
||||
console.log(">>>>>>>>>>>>>>>>>>>>> JS WORKER MAIN END")
|
||||
// test mixFetch
|
||||
await testMixFetch();
|
||||
//
|
||||
// // run test on simplified and dedicated tester:
|
||||
// // await testWithTester()
|
||||
//
|
||||
// // hook-up the whole client for testing
|
||||
// // await testWithNymClient()
|
||||
//
|
||||
// // 'Normal' client setup (to send 'normal' messages)
|
||||
// // await normalNymClientUsage()
|
||||
//
|
||||
console.log(">>>>>>>>>>>>>>>>>>>>> JS WORKER MAIN END");
|
||||
}
|
||||
|
||||
// Let's get started!
|
||||
main();
|
||||
main();
|
||||
|
||||
Reference in New Issue
Block a user