Веб-сайты Vue/Laravel Прослушивают более одного события

#javascript #php #laravel #vue.js #websocket

Вопрос:

У меня есть некоторые проблемы с разработкой веб-сайтов с помощью Laravel и Vue. До сих пор все работало нормально, пока мне не понадобилось реализовать функцию, которая будет прослушивать больше событий на одном канале. Интересная часть заключается в том, что я вижу в консоли, что оба события получены, но для одного я получаю, что у pusher нет обратных вызовов на этом канале и слушателе. Так что я сделал на самом деле.

Я создал 2 события в своем приложении Laravel примерно так:

     class Order implements ShouldBroadcast
    {
        use Dispatchable, InteractsWithSockets, SerializesModels;
    
        public $user;
        public $order;
    
      
        public function __construct($user, $order)
        {
            $this->user = $user;
            $this->order = $order;
        }
    
        public function broadcastOn()
        {
            return new PrivateChannel('orders');
        }
    
        public function broadcastAs(){
            return 'order-updated';
        }
    }
 

И еще один такой

 class AddOrder implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $order;

    public function __construct($order)
    {
        $this->order = $order;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('orders');
    }

    public function broadcastAs(){
        return 'order-added';
    }
}
 

Таким образом, первый предназначен для обновления заказов, а второй-для добавления. Как вы видите, они подключены к одному и тому же каналу.

И в начале мне так понравилось:

 window.Echo.private("orders").listen(".order-updated", (order) => {
            if (this.liveData) {
                let index = this.ordersList.findIndex((singleOrder => singleOrder.id === order.order.id));

                let updateOrder = {
                    updated_index: index,
                    updated_order: order.order
                };
                
                this.$store.commit("UPDATE_ORDER", updateOrder);
            }
        })
        .listen("order-added", (order) => {
            this.$store.commit("ADD_ORDER", order);
        });
 

Итак, как я вижу в консоли, каждый веб-пакет отправляется по мере необходимости, но он прослушивает только первый класс (Заказ), и когда я тестирую другой (AddOrder) Я вижу ответ в консоли, но после этого у меня есть такой журнал, как:

Толкатель : : [«Нет обратных вызовов по частным заказам для заказа-добавлено»]

Я попытался заменить канал каналом присутствия и общедоступным каналом, но у меня ничего не вышло. Интересная часть заключается в том, что я заменил методы прослушивания, сначала для прослушивания добавленного заказа, а затем обновленного заказа, но это работает только для обновленного заказа.

В чем может быть проблема? Почему я не могу получить слушателя, добавленного по заказу?

PS: Причина, по которой у AddOrder нет класса $user, заключается в том, что каждый может сделать заказ и не нуждается в этом классе.

Комментарии:

1. Вы пропустили » . » в .listen("order-added", (order) или это просто опечатка?

2. Да, я понял это после того поста, все равно спасибо 🙂