Skip to content

Commit 3ff1759

Browse files
vasilevvasilev
committed
Added browser example for package:dio.
Added Node.js / Deno examples for package:fetch_api and package:fetch_client. Added Node.js feature to dev container to run Node examples. Reorganized examples list into table.
1 parent b909658 commit 3ff1759

File tree

17 files changed

+294
-24
lines changed

17 files changed

+294
-24
lines changed

‎.devcontainer/devcontainer.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
{
22
"name": "Dart: HTTP request from WASM",
3-
"postCreateCommand": "bash .devcontainer/postCreate.sh"
4-
}
3+
"postCreateCommand": "bash .devcontainer/postCreate.sh",
4+
"features": {
5+
"ghcr.io/devcontainers/features/node:1": {"version":"latest"}
6+
}
7+
}

‎.devcontainer/postCreate.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
wget -O /tmp/dart.deb https://storage.googleapis.com/dart-archive/channels/stable/release/3.4.0/linux_packages/dart_3.4.0-1_amd64.deb
1+
wget -O /tmp/dart.deb https://storage.googleapis.com/dart-archive/channels/stable/release/3.5.2/linux_packages/dart_3.5.2-1_amd64.deb
22
sudo dpkg -i /tmp/dart.deb
33
rm /tmp/dart.deb
44
dart --disable-analytics

‎README.md‎

Lines changed: 105 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,112 @@
11
# Make HTTP requests from inside WASM in Dart
22

3-
This devcontainer is configured to provide you a Dart SDK version 3.4.0.
3+
This devcontainer is configured to provide you a Dart SDK version 3.5.2 and the latest Node.js.
44

55
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/wasm-outbound-http-examples/dart)
66

