Laravel websocket wont trigger event from vue front end

Question

I already have setup my websocket connection with pusher. I can fire events at the websocket admin and i can show the output of it via console.log. Now i created a new event that if the user adds new product, the table will be updated whenever who is viewing it. But it seems I can add data successfully but the table wont update to other user. Can someone know why my event is not working?

ProductsEvent.php

namespace App\Events;
//show only important imports
use Illuminate\Broadcasting\Channel;
use App\Product; //Import my model

class ProductsEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $product;

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

    public function broadcastOn()
    {
        return new Channel('Products');
    }
}

ProductsControlller (store)

public function store(Request $request)
    {
      $product = new Product;

      //some validation...
      //broadcast(new ProductsEvent($product)); if i put it here i got No query results for model [App\Product].
      $product->barcode = $request->barcode;
      $product->product_name = $request->product_name;
      $product->price = $request->price;
      $product->quantity = 0;
      $product->category = $request->category;
      $product->supplier_id = $request->supplier;
      $product->save();

      broadcast(new ProductsEvent($product));
    }

channels.php

Broadcast::channel('Products',function(){
    return true;
});

and my vue component

created(){
            //when i successfully created the data, 
            i will call getProducts to listen in the channel for DOM updates

            Echo.join('Products')
                .listen('ProductsEvent',(event)=>{
                    this.getProducts()
           })
   }

If i call broadcast before save in my controller, I got something like this No query results for model [App\Product].

I uncomented the App\Providers\BroadcastServiceProvider::class, line in config.php in order for the broadcast to work.

this is much too much code. isolate your problem to make it easier to help you. It's unclear what your issue is, and if you are asking a question to do with the flow or an error, and if so which part. just add comment in the line saying //this shows null or your own debugging attempt. — bosky101, May 07 '20 at 16:37

draw134 · Accepted Answer · 2020-05-08T03:45:00.777

I dont know why .join wont work but I used window.Echo.channel i doubt this is the right thing to do.

    created(){
            this.getProducts()
            this.getSuppliers()

            // Echo.join('Products')
            //     .listen('ProductsEvent',(event)=>{
            //         // this.products.push(event.products)
            //         this.getProducts()
            //     })
            //     .here(()=>{
            //         console.log('here')
            //     })

            window.Echo.channel('Products').listen('ProductsEvent',(e)=>{
                    this.getProducts()
                    toastr.success('Product Updated')
            })
        }

Laravel websocket wont trigger event from vue front end

1 Answers1