Skip to content

Commit b909658

Browse files
vasilevvasilev
committed
Added browser examples for package:fetch_api and package:fetch_client.
1 parent 50a6e36 commit b909658

File tree

11 files changed

+251
-2
lines changed

11 files changed

+251
-2
lines changed

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,11 @@ This devcontainer is configured to provide you a Dart SDK version 3.4.0.
1010
2. Example in `browser-package-web` directory allows you to experiment with browser example (same as demo) using `package:web`.
1111
For details, see the [README](browser-package-web/README.md).
1212
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.
1319

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

‎browser-package-fetch-api/README.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Use Dart's package:fetch_api to send HTTP(s) requests from inside WASM
2+
3+
## Instructions for this devcontainer
4+
5+
Tested with Dart SDK [v3.4.0](https://github.com/dart-lang/sdk/releases/tag/3.4.0),
6+
`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.
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-package-fetch-api
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 74k-sized wasm file are loaded into browser, refer to browser developer console
54+
to see the results.
55+
56+
57+
### Finish
58+
59+
Perform your own experiments if desired.

‎browser-package-fetch-api/pubspec.yaml‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
name: browser_package_fetch_api
2+
description: Make HTTP requests from inside WASM in Dart using package:fetch_api.
3+
version: 1.0.0
4+
repository: https://github.com/wasm-outbound-http-examples/dart
5+
6+
environment:
7+
sdk: ^3.4.0
8+
9+
# Add regular dependencies here.
10+
dependencies:
11+
fetch_api: ^2.2.0
12+
web: ^0.5.1
13+
14+
dev_dependencies:
15+
build_runner: ^2.4.8
16+
build_web_compilers: ^4.0.9
17+
lints: ^3.0.0

‎browser-package-fetch-api/web/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>HTTP request from WASM in Dart using package:fetch_api</title>
7+
<script type="module">
8+
import { instantiate, invoke } from "./main.mjs";
9+
10+
const module = await WebAssembly.compileStreaming(fetch('main.wasm'));
11+
const instance = await instantiate(module);
12+
invoke(instance);
13+
</script>
14+
</head>
15+
16+
<body>
17+
<h2>HTTP Request from inside WASM in Dart using package:fetch_api</h2>
18+
19+
<p>This example uses <a href="https://pub.dev/packages/fetch_api">packages/fetch_api</a>.</p>
20+
21+
<p>See the output in browser developer console.</p>
22+
23+
<p>Actual code:</p>
24+
<pre>
25+
26+
import 'package:fetch_api/fetch_api.dart';
27+
28+
final resp = await fetch('https://httpbin.org/anything');
29+
final txt = await resp.text();
30+
print('body: ${txt}');
31+
32+
</pre>
33+
<footer><small>Created for (wannabe-awesome) <a href="https://github.com/vasilev/HTTP-request-from-inside-WASM">list</a></small></footer>
34+
</body>
35+
</html>

‎browser-package-fetch-api/web/main.dart‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import 'package:fetch_api/fetch_api.dart';
2+
3+
void main() async {
4+
final resp = await fetch('https://httpbin.org/anything');
5+
final txt = await resp.text();
6+
print('body: ${txt}');
7+
}

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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.4.0](https://github.com/dart-lang/sdk/releases/tag/3.4.0),
6+
`packages:fetch_client` [v1.1.2](https://pub.dev/packages/fetch_client/versions/1.1.2),
7+
Chrome browser v124.0, and Firefox browser v122.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-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+
57+
### Finish
58+
59+
Perform your own experiments if desired.

‎browser-package-fetch-client/pubspec.yaml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: browser_package_fetch_client
2+
description: Make HTTP requests from inside WASM in Dart using package:fetch_client.
3+
version: 1.0.0
4+
repository: https://github.com/wasm-outbound-http-examples/dart
5+
6+
environment:
7+
sdk: ^3.4.0
8+
9+
# Add regular dependencies here.
10+
dependencies:
11+
fetch_client: ^1.1.2
12+
http: ^1.2.1
13+
web: ^0.5.1
14+
15+
dev_dependencies:
16+
build_runner: ^2.4.8
17+
build_web_compilers: ^4.0.9
18+
lints: ^3.0.0

‎browser-package-fetch-client/web/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>HTTP request from WASM in Dart using package:fetch_client</title>
7+
<script type="module">
8+
import { instantiate, invoke } from "./main.mjs";
9+
10+
const module = await WebAssembly.compileStreaming(fetch('main.wasm'));
11+
const instance = await instantiate(module);
12+
invoke(instance);
13+
</script>
14+
</head>
15+
16+
<body>
17+
<h2>HTTP Request from inside WASM in Dart using package:fetch_client</h2>
18+
19+
<p>This example uses <a href="https://pub.dev/packages/fetch_client">packages/fetch_client</a>.</p>
20+
21+
<p>See the output in browser developer console.</p>
22+
23+
<p>Actual code:</p>
24+
<pre>
25+
26+
import 'package:fetch_client/fetch_client.dart';
27+
28+
final client = FetchClient(mode: RequestMode.cors);
29+
final uri = Uri.parse('https://httpbin.org/anything');
30+
final resp = await client.get(uri);
31+
32+
print('${resp.body}');
33+
client.close();
34+
35+
</pre>
36+
<footer><small>Created for (wannabe-awesome) <a href="https://github.com/vasilev/HTTP-request-from-inside-WASM">list</a></small></footer>
37+
</body>
38+
</html>

‎browser-package-fetch-client/web/main.dart‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import 'package:fetch_client/fetch_client.dart';
2+
3+
void main() async {
4+
final client = FetchClient(mode: RequestMode.cors);
5+
final uri = Uri.parse('https://httpbin.org/anything');
6+
final resp = await client.get(uri);
7+
8+
print('${resp.body}');
9+
client.close();
10+
}

‎browser-package-http/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
Tested with Dart SDK [v3.4.0](https://github.com/dart-lang/sdk/releases/tag/3.4.0),
66
`packages:http` [v1.2.1](https://pub.dev/packages/http/versions/1.2.1),
7-
and Chrome browser v124.0.
7+
Chrome browser v124.0, and Firefox browser v122.0.
88

99
### Preparation
1010

0 commit comments

Comments
 (0)