Nuxtjs+；拉威尔回声&x2B；拉威尔护照&x2B；Laravel WebSockets可以'；无法从私人/状态频道获取事件

我使用的是与Laravel后端分开托管的NuxtJS。为了验证用户身份，我使用了Laravel Passport。我正试图通过使用

@nuxtjs/laravelecho

和

pusher-js

为我的网站建立聊天功能。这是来自包

beyondcode/laravel-websockets

的自托管websocket，与

php-artisan-websockets:service

一起运行。作为一个例子，我正在使用这个回购协议。唯一的区别是我使用的是Laravel Passport和NuxtJS

这是我的

numxt.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\chatmesssent.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);
    }
}

事件将作为（我现在没有使用

。->toOthers（）

）进行调度：

我的当前用户在我的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

config文件中，我正在使用

api

中间件

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

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

---

顺便说一句，在调试控制台

http://localhost:8000/laravel-WebSocket

我很幸运找到了这篇文章

要使上述方法发挥作用，第一步是（在Laravel侧） 在

config/App.php

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

然后我们需要稍微调整一下我们的

App\Providers\BroadcastServiceProvider.php

，以使用API身份验证。将

Broadcast:：routes（）

替换为

Broadcast:：routes（['middleware'=>['auth:api']]）

现在我们只需要在
numxt.config.js
（numxtjs侧）中添加一行来指定Auth端点。我的
BACKEND\u BASE\u URL
是
http://localhost:8000
php laravel serve提供的URL

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

---

现在private channel正在使用自托管pusher

您可以使用pusher dashboard>channel>debug控制台。刷新您的页面，您应该开始看到页面中出现的内容。您很可能会看到类似Connection>Subscribed>Accounted.抱歉，需要提及的是这是自托管的websocketIn。在这种情况下，您可能需要更改您的

numxt.config.js

，因为它有一个推送器配置。我是基于此构建的。区别在于我使用的是Laravel Passport和Nuxt.js。这里提供的自托管推送器选项不能提供关于laravel websocket如何工作的很多细节，但据我所知，它使用推送器js的方式与pusher.com相同，但只有您将使用包提供的自己的websocket

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

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

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

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