无法广播客户端事件(连接未订阅通道私有聊天)

Question

我正在用 Laravel 和 Nuxt (前端和后端分离)构建一个实时聊天应用程序，使用 Pusher 和Laravel-Echo，我已经用pusher配置了Laravel，它可以很好地工作，并且可以在Pusher调试控制台中看到我的请求，我还想提到两件事:我使用Laravel-JWTE 29和E 110Nuxt-AuthE 211进行身份验证；第二，它在公共通道上工作，但是自从我将它转换为E 112私有E 213，it客户端代码E114>可以不再订阅代码<<215>代码>。

以下是错误图像：

​

这是我的Laravel配置：

.env

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=MY_APP_ID
PUSHER_APP_KEY=MY_APP_KEY
PUSHER_APP_SECRET=MY_APP_SECRET
PUSHER_APP_CLUSTER=eu

channels.php

Broadcast::channel('chat', function() {
    return true;
});

ChatController.php

public function sendMessage(Request $req) {
    $user = Auth::user();
        
    broadcast(new ChatEvent($user, $req->message))
        ->toOthers();
}

ChatEvent.php

public function __construct(User $user, $message)
    {
        $this->user = $user;
        $this->message = $message;
    }

public function broadcastAs()
    {
        return 'chat-event';
    }

public function broadcastOn()
    {
        return new PrivateChannel('chat');
    }

EventServiceProvider

use App\Events\ChatEvent;
use App\Listeners\SendMessageNotification;
...
protected $listen = [
        ChatEvent::class => [
            SendMessageNotification::class,
        ],
    ];

composer.json

"require": {
    ...
    "pusher/pusher-php-server": "^7.0",
    "tymon/jwt-auth": "^1.0"
}

下面是我的Nuxt配置：

package.json

"dependencies": {
    ...
    "@nuxtjs/auth-next": "5.0.0-1624817847.21691f1",
    "nuxt": "^2.14.6",
    "pusher-js": "^7.0.3",
  },
"devDependencies": {
    ...
    "@nuxtjs/laravel-echo": "^1.1.0",
  }

nuxt.config.js

buildModules: [
    ...
    '@nuxtjs/laravel-echo',
  ],
echo: {
    broadcaster: 'pusher',
    key: 'my-app-key',
    cluster: 'eu',
    forceTLS: true,
    plugins: ['~/plugins/echo.js']
  },

echo.js插件

export default function ({ $echo }) {
    console.log($echo)
}

聊天页面index.vue

mounted() {
    this.$echo.private(`chat`)
      .listen(`chat-event`, (e) => {
        this.addNewMessage(e.user, e.message)
      })
      .listenForWhisper('typing', (e) => {
        console.log(e.name);
      })
  },
watch: {
    typeMessage() {
      this.$echo.private(`chat`)
        .whisper('typing', {
          name: this.typeMessage
        })
    }
  },

下面是我的回显控制台日志：

​

​

我试图修复这个错误

1. 我试着用邮递员测试后端，pusher调试控制台运行良好：

。

​

1. I试图将频道改为公共频道，效果很好。

结论

我认为问题来自认证部分，当尝试订阅一个私人频道时，希望任何人都能提供帮助！

Answer 1

由于身份验证，您显然面临客户端和API之间的连接问题。

尝试使用没有forceTLS的基本配置(它也必须禁用在pusher网站下的应用程序设置部分)。

此外，请确保您的echo实例正在使用所需的标头到达您的auth端点。它是私人/存在频道所需要的。

在我的例子中，我使用的是护照，所以必须在标头上附加更多的标记。

broadcaster: 'pusher',
key: process.env.VUE_APP_PUSHER_KEY,
cluster: process.env.VUE_APP_PUSHER_CLUSTER,
authEndpoint: process.env.VUE_APP_API_URL + '/broadcasting/auth',
auth: {
     headers: {
         Authorization: 'Bearer ' + this.$auth.token()
     }
}

编辑:对不起，没有足够的澄清。

只允许通过身份验证的用户使用存在/私有通道。由于您使用的是JWT，所以您需要提供一个授权头和当用户登录时获得的Bearer访问令牌。

我不确定nuxt如何处理用户令牌，但this.$auth.token()只是对我如何使用websanova vue auth检索用户令牌的参考。但是，您可以在用户端以多种方式处理和存储令牌