Skip to content

Commit 77c64e9

Browse files
vasilevvasilev
committed
Added browser example for package:requests.
1 parent 3ff1759 commit 77c64e9

File tree

5 files changed

+141
-0
lines changed

5 files changed

+141
-0
lines changed

‎README.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,25 @@ using `package:dio`
104104

105105
[Demo](https://wasm-outbound-http-examples.github.io/dart/package-dio/)
106106

107+
</td>
108+
<td> </td>
109+
</tr>
110+
<tr>
111+
<td>6</td>
112+
<td>
113+
114+
[package: requests](browser-package-requests/README.md)
115+
116+
</td>
117+
<td>
118+
119+
using `package:requests`
120+
121+
</td>
122+
<td>
123+
124+
[Demo](https://wasm-outbound-http-examples.github.io/dart/package-requests/)
125+
107126
</td>
108127
<td> </td>
109128
</tr>

‎browser-package-requests/README.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Use Dart's package:requests 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:requests` [v5.0.0](https://github.com/jossef/requests/releases/tag/5.0.0),
7+
Chrome browser v133.0, and Firefox browser v135.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-requests
20+
```
21+
22+
2. It appears the latest dart-requests' version 5.0.0 is not published on pub.dev, wherefore this library
23+
is installed from Github repo directly. Ensure all dependencies are installed:
24+
25+
```sh
26+
dart pub get
27+
```
28+
29+
### Building
30+
31+
1. `cd` into the `web` subfolder, where sources are located:
32+
33+
```sh
34+
cd web
35+
```
36+
37+
2. Compile the example:
38+
39+
```sh
40+
dart compile wasm main.dart
41+
```
42+
43+
### Test with browser
44+
45+
1. Run simple HTTP server to temporarily publish project to Web:
46+
47+
```sh
48+
python3 -m http.server
49+
```
50+
51+
Codespace will show you "Open in Browser" button. Just click that button or
52+
obtain web address from "Forwarded Ports" tab.
53+
54+
2. As `index.html` and a 193k-sized wasm file are loaded into browser, refer to browser developer console
55+
to see the results.
56+
57+
58+
### Finish
59+
60+
Perform your own experiments if desired.

‎browser-package-requests/pubspec.yaml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
name: browser_package_requests
2+
description: Make HTTP requests from inside WASM in Dart using package:requests.
3+
version: 1.0.0
4+
repository: https://github.com/wasm-outbound-http-examples/dart
5+
6+
environment:
7+
sdk: ^3.5.2
8+
9+
dependencies:
10+
web: ^0.5.1
11+
requests:
12+
git:
13+
url: https://github.com/jossef/requests.git
14+
ref: 5.0.0
15+
16+
dev_dependencies:
17+
build_runner: ^2.4.8
18+
build_web_compilers: ^4.0.9
19+
lints: ^4.0.0

‎browser-package-requests/web/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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:requests</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:requests</h2>
18+
19+
<p>This example uses <a href="https://pub.dev/packages/requests">packages/requests</a>, but its new version 5.0.0 from
20+
<a href="https://github.com/jossef/requests/releases/tag/5.0.0">Github repo</a>.</p>
21+
22+
<p>See the output in browser developer console.</p>
23+
24+
<p>Actual code:</p>
25+
<pre>
26+
27+
import 'package:requests/requests.dart';
28+
29+
void main() async {
30+
final resp = await Requests.get('https://httpbin.org/anything');
31+
print('body: ${resp.content()}');
32+
}
33+
34+
</pre>
35+
<footer><small>Created for (wannabe-awesome) <a href="https://github.com/vasilev/HTTP-request-from-inside-WASM">list</a></small></footer>
36+
</body>
37+
</html>

‎browser-package-requests/web/main.dart‎

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

0 commit comments

Comments
 (0)