title: Laravel Echo with Pusher not receiving messages on private channel
body: <p>Every time I switch to the private channel nothing is ever received on the browser but when using just a standard channel it works. My current setup includes a Vue CLI app for the front-end and a Laravel API as the backend using Laravel Passport for authentication.</p>
  
  <p>This is the code which is being used to connect to Pusher.</p>
  
  <pre class="lang-js prettyprint-override"><code>import LaravelEcho from 'laravel-echo';
  
  // ...
  
  export const Echo = new LaravelEcho({
    broadcaster: 'pusher',
    key: pusherKey,
    cluster,
    encrypted: true,
  });
  
  Echo.connector.pusher.config.authEndpoint = `${baseURL}/broadcasting/auth`;
  
  store.watch((state: any) =&gt; state.$auth.token, (token: string) =&gt; {
    Echo.connector.pusher.config.auth.headers['Authorization'] = `Bearer ${token}`;
  });
  
  store.watch((state: any) =&gt; state.$auth.user, (n: any, o: any) =&gt; {
    if (n) {
      console.log(`App.User.${n.id}`); // This is being logged to the console App.User.1
      Echo.private(`App.User.${n.id}`)
        .listen('.friend.request', (e: any) =&gt; {
          console.log({ e });
        });
    }
  });
  </code></pre>
  
  <p>And this is the channel route file:</p>
  
  <pre class="lang-php prettyprint-override"><code>&lt;?php
  
  Broadcast::channel('App.User.{id}', function ($user, $id) {
      return true;
      // return (int) $user-&gt;id === (int) $id;
  });
  </code></pre>
  
  <p>A cut down version of the event.</p>
  
  <pre class="lang-php prettyprint-override"><code>&lt;?php
  
  namespace App\Events;
  
  // ...
  
  class FriendRequestSent implements ShouldBroadcast
  {
      use Dispatchable, InteractsWithSockets, SerializesModels;
  
      // ...
  
      public function broadcastOn()
      {
          return new PrivateChannel("App.User.{$this-&gt;friend-&gt;id}");
      }
  
      // ...
  }
  </code></pre>
  
  <p>And I have set up this testing route:</p>
  
  <pre class="lang-php prettyprint-override"><code>&lt;?php
  
  Route::get('/', function (Request $request) {
      event(new FriendRequestSent(User::find(1), User::find(1)));
  });
  </code></pre>
  
  <p>After running the <code>Echo.private()...</code> code I can see the following show up in my Pusher dashboard:</p>
  
  <p><a href="https://i.stack.imgur.com/0fyCw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0fyCw.png" alt="Pusher Dashboard Connected"></a></p>
  
  <p>And then after firing off the event from the <code>/</code> route:</p>
  
  <p><a href="https://i.stack.imgur.com/egG43.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/egG43.png" alt="Queue"></a></p>
  
  <p>Finally, Pusher picking up the event and nothing showing in the console:</p>
  
  <p><a href="https://i.stack.imgur.com/IQFHz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IQFHz.png" alt="Output"></a></p>
  
  <p>However, if I change <code>new PrivateChannel(...)</code> to <code>new Channel(...)</code> and then use <code>Echo.channel</code> instead of <code>Echo.private</code> it will start to display something in the console.</p>
  
  <p>Does anyone know why this could be happening?</p>
  
  <hr>
  
  <p>An update to this, I found this webpage: <a href="https://pusher.com/docs/channels/getting_started/debugging#enable-logging-in-the-channels-javascript-library" rel="nofollow noreferrer">Pusher Docs - Debugging</a></p>
  
  <pre><code>Pusher :  : ["Event sent",{"event":"pusher:subscribe","data":{"auth":"some_auth_code_returned_from_api_broadcasting_auth","channel":"private-App.User.1"}}]
  
  Pusher :  : ["Event recd",{"event":"pusher_internal:subscription_succeeded","channel":"private-App.User.1","data":{}}]
  
  Pusher :  : ["No callbacks on private-App.User.1 for pusher:subscription_succeeded"]
  </code></pre>
  
  <p>I can see by the final output <code>No callbacks on private-App.User.1...</code> could be causing the issue but the only things I could find on it were:</p>
  
  <ol>
  <li>Change to <code>BROADCAST_DRIVER=pusher</code></li>
  <li>Attempting this code in <code>channels.php</code>:</li>
  </ol>
  
  <pre class="lang-php prettyprint-override"><code>&lt;?php
  
  // Notice {userId} rather than {id}.
  Broadcast::channel('App.User.{userId}', function ($user, $userId) {
      return (int) $user-&gt;id === (int) $userId;
  });
  </code></pre>
  
  <hr>
  
  <p>I have now tried this with Socket.IO and I'm getting the same results:</p>
  
  <p>Socket.IO console output:</p>
  
  <pre><code>[6:36:11 AM] - Preparing authentication request to: http://isapi.test
  [6:36:11 AM] - Sending auth request to: http://isapi.test/api/broadcasting/auth
  [6:36:12 AM] - gT9--_C_2c-KwoxLAAAE authenticated for: private-App.User.1
  [6:36:12 AM] - gT9--_C_2c-KwoxLAAAE joined channel: private-App.User.1
  </code></pre>
  
  <p>My Socket.IO configuration:</p>
  
  <pre class="lang-js prettyprint-override"><code>import io from 'socket.io-client';
  
  (window as any).io = io;
  
  export const Echo = new LaravelEcho({
    broadcaster: 'socket.io',
    host: `${baseURL.substr(0, baseURL.length - 4)}:6001`,
    encrypted: true,
  });
  
  Echo.connector.socket.io.opts.authEndpoint = `${baseURL}/broadcasting/auth`;
  
  store.watch(
    (state: any) =&gt; state.$auth.token,
    (token: string) =&gt; {
      Echo.connector.socket.io.opts.auth.headers.Authorization = `Bearer ${token}`;
    },
  );
  </code></pre>
  
  <hr>
  
  <p>So I have created a completely fresh install of Vue and Laravel with the following dependencies:</p>
  
  <p>Laravel:</p>
  
  <ul>
  <li>Passport</li>
  <li>Barry CORS</li>
  <li>Pusher Server</li>
  </ul>
  
  <p>Vue:</p>
  
  <ul>
  <li>TypeScript install</li>
  <li>My custom HTTP wrapper (just wrapping fetch &amp; axios)</li>
  </ul>
  
  <p>And it works so I'm just going to have to find out what I did differently and see if I can solve it that way. If you would like to see this testing code I have placed it in this repository.</p>
  
  <p><a href="https://github.com/kingga/stackoverflow-59449785" rel="nofollow noreferrer">https://github.com/kingga/stackoverflow-59449785</a></p>