how to send channel to child component

[jiker-burce]

Problem

Steps To Reproduce

Steps to reproduce the behavior:

pub fn Client() -> Element {
    println!("Client");
    // send msg to server channel
    let (send_tx, mut send_rx) = mpsc::channel::<String>(100);
    // receive channel
    let (receive_tx, receive_rx) = mpsc::channel::<String>(100);

    spawn(async move {
        crate::ChatClient::new().run(receive_tx, send_rx).await;
    });

    rsx! {
        ClientForm{receive_rx: receive_rx, send_tx: send_tx}
    }
}

#[component]
fn ClientForm(mut receive_rx: Receiver<String>, mut send_tx: Sender<String>) -> Element {}

// compiler error: 
42 | #[component]
   | ------------ in this procedural macro expansion
43 | fn ClientForm(mut receive_rx: Receiver<String>, mut send_tx: Sender<String>) -> Element {
   |                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `Clone` is not implemented for `tokio::sync::mpsc::Receiver<String>`
   |
   = note: this error originates in the derive macro `Clone` which comes from the expansion of the attribute macro `component` (in Nightly builds, run with -Z macro-backtrace for more info)

Expected behavior

• I have these two channels, I'd like to pass receive_tx abd send_rx to a rust struct which can receive and send msg between client and server.
• receive_rx and send_tx to get msg from UI and send the data to send_tx, then the ChatClient could get the msg and send it to the server.
• So how to pass the receive_rx and send_tx correctly?

Screenshots

If applicable, add screenshots to help explain your problem.

Environment:

• Dioxus version: 0.5.1
• Rust version: 1.75.0
• OS info: MacOS
• App platform: desktop

[quangIO]

For Clone, you can wrap the receiver around Arc. For mutable, you use Mutex: Arc<Mutex<..>>. I am not sure if it gets you the desirable semantic though

[jiker-burce]

For Clone, you can wrap the receiver around Arc. For mutable, you use Mutex: Arc<Mutex<..>>. I am not sure if it gets you the desirable semantic though

thanks for the reply, but I don't think use the Arc<Mutex> is a good idea, it will block the channel, the performance will be declined.

[jiker-burce]

@jkelleyrtp
so sorry to disturb you, could you give me any advice, does the dioxus framework has some components could share all kinds of data in the whole proggrame?

[quangIO]

I commented because I used a similar pattern in my application (no Mutex though) ;)

• There should be only one mutable borrow that actually receive data then performance is not a concern but I don't know Dioxus internal to know if this is actually safe (as in deadlock and stuff)
• You can use different channel than tokio::mpsc which does not require mut -> wrapping receiver in Arc is enough only
• If you want global access, use once_cell or lazy_static

EDIT: The easier option is don't move the receiver to the child component at all. You can simply receive data in Client and update the ClientForm

[DogeDark]

You could wrap the receiver in a Signal:

let recv = Signal::new(receive_rx);

rsx! {
    ClientForm { receive_rx: recv, send_tx: send_tx }
}

There are also a few hooks like use_coroutine that might be better suited although I'm unsure if they'd have the same issue.

[jiker-burce]

@DogeDark that could not work

    let recv = Signal::new(receive_rx);
    let send = Signal::new(send_tx);

    rsx! {
        ClientForm{receive_rx: recv, send_tx: send}
    }

#[component]
fn ClientForm(mut receive_rx: Signal<Receiver<String>>, mut send_tx: Signal<Sender<String>>) -> Element {
    spawn(async move {
        let mut recv = receive_rx.take();
        while let Some(message) = recv.recv().await {
            messages.push(Message{user: current_user.clone(), message },);
        }
    });
}

error[E0277]: the trait bound `tokio::sync::mpsc::Receiver<String>: std::default::Default` is not satisfied
   --> src/libs/client_lib.rs:59:35
    |
59  |         let mut recv = receive_rx.take();
    |                                   ^^^^ the trait `std::default::Default` is not implemented for `tokio::sync::mpsc::Receiver<String>`
    |

[jiker-burce]

@quangIO

• it also cant' work. ^_^

    let recv = Arc::new(Mutex::new(receive_rx));
    let send = Arc::new(Mutex::new(send_tx));

    rsx! {
        ClientForm{receive_rx: recv, send_tx: send}
    }

#[component]
fn ClientForm(mut receive_rx: Arc<Mutex<Receiver<String>>>, mut send_tx: Signal<Sender<String>>) -> Element {}

Trait `PartialEq` is not implemented for `Arc<Mutex<Receiver<String>>>`

[quangIO]

@jiker-burce You can make both compile. Let read the documentation and the error message carefully. Props in Dioxus require Partial and Clone trait to be implemented: you cannot pass the signal directly if you don't implement them. So you can wrap them in a wrapper type. All solutions above can be build-able (doesn't mean I am sure it will just work however):

Mutex

#[derive(Clone, Debug)]
struct ClientFormOptions {
    receiver: Arc<Mutex<Receiver<String>>>,
    send_tx: Sender<String>,
}

impl PartialEq for ClientFormOptions {
    fn eq(&self, other: &Self) -> bool {
        Arc::ptr_eq(&self.receiver, &other.receiver) && self.send_tx.same_channel(&other.send_tx)
    }
}

#[component]
fn ClientForm(options: ClientFormOptions) -> Element {
    spawn(async move {
        let receiver = options.receiver.lock().unwrap();
        while let Some(message) = receiver.recv().await {
            // messages.push(Message{user: current_user.clone(), message },);
        }
    });
    todo!()
}

FYI You don't need mut for Sender but I will keep your code as is.

Signal

Signal also requires lock (i.e. this may not what you want)

#[component]
fn ClientFormX(mut receive_rx: Signal<Receiver<String>>, mut send_tx: Signal<Sender<String>>) -> Element {
    spawn(async move {
        let mut recv = receive_rx.write();
        while let Some(message) = recv.recv().await {
            // messages.push(Message{user: current_user.clone(), message },);
        }
    });
    todo!()
}

The alternative for this is using receiver in the parent component and signal the child to change. In other words, don't move the receiver to the child.

Should you use any of these?

You decide but I wouldn't use your current pattern at all.

First alternative option

See my edit in my comment above

The easier option is don't move the receiver to the child component at all. You can simply receive data in Client and update the ClientForm

Second alternative option

• Have a global object FOOBAR_SENDER of type Lazy<Arc<RwLock<Option<Sender<String>>>>> (use once_cell)
• Inside ClientForm:
  • Create the (sender, mut receiver) pair
  • FOOBAR_SENDER.write() the assign it to Some(sender)
  • Drop the write lock immediately

Depending on your logic, there could be a better design.

[jiker-burce]

@quangIO you are right.

The easier option is don't move the receiver to the child component at all. You can simply receive data in Client and update the ClientForm

I think you are right, I found the ClientForm be rendered many times once I input letters in the Input Box, it means that the spawn() it generate many times. that's not a good pattern in fact.

I'll read the official articles again, and to find a proper solution.

[jiker-burce]

@quangIO thanks for your help, here is my original Desktop Chat Software.
I use a loop to get the signal message with 100 milli second sleep at the line 74 of client_lib.rs, but I hope to get the new message like this:

while let Some(message) = receive_rx.recv().await {
       messages.push(Message{user: current_user.clone(), message },);
}

do you have any wonderful idea?