diff --git a/.gitignore b/.gitignore index 80aab8e..770d78f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,22 @@ # Generated by Cargo # will have compiled files and executables -/target +debug +target .DS_Store # These are backup files generated by rustfmt **/*.rs.bk + +# MSVC Windows builds of rustc generate these, which store debugging information +*.pdb + +# Generated by cargo mutants +# Contains mutation testing data +**/mutants.out*/ + +# RustRover +# JetBrains specific template is maintained in a separate JetBrains.gitignore that can +# be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore +# and can be added to the global gitignore or merged into this file. For a more nuclear +# option (not recommended) you can uncomment the following to ignore the entire idea folder. +#.idea/ diff --git a/Cargo.toml b/Cargo.toml index 9960904..807cc76 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -17,6 +17,7 @@ js-sys = "0.3.61" # web-sys with features for media devices web-sys = { version = "0.3.77", features = [ + "BinaryType", "Navigator", "MediaDevices", "MediaStream", diff --git a/src/main.rs b/src/main.rs index 57b5987..ed0e0f1 100644 --- a/src/main.rs +++ b/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, local_peer_id: Signal, - mut remote_peer_id: Signal, - on_connect: EventHandler + remote_peer_id: Signal ) -> Element { + // Websocket signal + let ws = use_signal(|| None::); + + // 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); + + 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"