title: POST http://localhost/broadcasting/auth 404 (Not Found) error showing
body: <p>I am trying to make my app connecting to pusher on a private channel.</p>
  
  <p>But I am getting the following error in console:</p>
  
  <blockquote>
    <p>POST <a href="http://localhost/broadcasting/auth" rel="nofollow noreferrer">http://localhost/broadcasting/auth</a> 404 (Not Found)
            Pusher : Couldn't retrieve authentication info. 404Clients must be authenticated to join private or presence channels</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/mpE3d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mpE3d.png" alt="enter image description here"></a></p>
  
  <p><strong>ChatEvent.php</strong></p>
  
  <pre><code>&lt;?php
  
  namespace App\Events;
  
  use App\User;
  
  use Illuminate\Broadcasting\Channel;
  use Illuminate\Queue\SerializesModels;
  use Illuminate\Broadcasting\PrivateChannel;
  use Illuminate\Broadcasting\PresenceChannel;
  use Illuminate\Foundation\Events\Dispatchable;
  use Illuminate\Broadcasting\InteractsWithSockets;
  use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
  
  class ChatEvent implements ShouldBroadcast
  {
      use Dispatchable, InteractsWithSockets, SerializesModels;
  
  
     public $message;
     public $user;
  
  
  
      public function __construct($message, User $user)
      {
  
         $this -&gt;message = $message;
  
          $this -&gt;user = $user;
  
  
      }
  
      /**
       * Get the channels the event should broadcast on.
       *
       * @return Channel|array
       */
      public function broadcastOn()
      {
          return new PrivateChannel('chat');
      }
  }
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>/**
   * First we will load all of this project's JavaScript dependencies which
   * includes Vue and other libraries. It is a great starting point when
   * building robust, powerful web applications using Vue and Laravel.
   */
  
  require('./bootstrap');
  
  window.Vue = require('vue');
  
  import Vue from 'vue'
  import VueChatScroll from 'vue-chat-scroll'
  Vue.use(VueChatScroll)
  
  /**
   * Next, we will create a fresh Vue application instance and attach it to
   * the page. Then, you may begin adding components to this application
   * or customize the JavaScript scaffolding to fit your unique needs.
   */
  
  Vue.component('example', require('./components/Example.vue'));
  
  Vue.component('chat-message', require('./components/ChatMessage.vue'));
  
  
  const app = new Vue({
      el: '#app',
  
     data:{ 
  
      message:'',
  
       chat:{     
  
          message:[]
  
       } 
  
        },
  
     methods: {  send() { 
  
  if(this.message.length !=0)
  {
  
      this.chat.message.push(this.message);
  
      this.message= '';
  
  }
     } },
  
  
     mounted()
  
     {
  
         Echo.private('chat')
      .listen('ChatEvent', (e) =&gt; {
          console.log(e.order.name);
      });
  
     } 
  
  });
  </code></pre>
  
  <p><strong>channels.php</strong></p>
  
  <pre><code>&lt;?php
  
  
  
  Broadcast::channel('App.User.{id}', function ($user, $id) {
      return (int) $user-&gt;id === (int) $id;
  });
  
  
  Broadcast::channel('chat', function() {
  
  return true;
  
  });
  </code></pre>
  
  <p><strong>ChatController.php</strong></p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Controllers;
  
  use App\Events\ChatEvent;
  Use App\User;
  use Illuminate\Support\Facades\Auth;
  use Illuminate\Http\Request;
  
  class ChatController extends Controller
  {
  
  
    public function __construct()
  
      {
          $this-&gt;middleware('auth');
      }
  
  
    public function chat()
  
  
    {
  
   return view('chat');
  
  }
  
  
  //public function send(Request $request)
  
  //{
  
   // $user = User::find(Auth::id());
  
   // event(new ChatEvent($request -&gt; $message, $user));
  
  //}
  
  
  public function send()
  
  {
  
      $message = "Hello";
  
    $user = User::find(Auth::id());
  
    event(new ChatEvent( $message, $user));
  
  }
  
  
  
  
  }
  </code></pre>
  
  <p><strong>bootstrap.js</strong></p>
  
  <pre><code>window._ = require('lodash');
  
  /**
   * We'll load jQuery and the Bootstrap jQuery plugin which provides support
   * for JavaScript based Bootstrap features such as modals and tabs. This
   * code may be modified to fit the specific needs of your application.
   */
  
  try {
      window.$ = window.jQuery = require('jquery');
  
      require('bootstrap-sass');
  } catch (e) {}
  
  /**
   * We'll load the axios HTTP library which allows us to easily issue requests
   * to our Laravel back-end. This library automatically handles sending the
   * CSRF token as a header based on the value of the "XSRF" token cookie.
   */
  
  window.axios = require('axios');
  
  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  
  /**
   * Next we will register the CSRF Token as a common header with Axios so that
   * all outgoing HTTP requests automatically have it attached. This is just
   * a simple convenience so we don't have to attach every token manually.
   */
  
  let token = document.head.querySelector('meta[name="csrf-token"]');
  
  if (token) {
      window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
  } else {
      console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
  }
  
  /**
   * Echo exposes an expressive API for subscribing to channels and listening
   * for events that are broadcast by Laravel. Echo and event broadcasting
   * allows your team to easily build robust real-time web applications.
   */
  
  import Echo from 'laravel-echo'
  
   window.Pusher = require('pusher-js');
  
   window.Echo = new Echo({
       broadcaster: 'pusher',
       key: '815bcd2378a647ffaad7',
        cluster: 'ap2',
      encrypted: false
   });
  </code></pre>
  
  <p>what may be the cause for this error? any solution</p>