Laravel 广播不在前端提醒消息

Question

我对这个 laravel 事件很陌生，所以我无法正确完成它。

我正在尝试触发一个事件以在作业完成时通知用户。所以，我在工作结束时触发了一个事件

event(new AmenityUploaded($this->data['property_id']));

我的活动看起来像：

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

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

    public $property_id;

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

    public function broadcastOn()
    {
        return new PrivateChannel('channel.amenity.'.$this->property_id);
    }


    public function broadcastAs()
    {
        return 'amenity-uploaded';
    }
}

并在 routes/channel.php

Broadcast::channel('channel.amenity.{propertyId}', function ($user, $propertyId) {
//    return $user->id === \App\Models\Property::find($propertyId)->updated_by;
    return true; 
}

并且在视图中，我将 javascript 用作：

查看

<script>

    Pusher.logToConsole = true;

    var pusher = new Pusher('xxxxxxxxxxxxxxxxxxxxx', {
        cluster: 'us3',
        forceTLS: true
    });
    $id = '<?php echo $r->id; ?>';
    var channel = pusher.subscribe(`channel.amenity.${$id}`);
    channel.bind('amenity-uploaded', function(data) {
        alert(JSON.stringify(data));
    });


</script>

我的 .env 看起来像：

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=xxxxx
PUSHER_APP_KEY=xxxxxxxxxxxxxxxxxxxx
PUSHER_APP_SECRET=xxxxxxxxxxxxxxxxxxxx
PUSHER_APP_CLUSTER=us3

所以，每当我运行排队时php artisan queue:work --tries=3。最后，我可以看到 App\Events\AmenityUploaded 被解雇了。但是，我在前端看不到任何警报。

但是，如果我尝试从推送器仪表板推送通知，它会在应用程序上成功提醒。从推送器调试控制台推送时，我将通道用作 channel.amenity.1，将事件用作 amenity-uploaded

##更新

我已经在事件中添加了一个块 broadcastWith:

    public function broadcastWith()
    {
        // This must always be an array. Since it will be parsed with json_encode()
        return [
            'name' => 'Saroj',
            'message' => 'Message',
        ];
    }

并且，这已成功显示在推送器仪表板中。但是，还没有在前端发出警报。

更新 2

尝试使用 echo：在 bootstrap.js

中添加了以下代码

import Echo from 'laravel-echo'
import Pusher from "pusher-js"
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'xxxxxxxxxxxxxxxxxxxx',
    cluster: 'us3',
    encrypted: true
});

并且在视图中：

<script>
    $id = '<?php echo $r->id; ?>';


    Echo.channel(`channel.amenity.${$id}`)
        .listen('.amenity-uploaded', (data) => {
            alert(JSON.stringify(data));
        });


</script>

还是一样，如果从推送器仪表板触发，前端将显示警报。完成作业后，可以在推送器仪表板上看到该事件，但在前端看不到。

Answer 1

我认为问题是您在前端仅使用 Pusher 而没有 laravel-echo，这应该是使用私人频道所必需的。 Pusher 本身不知道它必须授权，laravel-echo 开箱即用。

这就是我初始化 Pusher 和 Echo 的方式：

window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: fromPHP.PUSHER_APP_KEY,
    cluster: fromPHP.PUSHER_CLUSTER,
    encrypted: true
});

这就是我收听私人活动的方式：

Echo.private(channel).listen('.amenity-uploaded', data => alert(JSON.stringify(data)));

注意 amenity-uploaded 之前的前导 .。当您自定义 broadcastAs (https://laravel.com/docs/5.8/broadcasting#broadcast-name)

时，这是必需的

Laravel 广播不在前端提醒消息

Laravel broadcast not alerting the message on the frontend

laravel

pusher

查看

##更新

更新 2