Nuxtjs + Laravel Echo + Laravel Passport + Laravel WebSockets无法从私有/状态信道获取事件

Question

我正在使用与Laravel后端分开托管的NuxtJS。为了验证用户身份，我使用了Laravel Passport。我正在尝试使用@nuxtjs/laravel-echo和pusher-js为我的网站构建聊天功能。这是来自软件包beyondcode/laravel-websockets的自托管Websocket，与php artisan websockets:serve一起运行。作为示例，我正在使用此仓库https://github.com/qirolab/Laravel-WebSockets-Chat-Example。我使用Laravel-Passport和NuxtJS的唯一区别

这是我的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));
...

我的当前用户已在我的NuxtJS应用程序中通过身份验证，可以通过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事件上都保持完全安静。根本没有控制台日志。如果我将其切换到公共频道，则一切正常。我的猜测是认证有问题。在websocket.php配置文件中，我正在使用api中间件

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

有没有办法可以调试websocket上的身份验证过程？

顺便说一句，我在调试控制台http://localhost:8000/laravel-websockets中看不到任何有关身份验证尝试的信息>

我正在使用与Laravel后端分开托管的NuxtJS。为了验证用户身份，我使用了Laravel Passport。我试图通过使用@ nuxtjs / laravel-echo和...

Answer 1

我很幸运找到了这篇文章https://medium.com/@mihkelallorg/laravel-react-jwt-tokens-and-laravel-echo-with-pusher-for-dummies-like-me-cafc5a09a1a1