use leptos::prelude::*; use leptos_use::docs::demo_or_body; use leptos_use::{ core::ConnectionReadyState, use_websocket, use_websocket_with_options, UseWebSocketError, UseWebSocketOptions, UseWebSocketReturn, }; use serde::{Deserialize, Serialize}; use codee::{binary::MsgpackSerdeCodec, string::FromToStringCodec}; use web_sys::{CloseEvent, Event}; #[derive(Serialize, Deserialize, Debug)] struct Apple { name: String, worm_count: u32, } #[component] fn Demo() -> impl IntoView { let (history, set_history) = signal(vec![]); fn update_history(&history: &WriteSignal>, message: String) { let _ = &history.update(|history: &mut Vec<_>| history.push(message)); } // ---------------------------- // use_websocket // ---------------------------- let UseWebSocketReturn { ready_state, message, send, open, close, .. } = use_websocket::("wss://echo.websocket.events/"); let send_message = move |_| { let m = Apple { name: "More worm than apple".to_string(), worm_count: 10, }; send(&m); set_history.update(|history: &mut Vec<_>| history.push(format!("[send]: {:?}", m))); }; let status = move || ready_state().to_string(); let connected = move || ready_state.get() == ConnectionReadyState::Open; let open_connection = move |_| { open(); }; let close_connection = move |_| { close(); }; Effect::new(move |_| { message.with(move |message| { if let Some(m) = message { update_history(&set_history, format!("[message]: {:?}", m)); } }) }); // ---------------------------- // use_websocket_with_options // ---------------------------- let (history2, set_history2) = signal(vec![]); let on_open_callback = move |e: Event| { set_history2.update(|history: &mut Vec<_>| { history.push(format!("[onopen]: event {:?}", e.type_())) }); }; let on_close_callback = move |e: CloseEvent| { set_history2.update(|history: &mut Vec<_>| { history.push(format!("[onclose]: event {:?}", e.type_())) }); }; let on_error_callback = move |e: UseWebSocketError<_, _>| { set_history2.update(|history: &mut Vec<_>| { history.push(match e { UseWebSocketError::Event(e) => format!("[onerror]: event {:?}", e.type_()), _ => format!("[onerror]: {:?}", e), }) }); }; let on_message_callback = move |m: &String| { set_history2.update(|history: &mut Vec<_>| history.push(format!("[onmessage]: {:?}", m))); }; let UseWebSocketReturn { ready_state: ready_state2, send: send2, open: open2, close: close2, message: message2, .. } = use_websocket_with_options::( "wss://echo.websocket.events/", UseWebSocketOptions::default() .immediate(false) .on_open(on_open_callback) .on_close(on_close_callback) .on_error(on_error_callback) .on_message(on_message_callback), ); let open_connection2 = move |_| { open2(); }; let close_connection2 = move |_| { close2(); }; let send_message2 = move |_| { let message = "Hello, use_leptos!".to_string(); send2(&message); update_history(&set_history2, format!("[send]: {:?}", message)); }; let status2 = move || ready_state2.get().to_string(); Effect::new(move |_| { if let Some(m) = message2.get() { update_history(&set_history2, format!("[message]: {:?}", m)); }; }); let connected2 = move || ready_state2.get() == ConnectionReadyState::Open; view! {

"use_websocket"

"status: " {status}

"History"

{item.1}

"use_websocket_with_options"

"status: " {status2}

"History"

  • {item.1}
} } fn main() { _ = console_log::init_with_level(log::Level::Info); console_error_panic_hook::set_once(); let unmount_handle = leptos::mount::mount_to(demo_or_body(), || { view! { } }); unmount_handle.forget(); }