Discussion around gloo WebSocket and reopen closed connection

[Tartopoms]

Discusion around using gloo::net::websocket with Dioxuss and reopen a closed connection.

I didn't find any other example, except on the doc, so I thought this might help.

It's certainly not the best way to implement it, I'm still fairly new to Rust and Dioxus.

If the connection goes down, there's no way to reopen a new one, if you have any suggestions on how to implement it, or if you know of a better solution for using websocket with Dioxus, feel free to contribute.

1. I didn't find a way to call restart(), as it can be done with UseFuture, as stated in the doc.
2. And, if, upon websocket connection closed, I recreate a UseCoroutine, I will still get the previous one when calling use_coroutine_handle::<_>()
3. And since I moved rx in an async move {} bloc (cf. section "SEND"), I cannot put the inner coroutine code inside a loop {} bloc.
4. I thought of using a shared_state(app_state) with

   pub struct AppState {
       pub ws: (Arc<Mutex<SplitSink<WebSocket, Message>>>, Arc<Mutex<SplitStream<WebSocket>>>),
       pub ws_status: Option<bool>,
       ...
   }
   
   fn App(_) -> _ {
       // init websocket & app_state
       let app_state = use_shared_state::<AppState>(cx).unwrap();
       if app_state.read().ws_status == Some(false) {
           let (mut write, mut read) = WebSocket::open(url).unwrap().split();
           let (a, b) = app_state.read().ws.clone();
           *a.lock().unwrap() = write;
           *b.lock().unwrap() = read;
           app_state.write().ws_status = Some(true);
       }
       // render!()
   }

   in order to reopen a WebSocket::open(url) upon connection closed, but a deadlock can happen easily if not handled carefully

Here's the code for the WebSocket example

use dioxus::prelude::*;
use futures::{
    stream::SplitSink,
    {SinkExt, StreamExt},
};
use gloo::net::websocket::{futures::WebSocket, Message, WebSocketError};
use crate::commons::AppState;


fn App(cx: Scope<'_>) -> Element {

    // AppState is a struct with some fields to store data like websocket server responses
    use_shared_state_provider(cx, || AppState::new());
    init_websocket_coroutine ()

    let msg_rcv = use_shared_state::<AppState>(cx).unwrap().read().text;
    let ws = use_coroutine_handle::<Message>(cx).unwrap();

    render! {
        h1 { "Hello world!" }
        button {
            onclick: |_| ws.send(Message::Text("Hi from client".to_string())),
            "Say hi to server"
        }
        p { "Last text message received from server: {msg_rcv}" }
    }
}

/// Spawn a coroutine with a websocket connection
fn init_websocket_coroutine (url: &str) {
    
    // shared state so websocket messages can be saved when received
    let app_state = use_shared_state::<AppState>(cx).unwrap();
    
    // websocket coroutine
    // <Message> can be replaced by any custom enum to provide more control, 
    // but in the end write() only takes gloo::net::websocket::Message enum variant
    let ws = use_coroutine(cx, |mut rx:  UnboundedReceiver<Message>| {

        to_owned![app_state];
        async move {
            let ws = WebSocket::open(url).unwrap();
            let (mut write, mut read) = ws.split();
    
            // SEND messages to server with ws.send(CustomEnum::_)
            spawn_local(async move {
                while let Some(msg) = rx.next().await {

                    // you can match msg - to better control what you send - if you replace the current 
                    // |mut rx: UnboundedReceiver<Message>| with 
                    // |mut rx: UnboundedReceiver<CustomEnum>|
                    // but here I dont need to match it since it is gloo::net::websocket::Message
                    // and write() take a Message enum variant as argument

                    match write.send(msg).await {
                        Ok(_) => log::info!("[WebSocket] Message sent to server"),
                        Err(ws_err) => log::error!("[WebSocket] Error sending to server -> {ws_err}"),
                    };
                }
            });
    
            // READ incoming messages
            spawn_local(async move {
                while let Some(recv_msg) = read.next().await {

                    // match type of received message: Result<Message, WebSocketError>
                    // after matching the type you can use match with serde_json if you serialized different objects
                    // however, here, I stop at storing the message into my shared_state struct
                    match recv_msg {
                        // string
                        Ok(Message::Text(text)) => app_state.write().text = text.clone(),
                        // bytes
                        Ok(Message::Bytes(bytes)) => app_state.write().bytes = bytes.clone(),
                        // clean connection close
                        Err(WebSocketError::ConnectionClose(close_event))
                            if close_event.was_clean =>
                            log::info!("[WebSocket] ConnectionClose: {:#?}", close_event),
                        // any other error
                        Err(ws_err) => log::error!("[WebSocketError]: {:#?}", ws_err),
                    }
                }
            });
        }
    });
}