[WIP] Add rust WebRTC example

.gitignore

@@ -1,3 +1,13 @@
+# Nix
+result
+result-*
+
+# Rust
+target/
+**/*.rs.bk
+*.pdb
+debug/
+
 .idea/
 certs/
 *.pem
@@ -20,3 +30,12 @@ target
 
 # MSVC Windows builds of rustc generate these, which store debugging information
 *.pdb
+
+bin/
+vendor/
+node_modules/
+
+cover.out
+*.wasm
+
+*~

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "rust-analyzer.linkedProjects": [
+        "webrtc\\webrtc-rs-server\\Cargo.toml",
+        "webrtc\\str0m-server\\Cargo.toml",
+        "websocket\\tungstenite-server\\Cargo.toml"
+    ]
+}

README.md

@@ -1,8 +1,8 @@
 # realtime-web-comparison
-Experimenting with WebSocket, WebRTC, and WebTransport by streaming 2500 coordinates from server to client to visualize.
+Experimenting with Server Sent Events, WebSocket, WebRTC, and WebTransport by streaming 2500 coordinates from server to client to visualize.
 
-# NOTE: This repository is currently in flux. 
-- The WebTransport server currently does not work, however WebSockets and the WebRTC datachannels do
+# NOTE: This repository is currently in flux.
+- The WebTransport server currently does not work
 - We're doing our best to update all code to the latest versions of their dependencies.
 
 **Additional notes:**
@@ -11,14 +11,37 @@ Experimenting with WebSocket, WebRTC, and WebTransport by streaming 2500 coordin
 
 - No limits were specified on packet size or how protocols buffer packets.
 
+The pseudo code of what each test is doing looks somewhat like this:
+
+```go
+for i := 10; i < 510; i += 10 {
+    for j := 10; j < 510; j += 10 {
+        message := fmt.Sprintf("%d,%d", j, i)
+        if err := conn.WriteMessage(websocket.TextMessage, []byte(message)); err != nil {
+            log.Fatal(err)
+        }
+        time.Sleep(1 * time.Millisecond)
+    }
+}
+```
+
+## TODO
+- [Add more options for each network connection type](https://github.com/pion/realtime-web-comparison/issues/6)
+- Add more libraries to test.
+
 ## Dependencies
+- Server Sent Events
+    - [tmaxmax/go-sse](https://github.com/tmaxmax/go-sse)
+    - [tokio-rs/axum](https://github.com/tokio-rs/axum)
 - WebSockets
     - [gorilla/websocket](https://github.com/gorilla/websocket)
+    - [snapview/tungstenite-rs](https://github.com/snapview/tungstenite-rs)
 - WebRTC
     - [pion/webrtc](https://github.com/pion/webrtc)
+    - [algesten/str0m](https://github.com/algesten/str0m)
 - WebTransport
     - [adriancable/webtransport-go](https://github.com/adriancable/webtransport-go)
-- Client is written in pure HTML/CSS/JS. 
+- Client is written in pure HTML/CSS/JS.
     - For CSS: [Bootstrap](https://getbootstrap.com/)
     - The chart visualization is done using [Chart.js](https://www.chartjs.org/).
 
@@ -30,12 +53,16 @@ Experimenting with WebSocket, WebRTC, and WebTransport by streaming 2500 coordin
     cd realtime-web-comparison
     ```
 
-2. Create locally trusted certs using [mkcert](https://github.com/FiloSottile/mkcert) 
-    ```bash
-    mkdir certs && cd certs
-    mkcert -install
-    mkcert localhost
-    ```
+2. Create locally trusted certs using [mkcert](https://github.com/FiloSottile/mkcert)
+   ```bash
+   mkdir certs && cd certs
+   mkcert -install
+   mkcert localhost
+   ```
+    If using Nix flakes (see [Nix Setup Flakes](#nix-setup) section above):
+   ```bash
+   nix run .#setup-certs
+   ```
 
 3. Run a server (use similar commands for `webtransport` and `webrtc`)
     ```bash
@@ -46,10 +73,47 @@ Experimenting with WebSocket, WebRTC, and WebTransport by streaming 2500 coordin
     ```bash
     sudo tc qdisc add dev lo root netem loss 15%
     ```
-    
+
 5. Run client
     ```bash
     ./run.sh client
     chromium --origin-to-force-quic-on=localhost:8001 http://localhost:3000
     ```
 
+## Nix Setup
+
+This repository includes a Nix flake for reproducible development environments. The flake provides all necessary dependencies including Rust, Go, OpenSSL, and mkcert.
+
+### Development Shell
+
+Enter the development shell to get all tools in your PATH:
+
+```bash
+nix develop
+```
+
+This provides:
+- Rust toolchain (rustc, cargo, rustfmt, clippy, rust-analyzer)
+- Go toolchain
+- OpenSSL with proper environment variables configured
+- mkcert for certificate generation
+- NSS tools (for Firefox support on Linux)
+
+### Setting Up Certificates
+
+Use the Nix task to automatically set up locally trusted certificates:
+
+```bash
+nix run .#setup-certs
+```
+
+The `setup-certs` task will:
+- Create the `certs/` directory if it doesn't exist
+- Install the local CA certificate in your system trust store
+- Generate a certificate for `localhost`
+
+### Available Tasks
+
+- `nix run .#setup-certs` - Set up development certificates using mkcert
+
+Note: you might need to run `nix develop -c mkcert -install` and restart your browsers.

client/static/index.html

@@ -20,6 +20,7 @@
             <button id="websocket" type="button" class="btn btn-outline-dark">WebSocket</button>
             <button id="webrtc" type="button" class="btn btn-outline-dark">WebRTC</button>
             <button id="webtransport" type="button" class="btn btn-outline-dark">WebTransport</button>
+            <button id="sse" type="button" class="btn btn-outline-dark">Server Sent Events</button>
         </div>
     </header>
 
@@ -41,4 +42,5 @@ <h5 class="card-title">Stats</h5>
 <script src='js/websocket.js' type="module"></script>
 <script src='js/webtransport.js' type="module"></script>
 <script src='js/webrtc.js' type="module"></script>
+<script src='js/sse.js' type="module"></script>
 </html>

client/static/js/common.js

@@ -26,6 +26,12 @@ export let chart = new Chart(chartContext, {
                 showLine: true,
                 borderDash: [2, 5],
             },
+            {
+                data: [],
+                label: "Server Sent Events",
+                borderColor: "#000000ff",
+                showLine: true,
+            }
         ]
     },
     options: {

client/static/js/sse.js

@@ -0,0 +1,50 @@
+import {chart, initCanvas, visualizePacket} from "./common.js";
+
+const sseBtn = document.getElementById("sse");
+const serverUrl = "http://localhost:7999";
+
+sseBtn.onclick = (_) => {
+    initCanvas()
+    console.info(`Connecting to Server Sent Events server at ${serverUrl} ...`);
+
+    let t0 = new Date();
+    let messageCount = 0;
+    const eventSource = new EventSource(serverUrl);
+
+    eventSource.onopen = (_) => {
+        console.info(`Connection established in ${new Date() - t0} ms.`);
+        sseBtn.disabled = true
+        t0 = new Date();
+        chart.data.datasets[3].data.push({x: 0, y: 0});
+    }
+
+    eventSource.onmessage = (e) => {
+        messageCount += 1;
+        visualizePacket(e.data);
+        if (new Date() - t0 - chart.data.datasets[3].data.at(-1).x > 200) {
+            chart.data.datasets[3].data.push({x: new Date() - t0, y: messageCount});
+            chart.update();
+        }
+
+        // Check if we've received all messages (2500 total: 50x50)
+        if (messageCount >= 2500) {
+            eventSource.close();
+            console.info(`${messageCount} message(s) were received within ${new Date() - t0} ms.`)
+            console.info('All messages received. Disconnected from Server Sent Events server.');
+            sseBtn.disabled = false;
+        }
+    }
+
+    eventSource.onerror = (err) => {
+        console.error('SSE connection error:', err);
+        eventSource.close();
+        sseBtn.disabled = false;
+
+        if (messageCount > 0) {
+            // Connection dropped mid-stream
+            chart.data.datasets[3].data.push({x: new Date() - t0, y: messageCount});
+            chart.update();
+            console.info(`Connection interrupted. ${messageCount} message(s) were received within ${new Date() - t0} ms.`)
+        }
+    }
+}

client/static/js/webrtc.js

@@ -21,11 +21,11 @@ webRTCBtn.onclick = (_) => {
     conn.onconnectionstatechange = () => {
         console.info(`WebRTC Connection State: ${conn.connectionState}`);
     };
-    
+
     conn.oniceconnectionstatechange = () => {
         console.info(`ICE Connection State: ${conn.iceConnectionState}`);
     };
-    
+
     conn.onicegatheringstatechange = () => {
         console.info(`ICE Gathering State: ${conn.iceGatheringState}`);
     };
@@ -61,14 +61,28 @@ webRTCBtn.onclick = (_) => {
         console.info(`WebRTC DataChannel established in ${new Date() - t0} ms.`);
     };
 
-    dataChannel.onmessage = (e) => {
+    dataChannel.onmessage = async (e) => {
         if (messageCount === 0) {
             webRTCBtn.disabled = true;
             t0 = new Date();
             chart.data.datasets[2].data.push({x: 0, y: 0});
         }
         messageCount += 1;
-        visualizePacket(decoder.decode(e.data));
+        let decoded;
+        if (typeof e.data === 'string') {
+            decoded = e.data;
+        } else if (e.data instanceof Blob) {
+            const buffer = await e.data.arrayBuffer();
+            decoded = decoder.decode(buffer);
+        } else if (e.data instanceof ArrayBuffer) {
+            decoded = decoder.decode(e.data);
+        } else if (e.data instanceof Uint8Array || e.data instanceof DataView) {
+            decoded = decoder.decode(e.data);
+        } else {
+            // fallback: try to convert to string
+            decoded = String(e.data);
+        }
+        visualizePacket(decoded);
         if (new Date() - t0 - chart.data.datasets[2].data.at(-1).x > 200) {
             chart.data.datasets[2].data.push({x: new Date() - t0, y: messageCount});
             chart.update();