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

Posted 2023-02-21

【中文标题】无法广播客户端事件（连接未订阅频道私聊）

【英文标题】：Cannot broadcast client event (connection not subscribed to channel private-chat)

【发布时间】：2021-12-25 13:24:01

【问题描述】：

我正在使用 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】：

由于身份验证，您显然面临客户端和 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 检索用户令牌的参考。但是您可以通过多种方式在用户端处理和存储令牌

【讨论】：

当我在 nuxt.config 文件中尝试这些设置时，例如： headers: Authorization: this.$auth.strategy.token.get() 它说： TypeError: Cannot read property '$auth'的未定义。问题是我无法访问 nuxt.config 中的 $auth！我也禁用了 TLS，但没有改变。

我就是这样做的，只是一个示例。用户登录后，您需要附加用户不记名令牌。我已经编辑了我的答案