WebSocket wrapper + WebSocket example update

.github/FUNDING.yml

@@ -1,6 +1,6 @@
 # These are supported funding model platforms
 
-#github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+github: [MartinKavik]
 patreon: martinkavik
 #open_collective: # Replace with a single Open Collective username
 #ko_fi: # Replace with a single Ko-fi username

CHANGELOG.md

@@ -49,6 +49,9 @@
 - [BREAKING] Renamed `to_kbevent` to `to_keyboard_event`.
 - [BREAKING] `after_next_render` returns `RenderInfo`.
 - `web_sys` and `wasm_bindgen` available in `seed::web_sys` and `seed::wasm_bindgen`.
+- Added `WebSocket` + related items (#8).
+- Exposed `App::mailbox`.
+- Added `streams::backoff` + updated `websocket` example.
 
 ## v0.6.0
 - Implemented `UpdateEl` for `Filter` and `FilterMap`.

Cargo.toml

@@ -25,25 +25,30 @@ console_error_panic_hook = "0.1.6"
 cookie = { version = "0.13.3", features = ["percent-encode"] }
 enclose = "1.1.8"
 gloo-timers = { version = "0.2.1", features = ["futures"] }
+gloo-file = { version = "0.1.0", features = ["futures"] }
 indexmap = "1.3.2"
-js-sys = "0.3.37"
-pulldown-cmark = "0.7.0"
+js-sys = "0.3.39"
+pulldown-cmark = "0.7.1"
+rand = { version = "0.7.3", features = ["wasm-bindgen", "small_rng"] }
 serde = { version = "1.0.106", features = ['derive'] }
 serde_json = "1.0.51"
-wasm-bindgen = {version = "0.2.60", features = ["serde-serialize"]}
-wasm-bindgen-futures = "0.4.10"
+wasm-bindgen = {version = "0.2.62", features = ["serde-serialize"]}
+wasm-bindgen-futures = "0.4.12"
 # @TODO: remove once we can use entities without `Debug` in `log!` and `error!` on `stable` Rust.
 # https://github.com/Centril/rfcs/blob/rfc/quick-debug-macro/text/0000-quick-debug-macro.md#types-which-are-not-debug
 dbg = "1.0.4"
 futures = "0.3.4"
 uuid = { version = "0.8.1", features = ["v4", "wasm-bindgen"] }
 
 [dependencies.web-sys]
-version = "0.3.37"
+version = "0.3.39"
 features = [
     "AbortController",
     "AbortSignal",
+    "Blob",
+    "BinaryType",
     "CanvasRenderingContext2d",
+    "CloseEvent",
     "CustomEvent",
     "CustomEventInit",
     "DataTransfer",
@@ -73,6 +78,7 @@ features = [
     "HtmlSelectElement",
     "HtmlButtonElement",
     "Location",
+    "MessageEvent",
     "MouseEvent",
     "Node",
     "NodeList",
@@ -89,11 +95,13 @@ features = [
     "Response",
     "Selection",
     "Storage",
+    "TcpReadyState",
     "Text",
     "Touch",
     "TouchEvent",
     "TouchList",
     "console",
+    "WebSocket",
     "Window",
     "KeyboardEvent",
     "InputEvent",

examples/websocket/Cargo.toml

@@ -14,19 +14,17 @@ path = "src/server.rs"
 
 [dependencies]
 # common
-serde = { version = "^1.0.103", features = ["derive"] }
-serde_json = "^1.0.44"
+serde = { version = "^1.0.106", features = ["derive"] }
+serde_json = "^1.0.51"
 
 # server
 ws = { version = "0.9.1", optional = true }
 
 #client
 seed = { path = "../../", optional = true }
-wasm-bindgen = { version = "^0.2.55", optional = true }
-js-sys = "0.3.32"
+wasm-bindgen = { version = "0.2.60", optional = true }
 [dependencies.web-sys]
-version = "^0.3.32"
-features = ["WebSocket", "MessageEvent"]
+version = "^0.3.37"
 optional = true
 
 [features]

examples/websocket/src/client.rs

@@ -1,9 +1,6 @@
-use js_sys::Function;
 use seed::{prelude::*, *};
-use wasm_bindgen::JsCast;
-use web_sys::{MessageEvent, WebSocket};
 
-mod json;
+mod shared;
 
 const WS_URL: &str = "ws://127.0.0.1:9000/ws";
 
@@ -12,105 +9,105 @@ const WS_URL: &str = "ws://127.0.0.1:9000/ws";
 // ------ ------
 
 struct Model {
-    data: Data,
-    services: Services,
-}
-
-#[derive(Default)]
-struct Data {
-    connected: bool,
-    msg_rx_cnt: usize,
-    msg_tx_cnt: usize,
-    input_text: String,
+    sent_messages_count: usize,
     messages: Vec<String>,
-}
-
-struct Services {
-    ws: WebSocket,
+    input_text: String,
+    web_socket: WebSocket,
+    web_socket_reconnector: Option<StreamHandle>,
 }
 
 // ------ ------
-//  After Mount
+//     Init
 // ------ ------
 
-fn after_mount(_: Url, orders: &mut impl Orders<Msg>) -> AfterMount<Model> {
-    let ws = WebSocket::new(WS_URL).unwrap();
-
-    register_ws_handler(WebSocket::set_onopen, Msg::Connected, &ws, orders);
-    register_ws_handler(WebSocket::set_onclose, Msg::Closed, &ws, orders);
-    register_ws_handler(WebSocket::set_onmessage, Msg::ServerMessage, &ws, orders);
-    register_ws_handler(WebSocket::set_onerror, Msg::Error, &ws, orders);
-
-    AfterMount::new(Model {
-        data: Data::default(),
-        services: Services { ws },
-    })
+fn init(_: Url, orders: &mut impl Orders<Msg>) -> Model {
+    Model {
+        sent_messages_count: 0,
+        messages: Vec::new(),
+        input_text: String::new(),
+        web_socket: create_websocket(orders),
+        web_socket_reconnector: None,
+    }
 }
 
-fn register_ws_handler<T, F>(
-    ws_cb_setter: fn(&WebSocket, Option<&Function>),
-    msg: F,
-    ws: &WebSocket,
-    orders: &mut impl Orders<Msg>,
-) where
-    T: wasm_bindgen::convert::FromWasmAbi + 'static,
-    F: Fn(T) -> Msg + 'static,
-{
-    let (app, msg_mapper) = (orders.clone_app(), orders.msg_mapper());
-
-    let closure = Closure::new(move |data| {
-        app.update(msg_mapper(msg(data)));
-    });
-
-    ws_cb_setter(ws, Some(closure.as_ref().unchecked_ref()));
-    closure.forget();
+fn create_websocket(orders: &impl Orders<Msg>) -> WebSocket {
+    WebSocket::builder(WS_URL, orders)
+        .on_open(|| Msg::WebSocketOpened)
+        .on_message(Msg::MessageReceived)
+        .on_close(Msg::WebSocketClosed)
+        .on_error(|| Msg::WebSocketFailed)
+        .build_and_open()
+        .unwrap()
 }
 
 // ------ ------
 //    Update
 // ------ ------
 
 enum Msg {
-    Connected(JsValue),
-    ServerMessage(MessageEvent),
-    Send(json::ClientMessage),
-    Sent,
-    EditChange(String),
-    Closed(JsValue),
-    Error(JsValue),
+    WebSocketOpened,
+    MessageReceived(WebSocketMessage),
+    CloseWebSocket,
+    WebSocketClosed(CloseEvent),
+    WebSocketFailed,
+    ReconnectWebSocket(usize),
+    InputTextChanged(String),
+    SendMessage(shared::ClientMessage),
 }
 
 fn update(msg: Msg, mut model: &mut Model, orders: &mut impl Orders<Msg>) {
     match msg {
-        Msg::Connected(_) => {
+        Msg::WebSocketOpened => {
+            model.web_socket_reconnector = None;
             log!("WebSocket connection is open now");
-            model.data.connected = true;
         }
-        Msg::ServerMessage(msg_event) => {
+        Msg::MessageReceived(message) => {
             log!("Client received a message");
-            let txt = msg_event.data().as_string().unwrap();
-            let json: json::ServerMessage = serde_json::from_str(&txt).unwrap();
-
-            model.data.msg_rx_cnt += 1;
-            model.data.messages.push(json.text);
+            model
+                .messages
+                .push(message.json::<shared::ServerMessage>().unwrap().text);
         }
-        Msg::EditChange(input_text) => {
-            model.data.input_text = input_text;
+        Msg::CloseWebSocket => {
+            model.web_socket_reconnector = None;
+            model
+                .web_socket
+                .close(None, Some("user clicked Close button"))
+                .unwrap();
         }
-        Msg::Send(msg) => {
-            let s = serde_json::to_string(&msg).unwrap();
-            model.services.ws.send_with_str(&s).unwrap();
-            orders.send_msg(Msg::Sent);
+        Msg::WebSocketClosed(close_event) => {
+            log!("==================");
+            log!("WebSocket connection was closed:");
+            log!("Clean:", close_event.was_clean());
+            log!("Code:", close_event.code());
+            log!("Reason:", close_event.reason());
+            log!("==================");
+
+            // Chrome doesn't invoke `on_error` when the connection is lost.
+            if !close_event.was_clean() && model.web_socket_reconnector.is_none() {
+                model.web_socket_reconnector = Some(
+                    orders.stream_with_handle(streams::backoff(None, Msg::ReconnectWebSocket)),
+                );
+            }
         }
-        Msg::Sent => {
-            model.data.input_text = "".into();
-            model.data.msg_tx_cnt += 1;
+        Msg::WebSocketFailed => {
+            log!("WebSocket failed");
+            if model.web_socket_reconnector.is_none() {
+                model.web_socket_reconnector = Some(
+                    orders.stream_with_handle(streams::backoff(None, Msg::ReconnectWebSocket)),
+                );
+            }
         }
-        Msg::Closed(_) => {
-            log!("WebSocket connection was closed");
+        Msg::ReconnectWebSocket(retries) => {
+            log!("Reconnect attempt:", retries);
+            model.web_socket = create_websocket(orders);
         }
-        Msg::Error(_) => {
-            log!("Error");
+        Msg::InputTextChanged(input_text) => {
+            model.input_text = input_text;
+        }
+        Msg::SendMessage(msg) => {
+            model.web_socket.send_json(&msg).unwrap();
+            model.input_text.clear();
+            model.sent_messages_count += 1;
         }
     }
 }
@@ -119,43 +116,35 @@ fn update(msg: Msg, mut model: &mut Model, orders: &mut impl Orders<Msg>) {
 //     View
 // ------ ------
 
-fn view(model: &Model) -> impl IntoNodes<Msg> {
-    let data = &model.data;
-
+fn view(model: &Model) -> Vec<Node<Msg>> {
     vec![
-        h1!["seed websocket example"],
-        if data.connected {
+        h1!["WebSocket example"],
+        div![model.messages.iter().map(|message| p![message])],
+        if model.web_socket.state() == web_socket::State::Open {
             div![
                 input![
                     id!("text"),
                     attrs! {
                         At::Type => "text",
-                        At::Value => data.input_text;
+                        At::Value => model.input_text;
                     },
-                    input_ev(Ev::Input, Msg::EditChange)
+                    input_ev(Ev::Input, Msg::InputTextChanged)
                 ],
                 button![
-                    id!("send"),
-                    attrs! { At::Type => "button" },
                     ev(Ev::Click, {
-                        let message_text = data.input_text.to_owned();
-                        move |_| Msg::Send(json::ClientMessage { text: message_text })
+                        let message_text = model.input_text.to_owned();
+                        move |_| Msg::SendMessage(shared::ClientMessage { text: message_text })
                     }),
                     "Send"
-                ]
+                ],
+                button![ev(Ev::Click, |_| Msg::CloseWebSocket), "Close"],
             ]
         } else {
-            div![p![em!["Connecting..."]]]
+            div![p![em!["Connecting or closed"]]]
         },
-        div![data.messages.iter().map(|message| p![message])],
         footer![
-            if data.connected {
-                p!["Connected"]
-            } else {
-                p!["Disconnected"]
-            },
-            p![format!("{} messages received", data.msg_rx_cnt)],
-            p![format!("{} messages sent", data.msg_tx_cnt)]
+            p![format!("{} messages", model.messages.len())],
+            p![format!("{} messages sent", model.sent_messages_count)]
         ],
     ]
 }
@@ -166,7 +155,5 @@ fn view(model: &Model) -> impl IntoNodes<Msg> {
 
 #[wasm_bindgen(start)]
 pub fn start() {
-    App::builder(update, view)
-        .after_mount(after_mount)
-        .build_and_start();
+    App::start("app", init, update, view);
 }