Home
This page seeks to provide information on the integration of TED Wasm used in TED-GUI App. Hopefully this will enable enough information to build your own html and javascript to interact with TED Wasm.
A good place to start with WebAssembly/Wasm will be WebAssembly Website and Mozilla Site on using WebAssembly on browser. TED-GUI wasm was an extension of TED app both written in GO. Its the same application logic but with slight modification compiled for wasm. GOlang has since version 1.11 supported WASM/JS as beta port. Some of the works are still in development. Wasm interacts with the browser frontend using js, and it is possible to build a html web app with wasm interacting with js. Go WebAssembly provides the documentation and Syscall/js provides the documentation on the js API available for js to interact with GO function within wasm.
TED-GUI wasm uses a much simplier approach. Using the same concept as TED, it exposes the CLI through go/flags and allows js to interact with the wasm by passing the necessary CLI arguments. This Wiki the CLI arguments and shows how js can interact using argv.js. With this information, you can build a html or WebApp using JS with TED-GUI wasm.
This is taken from a Firefox browser with developer console. TED-GUI wasm is triggered without any arguments and the following error is output to console. The binary expects the following argument to be supplied to it
-e Encryption set to true by default, to decrypt set -e=false or -e=0
-p passphrase to be used for encryption or decryption. Please remember the passphrase.
-t text to be encipher/decipher
From the same console, you will also notice an array with [ "ted-wb.wasm", "-p", "", "", "-t", "" ] This is javascript using argv.js to pass the arguments in array to wasm. The name of the wasm must come first as the js api expects it, but the rest of the arguments need not be in the right sequence, however all 3 arguments are needed.
An error free execution would look like this
Notice the array [ "ted-wb.wasm", "-p", "123", "-e", "-t", "hello%20world!" ] which correlates to the input and selection on the html form.
You can design your html or webapp and provides the 3 necessary inputs to TED-GUI wasm for computing.
Since Go version 1.11, Golang supply wasm_exec.js and wasm_exec.html as part of the package. The html and js provides a sample on loading your wasm file in web browser. Go WebAssembly describe this and Mozilla Site for WebAssembly gives the detail description on how WebAssembly is loaded.
TED-GUI html and js modified from the supplied GO package wasm_exec.html and wasm_exec.js to pass the CLI arguments from the html form front-end using javascript.
On TED-GUI html, it loads wasm_exec.js and loads the wasm binary using WebAssembly instantiateStreaming method as describe in Mozilla Documentation .
<html>
<head>
<meta charset="utf-8"/>
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("ted-wb.wasm"), go.importObject).then((result) => {
mod = result.module;
inst = result.instance;
});
</script>
</head>
<body></body>
</html>
And insert the CLI argument for TED after obtaining it from User's input via FORM or other mechanism by
go.argv = ['ted-wb.wasm', '-p', pw, ed, '-t', text];
finally launching function to trigger "go.run" by run();
async function run() {
await go.run(inst);
inst = await WebAssembly.instantiate(mod, go.importObject); // reset instance
}
To obtain the results from ted-wb.wasm, we will have to edit wasm_exec.js, otherwise the results is only send to debug console via console.log. In TED-GUI, the compute results from ted-wb.wasm is contain within a variable "outtext", which is used in textarea form display.
global.fs = {
constants: { O_WRONLY: -1, O_RDWR: -1, O_CREAT: -1, O_TRUNC: -1, O_APPEND: -1, O_EXCL: -1 }, // unused
writeSync(fd, buf) {
outputBuf += decoder.decode(buf);
const nl = outputBuf.lastIndexOf("\n");
if (nl != -1) {
outtext.value += outputBuf.substr(0,nl) +"\n"; //result output to outtext
console.log(outputBuf.substr(0, nl));
outputBuf = outputBuf.substr(nl + 1);