Changed initialization of WebSocket connection to OnLoad.

src/main.rs

@@ -3,6 +3,10 @@
 mod utils;
 
 use dioxus::{html::{g::media, h3}, prelude::*};
+use wasm_bindgen::JsCast;
+use wasm_bindgen::prelude::Closure;
+use web_sys::{BinaryType, MessageEvent, WebSocket as BrowserWebSocket};
+
 use utils::{MediaManager, MediaState};
 
 const FAVICON: Asset = asset!("/assets/favicon.ico");
@@ -62,11 +66,7 @@ pub fn Content() ->Element {
                 ConnectionPanel { 
                     connected: connected.clone(),
                     local_peer_id: local_peer_id.clone(),
-                    remote_peer_id: remote_peer_id.clone(),
-                    on_connect: move |_| {
-                        log::info!("Verbindung wird hergestellt...");
-                        connected.set(true);
-                    } 
+                    remote_peer_id: remote_peer_id.clone()
                 }
                 
                 // Call Controls
@@ -106,9 +106,35 @@ pub fn Content() ->Element {
 fn ConnectionPanel(
     connected: Signal<bool>, 
     local_peer_id: Signal<String>,
-    mut remote_peer_id: Signal<String>,
-    on_connect: EventHandler<MouseEvent>
+    remote_peer_id: Signal<String>
 ) -> Element {
+    // Websocket signal
+    let ws = use_signal(|| None::<BrowserWebSocket>);
+
+    // One-time initialization of WebSocket connection
+    use_effect(move || {
+        to_owned![ws];
+
+        if ws.read().is_none() {
+            // Create new WebSocket connection
+            if let Ok(socket) = BrowserWebSocket::new("ws://localhost:8080/ws") {
+                socket.set_binary_type(BinaryType::Arraybuffer);
+                ws.write().replace(socket.clone());
+
+                // Event handler
+                let onmessage = Closure::wrap(Box::new(move |e: MessageEvent| {
+                    if let Some(text) = e.data().as_string() {
+                        // Hier später SPD/Candidate verarbeiten
+                        log::info!("WS empfangen: {}", text);
+                    }
+                }) as Box<dyn FnMut(MessageEvent)>);
+
+                socket.set_onmessage(Some(onmessage.as_ref().unchecked_ref()));
+                onmessage.forget(); // Verhindert, dass Closure gelöscht wird
+            }
+        }
+    });
+
     rsx! {
         div {
             class: "connection-panel",
@@ -151,10 +177,12 @@ fn ConnectionPanel(
             
             button { 
                 class: "connect-btn",
-                onclick: on_connect,
-                disabled: connected(),
-                if connected() {
-                    "Verbunden"
+                disabled: ws.read().is_some(),
+                onclick: move |_| {
+                    connected.set(true);
+                },
+                if ws.read().is_some() {
+                    "✅ Verbunden"
                 }
                 else {
                     "Mit Signaling Server verbinden"