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

Question

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

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

ProductsController（商店）

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

频道.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()
           })
   }

如果我broadcast之前save在我的控制器中打电话，我会得到这样的东西 No query results for model [App\Product].

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

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