Pusher：对于pusher：subscription_error，private-user.6没有回调

Question

I'm having a bit of a problem using Pusher with Laravel. I've configured my channels.php file to broadcast on this channel (only for authenticated users) -

Broadcast::channel('user.{user}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

My .env file says -

BROADCAST_DRIVER=pusher

PUSHER_APP_ID="652357"
PUSHER_APP_KEY="13e1**********55"
PUSHER_APP_SECRET="1e******667f8*****9f"
PUSHER_APP_CLUSTER=eu

I have this in my broadcasting.php

'default' => env('BROADCAST_DRIVER', 'log'),

'pusher' => [
     'driver' => 'pusher',
     'key' => env('PUSHER_APP_KEY'),
     'secret' => env('PUSHER_APP_SECRET'),
     'app_id' => env('PUSHER_APP_ID'),
     'options' => [
         'cluster' => env('PUSHER_APP_CLUSTER', 'eu'),
         'encrypted' => true,
     ],
 ],

The event is fired in my UsersController.php

<?php

namespace App\Http\Controllers;

use App\Events\UserStatusEvent;
use App\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
  /**
   * Create a new controller instance.
   *
   * @return void
   */
   public function __construct()
   {
       $this->middleware(['auth', 'profile'])->except('show', 'help');
   }

 /**
  * Update the specified resource in storage.
  *
  * @param  \Illuminate\Http\Request  $request
  * @param  string  $user
  * @return \Illuminate\Http\Response
  */
  public function update(Request $request, User $user)
  {
     $data = $request->only(['first_name', 'last_name', 'middle_name', 'email', 'city', 'dob', 'gender', 'address']);

     $user->update($data);

     event(new UserStatusEvent(auth()->user()));

     // if ($request->ajax()) {
     //     return response()->json([
     //         'status' => 'Profile Update successful.',
     //         'errors' => app('Illuminate\Http\Response')->status(),
     //     ], app('Illuminate\Http\Response')->status());
     // }

     return back();
  }

}

I install npm and downloaded laravel-echo (following Laravel 5.7 Broadcasting Docs) and in my bootstrap.js file before running $ npm run dev i have the following -

import Echo from 'laravel-echo';

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

window.Pusher.logToConsole = true;

window.Echo = new Echo({
    authEndpoint: 'http://localhost/penfs/public/broadcasting/auth',
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

window.Echo.private(`user.${user}`)
    .listen('UserStatusEvent', (e) => {
        console.log(e.user.first_name);
        console.log(e.user.email);
    });

The first ERROR i'm getting is Pusher : No callbacks on private-user.[object HTMLDivElement] for pusher:subscription_error on the console, here i assumed an instance of the authenticated user is not being passed so i tweaked it in my app.blade.php file by inserting this - <script type="text/javascript">var user = '{{ $user->id }}'</script> before my app.js script compiled with npm run dev. Now, I could get an instance of the auth user because i hardcoded it in the view but then, i hit another error - Pusher : No callbacks on private-user.6 for pusher:subscription_error. I've being trying to debug this whole of today. Please i really need someone to help with this. Thank you.

Oh and i uncomented App\Providers\BroadcastServiceProvider::class, in config/app.php

Edit:

In UserStatusEvent.

--

public $user;

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

public function broadcastOn(){
    return new PrivateChannel('user.'.$this->user->id);
}