pub fn use_websocket<'hook>(
url: String,
) -> impl 'hook + Hook<Output = UseWebSocketHandle>Expand description
This hook communicates with WebSocket.
§Example
use yew_hooks::prelude::*;
#[function_component(UseWebSocket)]
fn web_socket() -> Html {
let history = use_list(vec![]);
let ws = use_websocket("wss://echo.websocket.events/".to_string());
let onclick = {
let ws = ws.clone();
let history = history.clone();
Callback::from(move |_| {
let message = "Hello, world!".to_string();
ws.send(message.clone());
history.push(format!("[send]: {}", message));
})
};
{
let history = history.clone();
let ws = ws.clone();
// Receive message by depending on `ws.message`.
use_effect_with(
ws.message,
move |message| {
if let Some(message) = &**message {
history.push(format!("[recv]: {}", message.clone()));
}
|| ()
},
);
}
html! {
<>
<p>
<button {onclick} disabled={*ws.ready_state != UseWebSocketReadyState::Open}>{ "Send" }</button>
</p>
<p>
<b>{ "Message history: " }</b>
</p>
{
for history.current().iter().map(|message| {
html! {
<p>{ message }</p>
}
})
}
</>
}
}§Note
When used in function components and hooks, this hook is equivalent to:
/// This hook communicates with `WebSocket`.
///
/// # Example
///
/// ```rust
/// # use yew::prelude::*;
/// #
/// use yew_hooks::prelude::*;
///
/// #[function_component(UseWebSocket)]
/// fn web_socket() -> Html {
/// let history = use_list(vec![]);
///
/// let ws = use_websocket("wss://echo.websocket.events/".to_string());
/// let onclick = {
/// let ws = ws.clone();
/// let history = history.clone();
/// Callback::from(move |_| {
/// let message = "Hello, world!".to_string();
/// ws.send(message.clone());
/// history.push(format!("[send]: {}", message));
/// })
/// };
/// {
/// let history = history.clone();
/// let ws = ws.clone();
/// // Receive message by depending on `ws.message`.
/// use_effect_with(
/// ws.message,
/// move |message| {
/// if let Some(message) = &**message {
/// history.push(format!("[recv]: {}", message.clone()));
/// }
/// || ()
/// },
/// );
/// }
///
/// html! {
/// <>
/// <p>
/// <button {onclick} disabled={*ws.ready_state != UseWebSocketReadyState::Open}>{ "Send" }</button>
/// </p>
/// <p>
/// <b>{ "Message history: " }</b>
/// </p>
/// {
/// for history.current().iter().map(|message| {
/// html! {
/// <p>{ message }</p>
/// }
/// })
/// }
/// </>
/// }
/// }
/// ```
pub fn use_websocket(url: String) -> UseWebSocketHandle {
/* implementation omitted */
}