Laravel websocket 不会从 vue 前端触发事件

Question

我已经设置了与 pusher 的 websocket 连接。我可以在 websocket 管理员处触发事件，我可以通过 console.log 显示它的输出。现在我创建了一个新事件，如果用户添加新产品，则 table 将在任何人查看它时更新。但似乎我可以成功添加数据，但 table 不会更新给其他用户。有人知道为什么我的活动不起作用吗？

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（商店）

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;
});

和我的 vue 组件

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()
           })
   }

如果我在我的控制器中 save 之前调用 broadcast，我会得到这样的结果 No query results for model [App\Product].

我取消了 config.php 中 App\Providers\BroadcastServiceProvider::class, 行的注释，以便广播正常工作。

Answer 1

我不知道为什么 .join 不起作用，但我使用了 window.Echo.channel 我怀疑这是正确的做法。

    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 不会从 vue 前端触发事件

Laravel websocket wont trigger event from vue front end

javascript

php

laravel

vue.js

laravel-websockets