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一起运行。作为一个例子，我使用了这个repo 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中看不到任何关于身份验证尝试的内容

Answer 1

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

要使上面的方法起作用，第一步是(在Laravel端)在config/app.php中取消注释App\Providers\BroadcastServiceProvider.php

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

然后我们需要稍微调整一下我们的App\Providers\BroadcastServiceProvider.php来使用API auth。用Broadcast::routes(['middleware' => ['auth:api']]);替换Broadcast::routes()

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

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

现在我们只需要向nuxt.config.js (NuxtJS端)添加一行代码来指定Auth端点。我的BACKEND_BASE_URL是php laravel serve提供的http://localhost:8000地址

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
  },

现在，私有频道正在与自托管推送器合作

Answer 2

我在nuxt.config.js中使用此配置使我的配置正常工作

buildModules: [
    ['@nuxtjs/laravel-echo', {
        broadcaster: 'pusher',
        key: process.env.WEBSOCKET_KEY,
        wsHost: process.env.WEBSOCKET_HOST,
        wsPort: process.env.WEBSOCKET_PORT,
        disableStats: true,
        forceTLS: true,
    }],
],

我们使用端口443的代理。

由于我们使用的是pusher，请确保您使用npm install --save pusher-js。

.env

WEBSOCKET_KEY="hidden"
WEBSOCKET_HOST="notifications.example.com"
WEBSOCKET_PORT=443

但是，重要的是要注意，我们的事件名称需要以.字符作为前缀才能正常工作：

this.$echo.channel('orders')
    .listen('.TransactionStarted', (e) => {
        // action here
    })
    .listen('.TransactionCompleted', (e) => {
        // action here
    });

如果您遇到任何问题，请确保尝试在事件名称前加上.。