Skip to content

Commit 397d898

Browse files
vasilevvasilev
committed
Added browser and Node.js/Bun/Deno examples using System.Net.Http.HttpClient object.
 Added devcontainer configurations.
1 parent 6654b81 commit 397d898

File tree

8 files changed

+244
-2
lines changed

8 files changed

+244
-2
lines changed

‎.devcontainer/devcontainer.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "DotNet: HTTP request from WASM",
3+
"image": "mcr.microsoft.com/dotnet/sdk:8.0",
4+
"features": {
5+
"ghcr.io/devcontainers/features/common-utils": {},
6+
"ghcr.io/devcontainers/features/node:1": {}
7+
},
8+
"postCreateCommand": "apt-get install -y python3",
9+
"customizations": {
10+
"vscode": {
11+
"extensions": [
12+
"ms-dotnettools.csharp"
13+
]
14+
}
15+
}
16+
}

‎README.md

+17-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,17 @@
1-
# dotnet
2-
Make HTTP requests from inside WASM in C#. Demo and devcontainer.
1+
# Make HTTP requests from inside WASM in C# / .Net
2+
3+
This devcontainer is configured to provide you a DotNet SDK 8.0 and latest version of Node.js.
4+
5+
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/wasm-outbound-http-examples/dotnet)
6+
7+
1. [Browser demo](https://wasm-outbound-http-examples.github.io/dotnet/).
8+
9+
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).
12+
13+
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).
16+
17+
<sub>Created for (wannabe-awesome) [list](https://github.com/vasilev/HTTP-request-from-inside-WASM)</sub>

‎browser-and-node/Program.cs

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
using System;
2+
using System.Net.Http;
3+
4+
HttpClient client = new HttpClient();
5+
string uri = "https://httpbin.org/anything";
6+
string responseText = await client.GetStringAsync(uri);
7+
8+
Console.WriteLine("body: " + responseText);

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

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# Use .Net / C# to send HTTP(s) requests from inside WASM in browser
2+
3+
## Instructions for this devcontainer
4+
5+
Tested with .Net version 8.0.100-rc.2.23502.2 .
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+
2. Install .Net workloads to handle WASM:
13+
14+
```sh
15+
dotnet workload install wasm-tools
16+
dotnet workload install wasm-experimental
17+
```
18+
19+
### Building
20+
21+
1. `cd` into the folder of this example:
22+
23+
```sh
24+
cd browser-and-node/browser
25+
```
26+
27+
2. Create new .Net project using `wasmbrowser` template:
28+
29+
```sh
30+
dotnet new wasmbrowser
31+
```
32+
33+
3. Replace generated HelloWorld-like `Program.cs` with HTTP-enabled one:
34+
35+
```sh
36+
cp ../Program.cs ./
37+
```
38+
39+
4. Compile the example:
40+
41+
```sh
42+
dotnet build
43+
```
44+
45+
### Test with browser
46+
47+
1. Generate bunch of self-signed development SSL certificates:
48+
49+
```sh
50+
dotnet dev-certs https
51+
```
52+
53+
2. Run debug HTTP server to temporarily publish project to Web:
54+
55+
```sh
56+
dotnet run
57+
```
58+
59+
Codespace will show you "Open in Browser" button. Just click that button or
60+
obtain web address from "Forwarded Ports" tab.
61+
62+
3. As `index.html` and about **23MB** of js and wasm files are loaded into browser, refer to browser developer console
63+
to see the results.
64+
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/browser/wwwroot/index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>HTTP request for C# / .Net</title>
6+
<script type="module" src="../../main.js"></script>
7+
</head>
8+
<body>
9+
<h2>HTTP Request from inside WASM using System.Net.Http.HttpClient</h2>
10+
11+
<p>This example uses <a href="https://learn.microsoft.com/en-us/dotnet/api/system.net.http.httpclient?view=net-8.0">System.Net.Http.HttpClient</a> from standard 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 System.Net.Http;
19+
20+
HttpClient client = new HttpClient();
21+
string uri = "https://httpbin.org/anything";
22+
string responseText = await client.GetStringAsync(uri);
23+
24+
Console.WriteLine("body: " + responseText);
25+
26+
</pre>
27+
28+
<footer><small>Created for (wannabe-awesome) <a href="https://github.com/vasilev/HTTP-request-from-inside-WASM">list</a></small></footer>
29+
</body>
30+
</html>

‎browser-and-node/browser/wwwroot/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/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/node/README.md

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# Use .Net / C# 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 version 8.0.100-rc.2.23502.2 .
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+
13+
2. Install .Net workloads to handle WASM:
14+
15+
```sh
16+
dotnet workload install wasm-tools
17+
dotnet workload install wasm-experimental
18+
```
19+
20+
### Building
21+
22+
1. `cd` into the folder of this example:
23+
24+
```sh
25+
cd browser-and-node/node
26+
```
27+
28+
2. Create new .Net project using `wasmconsole` template:
29+
30+
```sh
31+
dotnet new wasmconsole
32+
```
33+
34+
3. Replace generated HelloWorld-like `Program.cs` and `main.mjs` with HTTP-enabled ones:
35+
36+
```sh
37+
cp ../Program.cs ./
38+
cp ../main.js ./main.mjs
39+
```
40+
41+
4. Compile the example:
42+
43+
```sh
44+
dotnet build
45+
```
46+
47+
### Test with Node.js
48+
49+
1. Run the configuration:
50+
51+
```sh
52+
dotnet run
53+
```
54+
55+
Or, alternatively, the same by directly using `node` command:
56+
57+
```sh
58+
node bin/Debug/net8.0/browser-wasm/AppBundle/main.mjs
59+
```
60+
61+
### Test with Bun
62+
63+
1. Install Bun:
64+
65+
```sh
66+
curl -fsSL https://bun.sh/install | bash
67+
```
68+
69+
2. Run with Bun:
70+
71+
```sh
72+
~/.bun/bin/bun bin/Debug/net8.0/browser-wasm/AppBundle/main.mjs
73+
```
74+
75+
### Test with Deno
76+
77+
1. Install Deno:
78+
79+
```sh
80+
curl -fsSL https://deno.land/x/install/install.sh | sh
81+
```
82+
83+
2. Run with Deno:
84+
85+
```sh
86+
~/.deno/bin/deno run --allow-read --allow-net bin/Debug/net8.0/browser-wasm/AppBundle/main.mjs
87+
```
88+
89+
You may want adding `Deno.exit();` to the end of `main.mjs`, in the case Deno does not exit after printing to console.
90+
91+
### Finish
92+
93+
Perform your own experiments if desired.

0 commit comments

Comments
 (0)