网络

网络

QuickJS WasmEdge Runtime 支持 WasmEdge 的网络 sockets 拓展，所以 JavaScript 程序也可以在网络上建立 HTTP 连接。此文将向你展示相关的 HTTP 客户端和 HTTP 服务端例子.

WasmEdge 的网络 API 是非阻塞的，所以能够开发出强异步 I/O 交互的应用。当网络请求 handler 正在创建一个对外的请求并等待服务应答的时候，应用仍然可以处理另外一个进来的请求。这让单线程应用可以并发处理多个请求。

JavaScript 客户端网络通讯例子

以下是一个使用 JavaScript 编写的异步客户端的例子。你可以在 example_js/wasi_http_client.js 中找到源码。以下的代码会向你展示如何发送一个异步 HTTP GET 请求。

1. async function get_test() {
2. try {
3. let ss = await net.connect('152.136.235.225:80');
4. let req = new http.WasiRequest();
5. req.headers = { 'Host': '152.136.235.225' };
6. req.uri = '/get?a=123';
7. req.method = 'GET';
8. ss.write(req.encode());
9. print('wait get');
10. await handle_response(ss);
11. print('get end');

13. } catch (e) {
14. print('catch:', e);
15. }
16. }

以上代码可以在等待服务端应答的同时处理其他任务。当服务端返回数据后，handle_response() 会被异步调用，处理好数据后就会将内容打印出来。

1. async function handle_response(s) {
2. let buf = new http.Buffer();
3. let resp = undefined;
4. while (true) {
5. buf.append(await s.read());
6. if (resp == undefined) {
7. resp = buf.parseResponse();
8. }
9. if (resp instanceof http.WasiResponse) {
10. let resp_length = resp.bodyLength;
11. if (typeof (resp_length) === "number") {
12. if (buf.length >= resp.bodyLength) {
13. print('resp.body');
14. print(newStringFromUTF8(buf.buffer));
15. break;
16. }
17. } else {
18. throw new Error('no support');
19. }
20. }
21. }
22. }

使用以下 CLI 命令，就可以在 WasmEdge runtime 中运行以上的 JavaScript 代码。

1. cd example_js
2. wasmedge --dir .:. ../target/wasm32-wasi/release/wasmedge_quickjs.wasm wasi_http_client.js

将会有如下内容被打印出来。

1. {
2. "args": {
3. "a": "123"
4. },
5. "data": "hello",
6. "files": {},
7. "form": {},
8. "headers": {
9. "Content-Length": "5",
10. "Host": "152.136.235.225"
11. },
12. "json": null,
13. "origin": "20.124.39.106",
14. "url": "http://152.136.235.225/post?a=123"
15. }

以上应用例子发出了两个 HTTP 请求，一个是 GET 请求另一个是 POST 请求。该应用会异步等待这两个请求的应答数据，并且哪一个先从服务端返回就先会处理哪个。从日志中你可以看到这两个请求的 handlers 是交错执行的。

JavaScript 网络服务例子

以下的例子是使用 JavaScript 运行了一个监听 8000 端口的 TCP 服务器。接收到的网络请求都会被异步处理。你可以在 example_js/wasi_net_echo.js 中找到源码。

1. import * as net from 'wasi_net';

3. async function handle_client(cs) {
4. while (true) {
5. try {
6. let d = await cs.read();
7. if (d.byteLength <= 0) {
8. break;
9. }
10. let s = newStringFromUTF8(d);
11. cs.write('echo:' + s);
12. } catch (e) {
13. print(e);
14. }
15. }
16. }

18. async function server_start() {
19. let s = new net.WasiTcpServer(8000);
20. for (var i = 0; i < 100; i++) {
21. let cs = await s.accept();
22. handle_client(cs);
23. }
24. }

26. server_start();

调用 server_start() 方法会在 8000 端口启动一个监听服务。当一个请求进入，会异步传给 handle_client() function 函数处理。这意味着当应用返回应答数据后，它又可以处理下一个进来的请求了。

使用以下 CLI 命令，就可以在 WasmEdge runtime 中运行这段 JavaScript 代码。因为它将作为一个服务运行，你最好是以后台应用的形式启动。

1. cd example_js
2. nohup wasmedge --dir .:. ../target/wasm32-wasi/release/wasmedge_quickjs.wasm wasi_net_echo.js &

然后你就可以向它发出网络请求，观察运行效果。

1. $ curl -d "WasmEdge" -X POST http://localhost:8000
2. echo:WasmEdge

WasmEdge 的 wasi_net 包为 JavaScript 应用提供了一种自适应的动态网络栈。在很多高级用法中，我们基于这个包，设计了很多抽象良好的 API。在下一章节，我们会带着具体的常见应用，向你展示如何处理 HTTP 请求。在 React 服务器渲染文章中，我们还将会讨论一下如何基于这种异步网络的 API 来创建一个 React 服务器渲染功能。

JavaScript HTTP 服务器例子

假如你已经知道服务器的请问和应答都是基于 HTTP 协议的，这里有一些增强方法可以帮到你更好地处理这些请求。你可以在 example_js/wasi_http_echo.js 中找到源码。

1. import * as http from 'wasi_http';
2. import * as net from 'wasi_net';

4. async function handle_client(cs, handler_req) {
5. let buffer = new http.Buffer();

7. while (true) {
8. try {
9. let d = await cs.read();
10. if (d.byteLength <= 0) {
11. return;
12. }
13. buffer.append(d);
14. let req = buffer.parseRequest();
15. if (req instanceof http.WasiRequest) {
16. handler_req(cs, req);
17. break;
18. }
19. } catch (e) {
20. print(e);
21. }
22. }
23. }

25. function handler_req(cs, req) {
26. print("version=", req.version);
27. print("uri=", req.uri);
28. print("method=", req.method);
29. print("headers=", Object.keys(req.headers));
30. print("body=", newStringFromUTF8(req.body));

32. let resp = new http.WasiResponse();
33. let body = 'echo:' + newStringFromUTF8(req.body);
34. let r = resp.encode(body);
35. cs.write(r);
36. }

38. async function server_start() {
39. try {
40. let s = new net.WasiTcpServer(8000);
41. for (var i = 0; i < 100; i++) {
42. let cs = await s.accept();
43. try {
44. handle_client(cs, handler_req);
45. } catch (e) {
46. print(e);
47. }
48. }
49. } catch (e) {
50. print(e);
51. }
52. }

54. server_start();

server_start() 方法会启动一个监听 8000 端口的服务。当请求进来，会被传给 handle_client() 方法来处理。当请求是合法的 HTTP 请求，对应的 handler 方法会调用 handle_req() 来解析对应的字段，组装新的 HTTP 应答，然后异步把应答数据发送回去。这意味着当应用发送完数据，又能继续处理下一个进来的请求了。

使用以下 CLI 命令，就可以在 WasmEdge runtime 中运行这段 JavaScript 代码。因为它将作为一个服务运行，你最好是以后台应用的形式运行。

1. cd example_js
2. nohup wasmedge --dir .:. ../target/wasm32-wasi/release/wasmedge_quickjs.wasm wasi_http_echo.js &

然后你就可以向它发出网络请求，观察运行效果。

1. $ curl -d "WasmEdge" -X POST http://localhost:8000
2. echo:WasmEdge

在异步 HTTP 网络编程中，开发者可以安全并高效地在 WasmEdge 中使用 JavaScript 创建强交互的应用，例如数据库驱动的微服务。

3.2.2. 网络

网络

JavaScript 客户端网络通讯例子

JavaScript 网络服务例子

JavaScript HTTP 服务器例子