Replace Blob::array_buffer with FileReader

CHANGELOG.md

@@ -10,6 +10,7 @@
 - [BREAKING] Renamed module `effects` to `effect`.
 - Added `App::update_with_option`.
 - Added `Navigator` and `BeforeUnloadEvent` into Seed's `web_sys`.
+- Fixed runtime exception when using binary data in WS on some browsers. (#470)
 
 ## v0.7.0
 - [BREAKING] Custom elements are now patched in-place (#364). Use `el_key` to force reinitialize an element.

examples/websocket/Cargo.toml

@@ -14,8 +14,9 @@ path = "src/server.rs"
 
 [dependencies]
 # common
-serde = { version = "1.0.106", features = ["derive"] }
-serde_json = "1.0.52"
+serde = { version = "1.0.110", features = ["derive"] }
+serde_json = "1.0.53"
+rmp-serde = "0.14"
 
 # server
 ws = { version = "0.9.1", optional = true }

examples/websocket/src/client.rs

@@ -12,6 +12,7 @@ struct Model {
     sent_messages_count: usize,
     messages: Vec<String>,
     input_text: String,
+    input_binary: String,
     web_socket: WebSocket,
     web_socket_reconnector: Option<StreamHandle>,
 }
@@ -25,6 +26,7 @@ fn init(_: Url, orders: &mut impl Orders<Msg>) -> Model {
         sent_messages_count: 0,
         messages: Vec::new(),
         input_text: String::new(),
+        input_binary: String::new(),
         web_socket: create_websocket(orders),
         web_socket_reconnector: None,
     }
@@ -47,12 +49,15 @@ fn create_websocket(orders: &impl Orders<Msg>) -> WebSocket {
 enum Msg {
     WebSocketOpened,
     MessageReceived(WebSocketMessage),
+    BytesReceived(Vec<u8>),
     CloseWebSocket,
     WebSocketClosed(CloseEvent),
     WebSocketFailed,
     ReconnectWebSocket(usize),
     InputTextChanged(String),
+    InputBinaryChanged(String),
     SendMessage(shared::ClientMessage),
+    SendBinaryMessage(shared::ClientMessage),
 }
 
 fn update(msg: Msg, mut model: &mut Model, orders: &mut impl Orders<Msg>) {
@@ -63,9 +68,22 @@ fn update(msg: Msg, mut model: &mut Model, orders: &mut impl Orders<Msg>) {
         }
         Msg::MessageReceived(message) => {
             log!("Client received a message");
-            model
-                .messages
-                .push(message.json::<shared::ServerMessage>().unwrap().text);
+
+            if message.contains_text() {
+                model
+                    .messages
+                    .push(message.json::<shared::ServerMessage>().unwrap().text);
+            } else {
+                orders.perform_cmd(async move {
+                    let bytes = message.bytes().await;
+                    bytes.map(Msg::BytesReceived).ok()
+                });
+            }
+        }
+        Msg::BytesReceived(bytes) => {
+            log!("Client received binary message");
+            let msg: shared::ServerMessage = rmp_serde::from_slice(&bytes).unwrap();
+            model.messages.push(msg.text);
         }
         Msg::CloseWebSocket => {
             model.web_socket_reconnector = None;
@@ -101,14 +119,23 @@ fn update(msg: Msg, mut model: &mut Model, orders: &mut impl Orders<Msg>) {
             log!("Reconnect attempt:", retries);
             model.web_socket = create_websocket(orders);
         }
-        Msg::InputTextChanged(input_text) => {
-            model.input_text = input_text;
+        Msg::InputTextChanged(text) => {
+            model.input_text = text;
+        }
+        Msg::InputBinaryChanged(text) => {
+            model.input_binary = text;
         }
         Msg::SendMessage(msg) => {
             model.web_socket.send_json(&msg).unwrap();
             model.input_text.clear();
             model.sent_messages_count += 1;
         }
+        Msg::SendBinaryMessage(msg) => {
+            let serialized = rmp_serde::to_vec(&msg).unwrap();
+            model.web_socket.send_bytes(&serialized).unwrap();
+            model.input_binary.clear();
+            model.sent_messages_count += 1;
+        }
     }
 }
 
@@ -122,22 +149,48 @@ fn view(model: &Model) -> Vec<Node<Msg>> {
         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 => model.input_text;
-                    },
-                    input_ev(Ev::Input, Msg::InputTextChanged)
+                div![
+                    p!["Message (text)"],
+                    input![
+                        id!("text"),
+                        attrs! {
+                            At::Type => "text",
+                            At::Value => model.input_text;
+                        },
+                        input_ev(Ev::Input, Msg::InputTextChanged)
+                    ],
+                    button![
+                        ev(Ev::Click, {
+                            let message_text = model.input_text.to_owned();
+                            move |_| Msg::SendMessage(shared::ClientMessage { text: message_text })
+                        }),
+                        "Send"
+                    ],
                 ],
-                button![
-                    ev(Ev::Click, {
-                        let message_text = model.input_text.to_owned();
-                        move |_| Msg::SendMessage(shared::ClientMessage { text: message_text })
-                    }),
-                    "Send"
+                div![
+                    p!["Message (binary)"],
+                    input![
+                        id!("binary"),
+                        attrs! {
+                            At::Type => "text",
+                            At::Value => model.input_binary;
+                        },
+                        input_ev(Ev::Input, Msg::InputBinaryChanged)
+                    ],
+                    button![
+                        ev(Ev::Click, {
+                            let message_text = model.input_binary.to_owned();
+                            move |_| {
+                                Msg::SendBinaryMessage(shared::ClientMessage { text: message_text })
+                            }
+                        }),
+                        "Send"
+                    ],
                 ],
-                button![ev(Ev::Click, |_| Msg::CloseWebSocket), "Close"],
+                div![button![
+                    ev(Ev::Click, |_| Msg::CloseWebSocket),
+                    "Close websocket connection"
+                ],]
             ]
         } else {
             div![p![em!["Connecting or closed"]]]

examples/websocket/src/server.rs

@@ -22,22 +22,16 @@ impl Handler for Server {
     fn on_message(&mut self, msg: Message) -> Result<()> {
         let client_id: usize = self.out.token().into();
 
-        let client_msg: shared::ClientMessage =
-            serde_json::from_str(&msg.into_text().unwrap()).unwrap();
+        let server_msg = if msg.is_text() {
+            Some(handle_text_message(client_id, msg))
+        } else if msg.is_binary() {
+            Some(handle_binary_message(client_id, msg))
+        } else {
+            None
+        };
 
-        println!(
-            "Server received text: '{}'\nfrom client '{}'\n",
-            client_msg.text, client_id
-        );
-
-        let server_msg: Message = serde_json::to_string(&shared::ServerMessage {
-            id: client_id,
-            text: client_msg.text,
-        })
-        .unwrap()
-        .into();
         // Broadcast to all connections.
-        self.out.broadcast(server_msg)
+        server_msg.map_or(Ok(()), |msg| self.out.broadcast(msg))
     }
 
     fn on_close(&mut self, code: CloseCode, reason: &str) {
@@ -50,6 +44,43 @@ impl Handler for Server {
     }
 }
 
+fn handle_text_message(client_id: usize, msg: Message) -> Message {
+    let client_msg: shared::ClientMessage =
+        serde_json::from_str(&msg.into_text().unwrap()).unwrap();
+
+    println!(
+        "Server received text message\ntext: '{}'\nfrom: '{}'\n",
+        client_msg.text, client_id
+    );
+
+    let server_msg: Message = serde_json::to_string(&shared::ServerMessage {
+        id: client_id,
+        text: client_msg.text,
+    })
+    .unwrap()
+    .into();
+
+    server_msg
+}
+
+fn handle_binary_message(client_id: usize, msg: Message) -> Message {
+    let binary_msg: shared::ClientMessage = rmp_serde::from_slice(&msg.into_data()).unwrap();
+
+    println!(
+        "Server received binary message\ntext: '{}'\nfrom: '{}'\n",
+        binary_msg.text, client_id
+    );
+
+    let server_msg: Message = rmp_serde::to_vec(&shared::ServerMessage {
+        id: client_id,
+        text: binary_msg.text,
+    })
+    .unwrap()
+    .into();
+
+    server_msg
+}
+
 fn main() {
     // Listen on an address and call the closure for each connection
     listen("127.0.0.1:9000", |out| Server { out }).unwrap()

src/browser/web_socket.rs

@@ -1,4 +1,5 @@
 use crate::app::Orders;
+use gloo_file::FileReadError;
 use serde::Serialize;
 use wasm_bindgen::{JsCast, JsValue};
 
@@ -50,6 +51,7 @@ pub enum WebSocketError {
     SendError(JsValue),
     SerdeError(serde_json::Error),
     PromiseError(JsValue),
+    FileReaderError(FileReadError),
     OpenError(JsValue),
     CloseError(JsValue),
 }

src/browser/web_socket/message.rs

@@ -1,7 +1,6 @@
 use super::{Result, WebSocketError};
 use serde::de::DeserializeOwned;
 use wasm_bindgen::{JsCast, JsValue};
-use wasm_bindgen_futures::JsFuture;
 use web_sys::MessageEvent;
 
 #[allow(clippy::module_name_repetitions)]
@@ -49,11 +48,10 @@ impl WebSocketMessage {
         }
 
         if let Some(blob) = self.data.dyn_ref::<web_sys::Blob>() {
-            let bytes = JsFuture::from(blob.array_buffer())
+            let blob = gloo_file::Blob::from(blob.to_owned());
+            let bytes = gloo_file::futures::read_as_bytes(&blob)
                 .await
-                .map_err(WebSocketError::PromiseError)
-                .map(|array_buffer| js_sys::Uint8Array::new(&array_buffer))?
-                .to_vec();
+                .map_err(WebSocketError::FileReaderError)?;
             return Ok(bytes);
         }
 
@@ -114,3 +112,23 @@ impl WebSocketMessage {
         &self.message_event
     }
 }
+
+#[cfg(test)]
+pub mod tests {
+    use crate::browser::web_socket::WebSocketMessage;
+    use wasm_bindgen_test::*;
+    wasm_bindgen_test_configure!(run_in_browser);
+
+    #[wasm_bindgen_test]
+    async fn get_bytes_from_message() {
+        let bytes = "some test message".as_bytes();
+        let blob = gloo_file::Blob::new(bytes);
+        let message_event = web_sys::MessageEvent::new("test").unwrap();
+        let ws_msg = WebSocketMessage {
+            data: blob.into(),
+            message_event,
+        };
+        let result_bytes = ws_msg.bytes().await.unwrap();
+        assert_eq!(bytes, &*result_bytes);
+    }
+}