无法广播客户端事件（连接未订阅频道私聊）

Question

我正在使用 Laravel 和 Nuxt （前端和后端分开） 构建一个实时聊天应用程序>Pusher 和 Laravel-Echo，我已经为 Laravel 配置了 pusher，它工作正常，可以在 Pusher 调试控制台中看到我的请求，我还想先提两件事，我处理我使用 Laravel-JWT 和 Nuxt-Auth 进行身份验证，其次，它适用于公共渠道，但由于我将其转换为 private，Nuxt 客户端 不能再订阅了。

这是错误图片：

这是我的 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. 我尝试用邮递员测试后端，推送器调试控制台工作正常：
2. 我尝试将频道更改为公开，效果很好。

结论

我认为问题出在尝试订阅私人频道时的身份验证部分，希望任何人都可以提供帮助！

Answer 1

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

尝试使用没有forceTLS 的基本配置（它也必须在应用设置部分下的推送器网站中禁用）。

此外，请确保您的 echo 实例使用所需的标头访问您的身份验证端点。私人/状态频道需要它。

在我的情况下，我使用的是护照，因此必须使用标头中附加的 Bearer 令牌来完成身份验证。

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，因此您需要提供一个 Authorization 标头以及您在用户登录时获得的 Bearer 访问令牌。

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