Running Go CLI programs in the browser

栏目: IT技术 · 发布时间: 4年前

内容简介:Turns out it’s almost shockingly easy to run Go CLI programs in the browser with WebAssembly (WASM); as an example I’ll use myThe resulting binary is rather large (5.1M); TinyGo can be used to create smaller builds, but itWe then need to load the

Turns out it’s almost shockingly easy to run Go CLI programs in the browser with WebAssembly (WASM); as an example I’ll use my uni program. Building is as easy as:

GOOS=js GOARCH=wasm go build -o wasm/main.wasm

The resulting binary is rather large (5.1M); TinyGo can be used to create smaller builds, but it doesn’t support os.Args yet , so it won’t work here. After gzip compression it’s only 1.3M, so that’s manageable (and still smaller than many “text-only” websites).

We then need to load the main.wasm binary:

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script src="wasm_exec.js"></script>
    <script>
        const go = new Go();
        WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
            go.run(result.instance);
        });
    </script>
</body>
</html>

Copy the wasm_exec.js file from the Go source repo ( $(go env GOROOT)/misc/wasm/wasm_exec.js ), or GitHub .

You can’t load the HTML file the local filesystem as the browser will refuse to load the wasm file; you’ll have to use a webserver which serves wasm files with the correct MIME type, for example with Python:

#!/usr/bin/env python3
import http.server
h = http.server.SimpleHTTPRequestHandler
h.extensions_map = {'': 'text/html', '.wasm': 'application/wasm', '.js': 'application/javascript'}
http.server.HTTPServer(('127.0.0.1', 2000), h).serve_forever()

Going to http://localhost:2000 will fetch the file and run uni ; the JS console should display:

uni: no command given
exit code 1

As if we typed uni on the CLI. To give it some arguments set go.argv :

<script>
        const go = new Go();
        WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
            // Remember that argv[0] is the program name.
            go.argv = ['uni', '-q', 'identify', 'wasm'];
            go.run(result.instance);
        });
</script>

Which will give the expected output in the console:

'w'  U+0077  119    77          w     LATIN SMALL LETTER W (Lowercase_Letter)
'a'  U+0061  97     61          a     LATIN SMALL LETTER A (Lowercase_Letter)
's'  U+0073  115    73          s     LATIN SMALL LETTER S (Lowercase_Letter)
'm'  U+006D  109    6d          m     LATIN SMALL LETTER M (Lowercase_Letter)

Now it’s a simple matter of connecting an input element to go.argv ; this also fetches the main.wasm just once and re-runs it, instead of re-fetching it every time:

<input id="input">
<script src="wasm_exec.js"></script>
<script>
	fetch('main.wasm').then(response => response.arrayBuffer()).then(function(bin) {
			input.addEventListener('keydown', function(e) {
				if (e.keyCode !== 13)  // Enter
					return;

				e.preventDefault();

				const go = new Go();
				go.argv = ['uni'].concat(this.value.split(' '));
				this.value = '';
				WebAssembly.instantiate(bin, go.importObject).then((result) => {
					go.run(result.instance);
				});
			});
        });
</script>

Overwrite the global.fs.writeSync from wasm_exec.js to display the output in the HTML page instead of the console:

<script>
	fetch('main.wasm').then(response => response.arrayBuffer()).then(function(bin) {
			input.addEventListener('keydown', function(e) {
				if (e.keyCode !== 13)  // Enter
					return;

				e.preventDefault();

				const go = new Go();
				go.argv = ['uni'].concat(this.value.split(' '));
				this.value = '';

				// Write stdout to terminal.
				let outputBuf = '';
				const decoder = new TextDecoder("utf-8");
				global.fs.writeSync = function(fd, buf) {
					outputBuf += decoder.decode(buf);
					const nl = outputBuf.lastIndexOf("\n");
					if (nl != -1) {
						window.output.innerText += outputBuf.substr(0, nl + 1);
						window.scrollTo(0, document.body.scrollHeight);
						outputBuf = outputBuf.substr(nl + 1);
					}
					return buf.length;
				};

				WebAssembly.instantiate(bin, go.importObject).then((result) => {
					go.run(result.instance);
				});
			});
        });
</script>

And that’s pretty much it; 30 lines of JavaScript to run CLI applications in the browser :-) The only change I had to make to uni Go code was adding a build tag .

There are plenty of other things that can be improved: some better styling, reading from stdin, keybinds, loading indicator, etc. The full version does some of that. Take a look at index.html and term.js in case you’re interested. It could still be improved further, but I thought this was “good enough” for a basic demo :-)


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

编程之美

编程之美

《编程之美》小组 编 / 电子工业出版社 / 2008-3 / 40.00元

这本书收集了约60道算法和程序设计题目,这些题目大部分在近年的笔试、面试中出现过,或者是被微软员工热烈讨论过。作者试图从书中各种有趣的问题出发,引导读者发现问题,分析问题,解决问题,寻找更优的解法。本书的内容分为下面几个部分: (1)游戏之乐:从游戏和其他有趣问题出发,化繁为简,分析总结。 (2)数字之魅:编程的过程实际上就是和数字及字符打交道的过程。这一部分收集了一些好玩的对数字进行......一起来看看 《编程之美》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

URL 编码/解码
URL 编码/解码

URL 编码/解码