MudEngine Part 11: Peer-to-Peer (Hybrid)

Step 9 / 12

Build the WASM bundle for browser players

Desktop players connect directly via iroh. Browser players need a WASM bundle served by the relay. The WASM bundle is the same Dioxus app, compiled for the web target — but with the use_websocket calls replaced by a plain WebSocket that connects to the relay.

Create a separate entry point for the WASM build, or use cfg flags in main.rs:

mud-engine/src/main_web.rs

// src/main_web.rs — compiled with `dx build --web`
// Connects to the host's relay via WebSocket instead of iroh.
use dioxus::prelude::*;

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    let mut ws = use_websocket(move || {
        // Connect to the relay that the host printed in their terminal
        relay_ws("ws://192.168.1.42:9090", WebSocketOptions::new())
    });

    // Same Game component as before, but using ws.send/recv
    // instead of iroh gossip channels.
    rsx! {
        Game { socket: ws }
    }
}

🎯 Separate binary, same UI

The browser binary (main_web.rs) reuses the same Game component as the desktop version. Only the transport layer changes: WebSocket → relay → gossip instead of direct iroh QUIC.

Build the WASM bundle with:

dx build --web

Then serve it from the relay or any static file server. The relay prints ws://0.0.0.0:9090/ — browser players enter that URL to connect.

Step 9 / 12

◀ Prev Next ▶