feat: WebSocket

Author: MartinKavik

CHANGELOG.md

@@ -49,6 +49,7 @@
 - [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`.
 
 ## v0.6.0
 - Implemented `UpdateEl` for `Filter` and `FilterMap`.

Cargo.toml

@@ -25,6 +25,7 @@ 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"
@@ -43,7 +44,10 @@ version = "0.3.37"
 features = [
     "AbortController",
     "AbortSignal",
+    "Blob",
+    "BinaryType",
     "CanvasRenderingContext2d",
+    "CloseEvent",
     "CustomEvent",
     "CustomEventInit",
     "DataTransfer",
@@ -73,6 +77,7 @@ features = [
     "HtmlSelectElement",
     "HtmlButtonElement",
     "Location",
+    "MessageEvent",
     "MouseEvent",
     "Node",
     "NodeList",
@@ -89,11 +94,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,74 @@ 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,
 }
 
 // ------ ------
-//  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 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 init(_: Url, orders: &mut impl Orders<Msg>) -> Model {
+    let web_socket = WebSocket::builder(WS_URL, orders)
+        .on_open(|| log!("WebSocket connection is open now"))
+        .on_message(Msg::MessageReceived)
+        .on_close(Msg::WebSocketClosed)
+        .on_error(|| log!("Error"))
+        .build_and_open()
+        .unwrap();
+
+    Model {
+        sent_messages_count: 0,
+        messages: Vec::new(),
+        input_text: String::new(),
+        web_socket,
+    }
 }
 
 // ------ ------
 //    Update
 // ------ ------
 
 enum Msg {
-    Connected(JsValue),
-    ServerMessage(MessageEvent),
-    Send(json::ClientMessage),
-    Sent,
-    EditChange(String),
-    Closed(JsValue),
-    Error(JsValue),
+    MessageReceived(WebSocketMessage),
+    CloseWebSocket,
+    WebSocketClosed(CloseEvent),
+    InputTextChanged(String),
+    SendMessage(shared::ClientMessage),
 }
 
-fn update(msg: Msg, mut model: &mut Model, orders: &mut impl Orders<Msg>) {
+fn update(msg: Msg, mut model: &mut Model, _: &mut impl Orders<Msg>) {
     match msg {
-        Msg::Connected(_) => {
-            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);
-        }
-        Msg::EditChange(input_text) => {
-            model.data.input_text = input_text;
+            model
+                .messages
+                .push(message.json::<shared::ServerMessage>().unwrap().text);
         }
-        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::CloseWebSocket => {
+            model
+                .web_socket
+                .close(None, Some("user clicked Close button"))
+                .unwrap();
         }
-        Msg::Sent => {
-            model.data.input_text = "".into();
-            model.data.msg_tx_cnt += 1;
+        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!("==================");
         }
-        Msg::Closed(_) => {
-            log!("WebSocket connection was closed");
+        Msg::InputTextChanged(input_text) => {
+            model.input_text = input_text;
         }
-        Msg::Error(_) => {
-            log!("Error");
+        Msg::SendMessage(msg) => {
+            model.web_socket.send_json(&msg).unwrap();
+            model.input_text.clear();
+            model.sent_messages_count += 1;
         }
     }
 }
@@ -119,43 +85,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 +124,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);
 }

examples/websocket/src/server.rs

@@ -1,44 +1,52 @@
-use ws::{listen, Handler, Message, Request, Response, Result, Sender};
+use ws::{listen, CloseCode, Handler, Message, Request, Response, Result, Sender};
 
-mod json;
+mod shared;
 
-// Server web application handler
 struct Server {
     out: Sender,
 }
 
 impl Handler for Server {
-    // Handle messages recieved in the websocket (in this case, only on /ws)
+    fn on_request(&mut self, req: &Request) -> Result<Response> {
+        match req.resource() {
+            "/ws" => Response::from_request(req),
+            _ => Ok(Response::new(
+                200,
+                "OK",
+                b"Websocket server is running".to_vec(),
+            )),
+        }
+    }
+
+    // Handle messages recieved in the websocket (in this case, only on `/ws`).
     fn on_message(&mut self, msg: Message) -> Result<()> {
         let client_id: usize = self.out.token().into();
 
-        let client_msg: json::ClientMessage =
+        let client_msg: shared::ClientMessage =
             serde_json::from_str(&msg.into_text().unwrap()).unwrap();
 
         println!(
             "Server received text: '{}'\nfrom client '{}'\n",
             client_msg.text, client_id
         );
 
-        let server_msg: Message = serde_json::to_string(&json::ServerMessage {
+        let server_msg: Message = serde_json::to_string(&shared::ServerMessage {
             id: client_id,
             text: client_msg.text,
         })
         .unwrap()
         .into();
-        // Broadcast to all connections
+        // Broadcast to all connections.
         self.out.broadcast(server_msg)
     }
 
-    fn on_request(&mut self, req: &Request) -> Result<Response> {
-        match req.resource() {
-            "/ws" => Response::from_request(req),
-            _ => Ok(Response::new(
-                200,
-                "OK",
-                b"Websocket server is running".to_vec(),
-            )),
-        }
+    fn on_close(&mut self, code: CloseCode, reason: &str) {
+        let client_id: usize = self.out.token().into();
+        let code_number: u16 = code.into();
+        println!(
+            "WebSocket closing - client: {}, code: {} {:?}, reason: {}",
+            client_id, code_number, code, reason
+        );
     }
 }
 

examples/websocket/src/json.rs renamed to examples/websocket/src/shared.rs

@@ -6,13 +6,7 @@ use crate::app::{
 use crate::virtual_dom::IntoNodes;
 use futures::future::FutureExt;
 use futures::stream::{Stream, StreamExt};
-use std::{
-    any::{Any, TypeId},
-    collections::VecDeque,
-    convert::identity,
-    future::Future,
-    rc::Rc,
-};
+use std::{any::Any, collections::VecDeque, convert::identity, future::Future, rc::Rc};
 
 #[allow(clippy::module_name_repetitions)]
 pub struct OrdersContainer<Ms: 'static, Mdl: 'static, INodes: IntoNodes<Ms>, GMs = UndefinedGMsg> {

src/app/orders/container.rs

@@ -8,11 +8,7 @@ use super::{
 use crate::virtual_dom::IntoNodes;
 use futures::future::{Future, FutureExt};
 use futures::stream::{Stream, StreamExt};
-use std::{
-    any::{Any, TypeId},
-    convert::identity,
-    rc::Rc,
-};
+use std::{any::Any, convert::identity, rc::Rc};
 
 #[allow(clippy::module_name_repetitions)]
 pub struct OrdersProxy<