Laravel, вещающий с Pusher, не слушает с Vue

Question

С Laravel (v5.7) я пытаюсь заставить Broacasting работать с Pusher и Vue.

Приложение похоже на чат. При отправке сообщения в приватном чате вызывается следующая функция:broadcast(new NewChat($message));

Это "NewChat"- событие:

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

    public $message;

    public function __construct(\App\Message $message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('chats.' . $this->message->conversation_id);
    }

    public function broadcastWith()
    {
        return ['message' => $this->message];
    }
}

channels.php имеет:

Broadcast::channel('chats.{conversationId}', function ($user, $conversationId) {
    return true; // security i'll do later
});

Все это отправляет Pusher:

Но я не могу понять, как правильно слушать События с помощью Vue и обновлять все это. Следующее, что я добавил в boostrap.js (все написано в приложении Vue):

import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER, 
    encrypted: true
});
window.Echo.private(`chats.1`)
    .listen('NewChat', (e) => {
        console.log(e);
    });

В примере я жестко закодировал номер 1 для частного канала, потому что это тот же канал, что и на скриншоте.

Что мне не хватает? Я перечитывал страницу документации несколько раз и пытался следовать учебным пособиям, чтобы увидеть, пропустил ли я что-то маленькое, но не знаю. Кто-нибудь, кто видит, что мне не хватает?

Answer 1

Основываясь на ваших ответах в комментариях, ваш broadcasting/auth Звонок не поступил. Это говорит о том, что ваш код Laravel Echo в вашем bootstrap.js файл не вызывается.

Один из способов проверить это - просто добавить console.log в вашем bootstrap.js файл. Возможные причины: а) пропущенный скрипт развертывания, б) точка входа вашего приложения не вызывает bootstrap.js,

Если вы пропустили запуск сценария развертывания, просто запустите npm run prod чтобы исправить проблему.