laravel vue pusher - 在私人频道上广播不起作用答案

【问题标题】：laravel vue pusher - broadcasting on private channels not workinglaravel vue pusher - 在私人频道上广播不起作用
【发布时间】：2020-03-24 07:24:13
【问题描述】：

我正在学习有关披萨订单跟踪器项目的广播。我有一个管理面板，其中显示了所有订单。管理员可以更新特定订单

public function update(Request $re)
{
    DB::table('orderr')->where('id',$re->order)->update(['status_id'=>$re->status]);
    $user=Auth::user();
    $order=Order::find($re->order);
    event(new oscEvent($order));
    return redirect()->route('all');

}

更新后的 oscEvent 被发出。

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

/**
 * Create a new event instance.
 *
 * @return void
 */
public $order;

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

}

/**
 * Get the channels the event should broadcast on.
 *
 * @return \Illuminate\Broadcasting\Channel|array
 */
public function broadcastOn()
{
    return new PrivateChannel('osc'.$this->order->id);
}

public function broadcastWith()
{
    return
    [
        'order_id'=>$this->order->id,
        'order_user_id'=>$this->order->user_id,
        'order_status_name'=>$this->order->status->name,
        'order_status_percent'=>$this->order->status->percent,


    ];
}

}

用户有自己的面板来显示他的订单。每个订单都有自己的进度条。当管理员更新订单时，每个进度条都会更改而不刷新页面值。我为此使用广播和推送器。进度条放在vue组件pas.vue中

///用户视图

 foreach($orders as $o)
<tr>
<td>{{ $o->name }}</td>
<td>{{ $o->user->name }}</td>
<td>{{ $o->status->name }}</td>
<td width="50%"><pas :perc="{{ $o->status->percent }}" :order_id={{ $o->id }}></pas></td>
</tr>

///pas.vue

<template>
    <div>
   <b-progress :value="perc" :max="max" show-progress animated></b-progress>
  </div>
</template>

 export default {
data() {
return {

    max:100
};
 },
   props:['perc','order_id'],
   mounted(){

  Echo.private('osc'+this.order_id)
.listen('oscEvent', (e) => {
    this.perc=e.order_status_percent
    console.log('progressbar updated');
});

我也在授权频道。

Broadcast::channel('osc1', function () {
///return (int) $user->id === (int) $o->user_id;
return true;
});

使用公共频道，一切正常。有问题的是私人频道。上面介绍的配置不能正常工作。 Pusher 调试控制台在私有 chanel 上正确返回 api 消息，但进度条未更新。请帮忙。

【问题讨论】：

您正在测试的订单 ID 肯定是 1 吗？ Broadcast::channel('osc1', function () { 仅适用于订单 ID 1

标签： laravel vue.js pusher

【解决方案1】：

还是不行。

我修改了频道回调

 Broadcast::channel('osc{o}', function ($user,Order $o) {
 return (int) $user === (int) $o->user_id;
});

我创建了 type-hint Order 类。
我正在我的用户和管理员视图中扩展“layouts.app”模板。
是的，它被调用了。

我使用的是 laravel 5.6。

【讨论】：

【解决方案2】：

您需要将$user 和$o 变量传递到广播路由回调中，并将参数定义用大括号括起来：

Broadcast::channel('osc{o}', function($user, Order $o) { ... });

如果您不希望 echo 将整个事件命名空间作为事件的前缀，则需要在事件名称（仅在前端）前加上 .：

.listen('.oscEvent', (e) ...

在您的oscEvent 类中，您应该在构造函数中键入提示 $order 参数：

public function __construct(Order $order) { ... }

没有看到 Echo 初始化，很难判断您是否正确配置了它以进行身份验证。您是否将 csrf 令牌添加到页面以便 echo 可以获取它？

来自 Laravel docs:

Laravel Echo 需要访问当前会话的 CSRF 令牌。您应该验证您的应用程序的头部 HTML 元素是否定义了包含 CSRF 令牌的元标记：

<meta name="csrf-token" content="{{ csrf_token() }}">

确保在您的 BroadcastServiceProvider::boot 方法中调用了 Broadcast::routes();。

希望这会有所帮助。

注意

我认为您可能确实想为您的事件添加整个命名空间的前缀，因此您可以忽略建议 #2

【讨论】：