vue.js - Laravel、Vue、Pusher を使用して private-App.User.undefined にサブスクライブするために必要な認証情報

Question

laravel apiでプッシャーを使用して、プライベートチャネルでブロードキャストする通知を送信しようとしています。通知の送信中はすべて問題なく、プッシャー サーバーはイベントを受信して​​います。ただし、これらのイベントをリッスンしようとすると、コンソールに何も表示されません。プッシャーのエラー ログには、次のように表示されます。

ブロードキャストをリッスンするための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 からの boot 関数

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

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

どんな助けでも大歓迎です。事前に感謝します。