Not able to receive Pusher event.

using: php artisan --version Laravel Framework 6.18.0

I'm trying to get Pusher setup. Just testing it now and I'm not able to receive the event for some reason. I think Its something simple but nothing I've tried gets me the event. I've also tried Echo with similar result.

Any pointers would be very helpful. Thank you.

This is the JS that never gets triggered:

   channel.bind('App\Events\BidSent', function(data) { ///<--this never triggers!
       console.log("Data:".data);
   });

Here is the console log note the 1 violation...

Pusher :  : ["State changed","initialized -> connecting"]
pusher.min.js:8 Pusher :  : ["Connecting",{"transport":"ws","url":"wss://ws-us2.pusher.com:443/app/64936XXXXXXXXXX?protocol=7&client=js&version=7.0.0&flash=false"}]
pusher.min.js:8 Pusher :  : ["State changed","connecting -> connected with new socket ID 7769.6572718"]
pusher.min.js:8 Pusher :  : ["Event sent",{"event":"pusher:subscribe","data":{"auth":"","channel":"bid"}}]
pusher.min.js:8 Pusher :  : ["Event recd",{"event":"pusher_internal:subscription_succeeded","channel":"bid","data":{}}]
pusher.min.js:8 [Violation] 'message' handler took 1921ms
laravel.app.js:64177 XHR finished loading: POST "http://localhost:8082/broadcasting/auth".
laravel.app.js:39404 XHR finished loading: GET "http://localhost:8082/notify".
laravel.app.js:39404 XHR finished loading: POST "http://localhost:8082/bids".

bid.blade.php

 <script src="https://js.pusher.com/7.0/pusher.min.js"></script>

    <script type="text/javascript">

        // Enable pusher logging - don't include this in production
        Pusher.logToConsole = true;

        var pusher = new Pusher('64936XXXXXXXXXXXXX', {
               cluster: 'us2',
               encrypted: true
        });

        var channel = pusher.subscribe('bid');

        channel.bind('pusher:subscription_succeeded', function(members) {
            alert('successfully subscribed!');
        });

        channel.bind('pusher:subscription_error', function(data) {
            console.log(data);
        });

       channel.bind('App\Events\BidSent', function(data) { ///<--this never triggers!
           console.log("Data:".data);
       });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).on('click', '.bidbutton', function(event){
            event.preventDefault();

            var auction_id = $("#auction_id").val();
            var auction_bidder_id = $("#auction_bidder_id").val();
            var auction_item_id = $("#auction_item_id").val();
            var bid = $("#bid").val();

            $.ajax({
                url:"/bids",
                type: "POST",
                data:{auction_id:auction_id, auction_bidder_id:auction_bidder_id, auction_item_id:auction_item_id, bid:bid},
            });
        });

    </script>

Creating the event

namespace App\Events;
use App\User;
use App\Auctionbid;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class BidSent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $user;
    public $bid;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(User $user, Auctionbid $bid)
    {
        $this->user = $user;
        $this->bid = $bid;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('bid');
    }
}

Controller:

namespace App\Http\Controllers;

use App\Events\BidSent;
use App\Auctionbid;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class AuctionBidsController extends Controller
{

    public function __construct()
    {
        $this->middleware('auth');
     }

    public function index()
    {
        return view('auction.bid');
    }

    public function getBid()
    {
        return Auctionbid::with('user')->get();
    }

    public function sendBid(Request $request)
    {

          $user = Auth::user();

          $bid = Auctionbid::create([
            'auction_id' => $request->auction_id,
            'auction_bidder_id' => $request->auction_bidder_id,
            'auction_item_id' => $request->auction_item_id,
            'bid' => $request->bid,
            'bid_timestamp' => Now()
           ]);

          broadcast(new BidSent($user, $bid))->toOthers();

          return ['status' => 'Bid Sent!'];

    }

}

channels.php

Broadcast::channel('bid', function ($user) {
    return Auth::check();
});

broadcasting.php

        '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'),
                'useTLS' => true,
            ],
        ],

web.php

    Route::get('bids', 'AuctionBidsController@getBid')->middleware('auth');
    Route::post('bids', 'AuctionBidsController@sendBid')->middleware('auth');

Pusher debug console shows event sent:

https://imgur.com/WBSBcTd