Nuxt js + Laravel Эхо + Laravel Паспорт + Laravel WebSockets не может получать события из частных каналов / каналов присутствия

Question

Я использую Nuxt JS, размещенный отдельно от Laravel бэкэнда. Для аутентификации пользователей я использую Laravel Паспорт. Я пытаюсь создать функцию чата для моего сайта, используя @nuxtjs/laravel-echo и pusher-js. Это самодостаточный веб-сокет из пакета beyondcode/laravel-websockets, работающий с php artisan websockets:serve. В качестве примера я использовал этот репо https://github.com/qirolab/Laravel-WebSockets-Chat-Example. Разница лишь в том, что я использую Laravel -Passport и Nuxt JS

, вот моя nuxt.config.js 'buildModules` часть

  buildModules: [
   ...
    [
      '@nuxtjs/laravel-echo',
      {
        broadcaster: 'pusher',
        key: process.env.MIX_PUSHER_APP_KEY,
        cluster: process.env.MIX_PUSHER_APP_CLUSTER,
        encrypted: false,
        wsHost: process.env.WEBSOCKET_BASE_URL,
        wsPort: 6001,
        disableStats: true
      }
    ]
  ],

  echo: {
    authModule: true,
    connectOnLogin: true,
    disconnectOnLogout: true
  },

мое событие в Laravel ( App\Events\ChatMessageSent.php) выглядит следующим образом:

<?php

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;
use App\ChatMessages;

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

    public $message;

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

    public function broadcastOn()
    {
        return new PrivateChannel('chat.' . $this->message->room->id);
    }
}

в настоящее время я не фильтрую пользователей, поэтому моя channel.php имеет следующую запись:

.....
Broadcast::channel('chat.{roomId}', function ($user, $roomId) {
    return true;
});

И событие будет отправлено как (сейчас я не использую ..->toOthers()):

...
broadcast(new ChatMessageSent($message));
...

Мой текущий пользователь аутентифицирован в моем приложении Nuxt JS и доступен через this.$auth.user

в передней панели. Конечный файл, который у меня есть:

mounted:{
  const channel = `chat.${this.roomID}`
  this.$echo.private(channel).listen('ChatMessageSent', event => {
      console.log(
        '-------------------- This is happening!! -----------------------'
      )
      console.log(event)
      this.messages.push(event.message)
    })

Но приложение работает абсолютно тихо на всех событиях ChatMessageSent. Нет консольного журнала вообще. Если я переключу это на publi c канал, то все работает нормально. Я думаю, что-то не так с аутентификацией. В конфигурационном файле websocket.php я использую api middleware

  */
    'middleware' => [
        'api',
        Authorize::class,
    ],

Есть ли способ отладки процесса аутентификации на websocket?

Кстати, я не вижу что-нибудь о попытках аутентификации в консоли отладки http://localhost:8000/laravel-websockets

Answer 1

Мне повезло, я нашел эту статью https://medium.com/@mihkelallorg / laravel -react-jwt-tokens-and- laravel -echo-with-pusher-for-pumher-like-me-cafc5a09a1a1

Для того, чтобы подход, описанный выше, работал, сначала нужно (со стороны Laravel) раскомментировать App\Providers\BroadcastServiceProvider.php в config/app.php

'providers' => [    
    ...
    App\Providers\BroadcastServiceProvider.php,
    ...
]

, затем нам нужно немного настроить наш App\Providers\BroadcastServiceProvider.php для использования аутентификации API. Замена Broadcast::routes() на Broadcast::routes(['middleware' => ['auth:api']]);

public function boot()
    {
        //Broadcast::routes();

        Broadcast::routes(['middleware' => ['auth:api']]);
        require base_path('routes/channels.php');
    }

Теперь нам нужно добавить только одну строку в nuxt.config.js (Nuxt JS side), чтобы указать конечную точку Auth. Мой BACKEND_BASE_URL - это http://localhost:8000 URL-адрес, предоставленный php laravel serve

buildModules: [
    ....
    [
      '@nuxtjs/laravel-echo',
      {
        broadcaster: 'pusher',
        key: process.env.MIX_PUSHER_APP_KEY,
        cluster: process.env.MIX_PUSHER_APP_CLUSTER,
        encrypted: false,
        wsHost: process.env.WEBSOCKET_BASE_URL,
        wsPort: 6001,
        disableStats: true,
        authEndpoint: process.env.BACKEND_BASE_URL + '/broadcasting/auth'
      }
    ]
  ],

  echo: {
    authModule: true,
    connectOnLogin: true,
    disconnectOnLogout: true
  },

Теперь частный канал работает с толкателем-хостером