Cannot message from worker to component.

[hash1018]

Hello, I'm developing a web application with yew and axum.

Until now I have made functions to communicate between server and client, and now all I need is to send message that was received from server to component. So I found that some examples of yew_agent::Worker, applied to my project. but some reasons, it doesn't work and it returns error like this.

I have a Login component that I want to receive message from client websocket and I implemeted like this.

** when loginbutton clicked, the update method get called, and trying to connect with server and send message.
** As soon as server gets message, it directly send it back to client websocket then pass it through worker 
(which is EventBus here) to send to component ( which is Login component) 

pub enum Message {
    LoginButtonClicked,
    HandleServerMessage(ServerMessage),
}

pub struct Login {
    client: Client,
    _event_bus: Box<dyn Bridge<EventBus>>,
}

impl Component for Login {
    type Message = Message;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        let client = Client::new();
        let callback = {
            let link = ctx.link().clone();
            move |e| link.send_message(Message::HandleServerMessage(e))
        };

        Self {
            client,
            _event_bus: EventBus::bridge(Rc::new(callback)),
        }
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Message::LoginButtonClicked => {
                //let navigator = ctx.link().navigator().unwrap();
                //navigator.push(&Route::Workspace);
                if !self.client.is_connected() {
                    self.client.connect();
                }
                self.client.send_message_to_server(ClientMessage::Test);
            }
            Message::HandleServerMessage(server_message) => {
                log::debug!("received message from event_bus {server_message:?}");
            }
        }
        true
    }

*** this is my event_bus.rs file *** 

use lib::message::ServerMessage;
use serde::{Deserialize, Serialize};
use std::collections::HashSet;
use yew_agent::{HandlerId, Public, Worker, WorkerLink};
#[derive(Serialize, Deserialize, Debug)]
pub struct EventBusMessage {
    pub message: ServerMessage,
}

pub struct EventBus {
    link: WorkerLink<EventBus>,
    subscribers: HashSet<HandlerId>,
}

impl Worker for EventBus {
    type Input = EventBusMessage;
    type Message = ();
    type Output = ServerMessage;
    type Reach = Public<Self>;

    fn create(link: WorkerLink<Self>) -> Self {
        Self {
            link,
            subscribers: HashSet::new(),
        }
    }

    fn update(&mut self, _msg: Self::Message) {}

    fn handle_input(&mut self, msg: Self::Input, _id: HandlerId) {
        let msg = msg.message;
        for subscriber in self.subscribers.iter() {
            self.link.respond(*subscriber, msg.clone());
        }
    }

    fn connected(&mut self, id: HandlerId) {
        log::debug!("connected");
        self.subscribers.insert(id);
    }

    fn disconnected(&mut self, id: HandlerId) {
        log::debug!("disconnected");
        self.subscribers.remove(&id);
    }

    fn name_of_resource() -> &'static str {
        "event_bus.js"
    }

    fn resource_path_is_relative() -> bool {
        true
    }
}

Lastly this is client struct to connect server, and send message and send work to send to component.


pub struct Client {
    tx: RefCell<Option<Sender<ClientMessage>>>,
}

impl Client {
    pub fn new() -> Self {
        Self {
            tx: RefCell::new(None),
        }
    }

    pub fn is_connected(&self) -> bool {
        self.tx.borrow().is_some()
    }

    pub fn connect(&self) -> bool {
        let ws = WebSocket::open("ws:[::1]:8080/websocket").unwrap();

        let (mut write, mut read) = ws.split();

        let (in_tx, mut in_rx) = futures::channel::mpsc::channel::<ClientMessage>(1000);

        let mut event_bus = EventBus::dispatcher();

        spawn_local(async move {
            while let Some(message) = in_rx.next().await {
                log::debug!("send message to server");
                let s = serde_json::to_string(&message).unwrap();
                write.send(Message::Text(s)).await.unwrap();
            }
        });

        spawn_local(async move {
            while let Some(message) = read.next().await {
                match message {
                    Ok(Message::Text(message)) => {
                        log::debug!("received message from server");
                        let message: ServerMessage = serde_json::from_str(&message).unwrap();
                        event_bus.send(EventBusMessage { message });
                    }
                    Ok(Message::Bytes(b)) => {
                        let decoded = std::str::from_utf8(&b);
                        if let Ok(_val) = decoded {
                            //TODO:
                        }
                    }
                    Err(_e) => {}
                }
            }
        });

        *self.tx.borrow_mut() = Some(in_tx);
        true
    }

    pub fn send_message_to_server(&self, message: ClientMessage) -> bool {
        let sender = self.tx.borrow_mut().take();
        if sender.is_none() {
            log::debug!("sender is none");
            return false;
        }

        let mut sender = sender.unwrap();
        let _ = sender.try_send(message);
        log::debug!("sender sent message");

        *self.tx.borrow_mut() = Some(sender);

        true
    }
}

The log shows me it always succeed to receive message from server. But I don't know why it doesn't work.

Here is my full code repository address https://github.com/hash1018/Sketchdove

Thanks.

[hash1018]

After diving into this thing, I finally solved it and want to share about it.
It was because I didn't compile web-worker into wasm.

So.. hash1018/Sketchdove@3b1e0f2 this commit solved the problem.