vue.js - 使用 Laravel、Vue 和 Pusher 订阅 private-App.User.undefined 所需的身份验证信息

Question

我正在尝试使用带有 laravel api 的推送器发送在私人频道上广播的通知。发送通知时一切正常，推送服务器正在接收事件。但是，当我尝试收听这些事件时，控制台中没有显示任何内容。pusher 中的错误日志显示如下：

这是我的 main.js 代码来收听广播

let userId=document.head.querySelector('meta[name="user-id"').content;
console.log(userId)
window.Echo.private('App.User.' + userId)
    .notification((notification) => {
        console.log(notification.type);
    });

这是我的 bootstrap.js 代码

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true,
 });

这是来自welcome.blade.php 的元标记

<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="user-id" content="{{Auth::check() ? Auth::user()->id:''}}">

这是我的 channels.php 文件代码

Broadcast::channel('App.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
},['guards'=>['api']]);

最后是来自 BroadcastServiceProvider.php 的启动函数

public function boot()
    {
        Broadcast::routes(['middleware' => ['auth:api']]);

        require base_path('routes/channels.php');
    }

任何帮助将不胜感激。提前致谢。

Answer 1

我有同样的问题，但使用 Djago 和 Javascript。我的建议是：

• 确保 Pusher 用于私有通道身份验证的 URL 正常工作
• “应用程序设置”中的“启用客户端事件”已开启

Answer 2

我正在努力解决同样的问题。根据我的阅读，如果您使用的是 api，则需要将身份验证标头添加到 bootstrap.js 文件中的 echo 实例，如下所示：

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true,
    auth:{
        headers: {
            Accept: 'application/json',
            Authorization: 'Bearer ',
        },
    },

 });

试试这个。