7-
1. Example in `browser-package-http` directory allows you to experiment with browser example (same as demo) using `package:http`.
8-
For details, see the [README](browser-package-http/README.md).
9-
Also [browser demo](https://wasm-outbound-http-examples.github.io/dart/package-http/) is available.
10-
2. Example in `browser-package-web` directory allows you to experiment with browser example (same as demo) using `package:web`.
11-
For details, see the [README](browser-package-web/README.md).
12-
Also [browser demo](https://wasm-outbound-http-examples.github.io/dart/package-web/) is available.
13-
3. Example in `browser-package-fetch-api` directory allows you to experiment with browser example (same as demo) using `package:fetch_api`.
14-
For details, see the [README](browser-package-fetch-api/README.md).
15-
Also [browser demo](https://wasm-outbound-http-examples.github.io/dart/package-fetch-api/) is available.
16-
4. Example in `browser-package-fetch-client` directory allows you to experiment with browser example (same as demo) using `package:fetch_client`.
17-
For details, see the [README](browser-package-fetch-client/README.md).
18-
Also [browser demo](https://wasm-outbound-http-examples.github.io/dart/package-fetch-client/) is available.
7+
<table>
8+
<tr>
9+
<th>#</th>
10+
<th>Example</th>
11+
<th>Description</th>
12+
<th>Browser demo</th>
13+
<th>Node.js / Deno support</th>
14+
</tr>
15+
<tr>
16+
<td>1</td>
17+
<td>
18+
19+
[package: http](browser-package-http/README.md)
20+
21+
</td>
22+
<td>
23+
24+
using `package:http`
25+
26+
</td>
27+
<td>
28+
29+
[Demo](https://wasm-outbound-http-examples.github.io/dart/package-http/)
30+
31+
</td>
32+
<td> </td>
33+
</tr>
34+
<tr>
35+
<td>2</td>
36+
<td>
37+
38+
[package: web](browser-package-web/README.md)
39+
40+
</td>
41+
<td>
42+
43+
using `package:web`
44+
45+
</td>
46+
<td>
47+
48+
[Demo](https://wasm-outbound-http-examples.github.io/dart/package-web/)
49+
50+
</td>
51+
<td> </td>
52+
</tr>
53+
<tr>
54+
<td>3</td>
55+
<td>
56+
57+
[package: fetch_api](browser-and-node-package-fetch-api/README.md)
58+
59+
</td>
60+
<td>
61+
62+
using `package:fetch_api`
63+
64+
</td>
65+
<td>
66+
67+
[Demo](https://wasm-outbound-http-examples.github.io/dart/package-fetch-api/)
68+
69+
</td>
70+
<td> + </td>
71+
</tr>
72+
<tr>
73+
<td>4</td>
74+
<td>
75+
76+
[package: fetch_client](browser-and-node-package-fetch-client/README.md)
77+
78+
</td>
79+
<td>
80+
81+
using `package:fetch_client`
82+
83+
</td>
84+
<td>
85+
86+
[Demo](https://wasm-outbound-http-examples.github.io/dart/package-fetch-client/)
87+
88+
</td>
89+
<td> + </td>
90+
</tr>
91+
<tr>
92+
<td>5</td>
93+
<td>
94+
95+
[package: dio](browser-package-dio/README.md)
96+
97+
</td>
98+
<td>
99+
100+
using `package:dio`
101+
102+
</td>
103+
<td>
104+
105+
[Demo](https://wasm-outbound-http-examples.github.io/dart/package-dio/)
106+
107+
</td>
108+
<td> </td>
109+
</tr>
110+
</table>
19111

20112
<sub>Created for (wannabe-awesome) [list](https://github.com/vasilev/HTTP-request-from-inside-WASM)</sub>

‎browser-package-fetch-api/README.md‎ renamed to ‎browser-and-node-package-fetch-api/README.md‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22

33
## Instructions for this devcontainer
44

5-
Tested with Dart SDK [v3.4.0](https://github.com/dart-lang/sdk/releases/tag/3.4.0),
5+
Tested with Dart SDK [v3.5.2](https://github.com/dart-lang/sdk/releases/tag/3.5.2),
66
`packages:fetch_api` [v2.2.0](https://pub.dev/packages/fetch_api/versions/2.2.0),
7-
Chrome browser v124.0, and Firefox browser v122.0.
7+
Chrome browser v124.0, Firefox browser v122.0, Deno 1.46.3, and Node.js 22.8.0 .
88

99
### Preparation
1010

@@ -16,7 +16,7 @@ Chrome browser v124.0, and Firefox browser v122.0.
1616
1. `cd` into the folder of this example:
1717

1818
```sh
19-
cd browser-package-fetch-api
19+
cd browser-and-node-package-fetch-api
2020
```
2121

2222
2. Ensure all dependencies are installed:
@@ -53,6 +53,27 @@ obtain web address from "Forwarded Ports" tab.
5353
2. As `index.html` and a 74k-sized wasm file are loaded into browser, refer to browser developer console
5454
to see the results.
5555

56+
### Test with Node.js
57+
58+
1. Run with Node.js:
59+
60+
```sh
61+
node node-and-deno.mjs
62+
```
63+
64+
### Test with Deno
65+
66+
1. Install Deno:
67+
68+
```sh
69+
curl -fsSL https://deno.land/x/install/install.sh | sh
70+
```
71+
72+
2. Run with Deno:
73+
74+
```sh
75+
~/.deno/bin/deno run --allow-read --allow-net node-and-deno.mjs
76+
```
5677

5778
### Finish
5879

‎browser-package-fetch-api/pubspec.yaml‎ renamed to ‎browser-and-node-package-fetch-api/pubspec.yaml‎

File renamed without changes.

‎browser-package-fetch-api/web/index.html‎ renamed to ‎browser-and-node-package-fetch-api/web/index.html‎

File renamed without changes.

‎browser-package-fetch-api/web/main.dart‎ renamed to ‎browser-and-node-package-fetch-api/web/main.dart‎

File renamed without changes.

‎browser-and-node-package-fetch-api/web/node-and-deno.mjs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import fs from 'node:fs/promises';
2+
import { instantiate, invoke } from './main.mjs';
3+
4+
const buffer = await fs.readFile('./main.wasm');
5+
const module = await WebAssembly.compile(buffer);
6+
const instance = await instantiate(module);
7+
8+
invoke(instance);

‎browser-and-node-package-fetch-client/README.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# Use Dart's package:fetch_client to send HTTP(s) requests from inside WASM
2+
3+
## Instructions for this devcontainer
4+
5+
Tested with Dart SDK [v3.5.2](https://github.com/dart-lang/sdk/releases/tag/3.5.2),
6+
`packages:fetch_client` [v1.1.2](https://pub.dev/packages/fetch_client/versions/1.1.2),
7+
Chrome browser v124.0, Firefox browser v122.0, Deno 1.46.3, and Node.js 22.8.0 .
8+
9+
### Preparation
10+
11+
1. Open this repo in devcontainer, e.g. using Github Codespaces.
12+
Type or copy/paste following commands to devcontainer's terminal.
13+
14+
### Installation
15+
16+
1. `cd` into the folder of this example:
17+
18+
```sh
19+
cd browser-and-node-package-fetch-client
20+
```
21+
22+
2. Ensure all dependencies are installed:
23+
24+
```sh
25+
dart pub get
26+
```
27+
28+
### Building
29+
30+
1. `cd` into the `web` subfolder, where sources are located:
31+
32+
```sh
33+
cd web
34+
```
35+
36+
2. Compile the example:
37+
38+
```sh
39+
dart compile wasm main.dart
40+
```
41+
42+
### Test with browser
43+
44+
1. Run simple HTTP server to temporarily publish project to Web:
45+
46+
```sh
47+
python3 -m http.server
48+
```
49+
50+
Codespace will show you "Open in Browser" button. Just click that button or
51+
obtain web address from "Forwarded Ports" tab.
52+
53+
2. As `index.html` and a 315k-sized wasm file are loaded into browser, refer to browser developer console
54+
to see the results.
55+
56+
### Test with Node.js
57+
58+
1. Run with Node.js:
59+
60+
```sh
61+
node node-and-deno.mjs
62+
```
63+
64+
### Test with Deno
65+
66+
1. Install Deno:
67+
68+
```sh
69+
curl -fsSL https://deno.land/x/install/install.sh | sh
70+
```
71+
72+
2. Run with Deno:
73+
74+
```sh
75+
~/.deno/bin/deno run --allow-read --allow-net node-and-deno.mjs
76+
```
77+
78+
### Finish
79+
80+
Perform your own experiments if desired.

‎browser-package-fetch-client/pubspec.yaml‎ renamed to ‎browser-and-node-package-fetch-client/pubspec.yaml‎

File renamed without changes.

0 commit comments

Comments
 (0)