Skip to content

Commit a5b5fbd

Browse files
vasilevvasilev
committed
Added browser and Node.js/Bun/Deno examples using RestSharp library.
Changed devcontainer to .Net SDK 9.0 and installing wasm-tools and wasm-experimental workloads automatically. Reorganized examples list to table.
1 parent 397d898 commit a5b5fbd

File tree

8 files changed

+287
-8
lines changed

8 files changed

+287
-8
lines changed

‎.devcontainer/devcontainer.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"name": "DotNet: HTTP request from WASM",
3-
"image": "mcr.microsoft.com/dotnet/sdk:8.0",
3+
"image": "mcr.microsoft.com/dotnet/sdk:9.0",
44
"features": {
55
"ghcr.io/devcontainers/features/common-utils": {},
66
"ghcr.io/devcontainers/features/node:1": {}
77
},
8-
"postCreateCommand": "apt-get install -y python3",
8+
"postCreateCommand": "bash .devcontainer/postCreate.sh",
99
"customizations": {
1010
"vscode": {
1111
"extensions": [

‎.devcontainer/postCreate.sh

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
dotnet workload install wasm-tools
2+
dotnet workload install wasm-experimental
3+
apt-get update
4+
apt-get install -y python3 # need libpython3-stdlib / shlex.py for Release builds
5+
apt-get clean

‎README.md

+74-6
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,85 @@
11
# Make HTTP requests from inside WASM in C# / .Net
22

3-
This devcontainer is configured to provide you a DotNet SDK 8.0 and latest version of Node.js.
3+
This devcontainer is configured to provide you a DotNet SDK 9.0 (with installed workloads `wasm-tools` and `wasm-experimental`)
4+
and the latest version of Node.js.
45

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

7-
1. [Browser demo](https://wasm-outbound-http-examples.github.io/dotnet/).
8+
### Browser / JS runtime Examples
89

10+
<table>
11+
<tr>
12+
<th>#</th>
13+
<th>Example</th>
14+
<th>Description</th>
15+
<th>Browser demo</th>
16+
</tr>
17+
<tr>
18+
<td>1</td>
19+
<td>
920

10-
2. Example in `browser-and-node/browser` directory allows you to build a browser example (same as demo) using standard library's `System.Net.Http.HttpClient` yourself and experiment with it.
11-
For details, see its [README](browser-and-node/browser/README.md).
21+
[System.Net.Http.HttpClient for browser](browser-and-node/browser/README.md)
1222

23+
</td>
24+
<td>
1325

14-
3. Example in `browser-and-node/node` directory allows you to build a Node.js / Bun / Deno example using standard `System.Net.Http.HttpClient` yourself and experiment with it.
15-
For details, see its [README](browser-and-node/node/README.md).
26+
Use `HttpClient` from standard library to send HTTP requests from web browser.
27+
28+
</td>
29+
<td>
30+
31+
[Demo](https://wasm-outbound-http-examples.github.io/dotnet/)
32+
33+
</td>
34+
</tr>
35+
<tr>
36+
<td>2</td>
37+
<td>
38+
39+
[System.Net.Http.HttpClient for Node / Bun / Deno](browser-and-node/node/README.md)
40+
41+
</td>
42+
<td>
43+
44+
Use `HttpClient` from standard library to send HTTP requests from standalone / server-side JS runtime.
45+
46+
</td>
47+
<td>
48+
</td>
49+
</tr>
50+
<tr>
51+
<td>3</td>
52+
<td>
53+
54+
[RestSharp for browser](browser-and-node-RestSharp/browser/README.md)
55+
56+
</td>
57+
<td>
58+
59+
Use RestSharp library to send HTTP requests from web browser.
60+
61+
</td>
62+
<td>
63+
64+
[Demo](https://wasm-outbound-http-examples.github.io/dotnet/restsharp/)
65+
66+
</td>
67+
</tr>
68+
<tr>
69+
<td>4</td>
70+
<td>
71+
72+
[RestSharp for Node / Bun / Deno](browser-and-node-RestSharp/node/README.md)
73+
74+
</td>
75+
<td>
76+
77+
Use RestSharp library to send HTTP requests from standalone / server-side JS runtime.
78+
79+
</td>
80+
<td>
81+
</td>
82+
</tr>
83+
</table>
1684

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

‎browser-and-node-RestSharp/Program.cs

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
using System;
2+
using RestSharp;
3+
4+
var options = new RestClientOptions()
5+
{
6+
Timeout = TimeSpan.FromSeconds(10)
7+
};
8+
var client = new RestClient(options);
9+
var req = new RestRequest("https://httpbin.org/anything");
10+
var res = await client.ExecuteGetAsync(req);
11+
12+
Console.WriteLine("text: " + res.Content);

‎browser-and-node-RestSharp/browser/README.md

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# Use RestSharp library to send HTTP(s) requests from inside WASM in browser
2+
3+
## Instructions for this devcontainer
4+
5+
Tested with .Net SDK version 9.0.200, RestSharp [v112.1.0](https://www.nuget.org/packages/RestSharp/112.1.0).
6+
7+
### Preparation
8+
9+
1. Open this repo in devcontainer, e.g. using Github Codespaces.
10+
Type or copy/paste following commands to devcontainer's terminal.
11+
12+
### Building
13+
14+
1. `cd` into the folder of this example:
15+
16+
```sh
17+
cd browser-and-node-RestSharp/browser
18+
```
19+
20+
2. Create new .Net project using `wasmbrowser` template:
21+
22+
```sh
23+
dotnet new wasmbrowser
24+
```
25+
26+
3. Install RestSharp library as dependency:
27+
28+
```sh
29+
dotnet add package RestSharp
30+
```
31+
32+
4. Replace generated HelloWorld-like `Program.cs` and `wwwroot` contents with HTTP-enabled ones:
33+
34+
```sh
35+
cp ../Program.cs ./
36+
cp ../index.html ./wwwroot/
37+
cp ../main.js ./wwwroot/
38+
```
39+
40+
5. Compile the example:
41+
42+
```sh
43+
dotnet build
44+
```
45+
46+
### Test with browser
47+
48+
1. Generate bunch of self-signed development SSL certificates:
49+
50+
```sh
51+
dotnet dev-certs https
52+
```
53+
54+
2. Run debug HTTP server to temporarily publish project to Web:
55+
56+
```sh
57+
dotnet run
58+
```
59+
60+
Codespace will show you "Open in Browser" button. Just click that button or
61+
obtain web address from "Forwarded Ports" tab.
62+
63+
3. As `index.html` and about **23MB** of js and wasm files are loaded into browser, refer to browser developer console
64+
to see the results.
65+
66+
4. If you want to publish this on your own server, you can run bundling by:
67+
68+
```sh
69+
dotnet publish -c Release
70+
```
71+
72+
### Finish
73+
74+
Perform your own experiments if desired.

‎browser-and-node-RestSharp/index.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>HTTP request for C# / .Net using RestSharp</title>
6+
<script type="module" src="./main.js"></script>
7+
</head>
8+
<body>
9+
<h2>HTTP Request from inside WASM in .Net using RestSharp</h2>
10+
11+
<p>This example uses <a href="https://www.nuget.org/packages/RestSharp">RestSharp</a> library.</p>
12+
<p>See the output in browser developer console.</p>
13+
14+
<p>Actual code:</p>
15+
<pre>
16+
17+
using System;
18+
using RestSharp;
19+
20+
var options = new RestClientOptions()
21+
{
22+
Timeout = TimeSpan.FromSeconds(10)
23+
};
24+
var client = new RestClient(options);
25+
var req = new RestRequest("https://httpbin.org/anything");
26+
var res = await client.ExecuteGetAsync(req);
27+
28+
Console.WriteLine("text: " + res.Content);
29+
30+
</pre>
31+
32+
<footer><small>Created for (wannabe-awesome) <a href="https://github.com/vasilev/HTTP-request-from-inside-WASM">list</a></small></footer>
33+
</body>
34+
</html>

‎browser-and-node-RestSharp/main.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { dotnet } from './_framework/dotnet.js';
2+
3+
await dotnet.run();

‎browser-and-node-RestSharp/node/README.md

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# Use RestSharp library to send HTTP(s) requests from inside WASM in Node.js, Bun, and Deno
2+
3+
## Instructions for this devcontainer
4+
5+
Tested with .Net SDK version 9.0.200, Bun 1.2.4, Deno 2.2.2, Node.js 22.14.0, RestSharp [v112.1.0](https://www.nuget.org/packages/RestSharp/112.1.0).
6+
7+
### Preparation
8+
9+
1. Open this repo in devcontainer, e.g. using Github Codespaces.
10+
Type or copy/paste following commands to devcontainer's terminal.
11+
12+
### Building
13+
14+
1. `cd` into the folder of this example:
15+
16+
```sh
17+
cd browser-and-node-RestSharp/node
18+
```
19+
20+
2. Create new .Net project using `wasmconsole` template:
21+
22+
```sh
23+
dotnet new wasmconsole
24+
```
25+
26+
3. Replace generated HelloWorld-like `Program.cs` and `main.mjs` with HTTP-enabled ones:
27+
28+
```sh
29+
cp ../Program.cs ./
30+
cp ../main.js ./main.mjs
31+
```
32+
33+
4. Compile the example:
34+
35+
```sh
36+
dotnet build
37+
```
38+
39+
### Test with Node.js
40+
41+
1. Run the configuration:
42+
43+
```sh
44+
dotnet run
45+
```
46+
47+
Or, alternatively, the same by directly using `node` command:
48+
49+
```sh
50+
node bin/Debug/net9.0/browser-wasm/AppBundle/main.mjs
51+
```
52+
53+
### Test with Bun
54+
55+
1. Install Bun:
56+
57+
```sh
58+
curl -fsSL https://bun.sh/install | bash
59+
```
60+
61+
2. Run with Bun:
62+
63+
```sh
64+
~/.bun/bin/bun bin/Debug/net9.0/browser-wasm/AppBundle/main.mjs
65+
```
66+
67+
### Test with Deno
68+
69+
1. Install Deno:
70+
71+
```sh
72+
curl -fsSL https://deno.land/install.sh | bash -s -- --yes
73+
```
74+
75+
2. Run with Deno:
76+
77+
```sh
78+
~/.deno/bin/deno run --allow-read --allow-net --unstable-bare-node-builtins bin/Debug/net9.0/browser-wasm/AppBundle/main.mjs
79+
```
80+
81+
### Finish
82+
83+
Perform your own experiments if desired.

0 commit comments

Comments
 (0)