Laravel broadcasting to soketi / listen with pusher-js

It looks like you're trying to set up a client to listen to events broadcasted by Laravel using soketi and the Pusher-js library. Your code seems mostly correct, but there are a few things you might want to check or adjust:

1. Ensure that the wsHost and wsPort match the soketi server's host and port that you have configured in your docker-compose.yml or wherever you are running the soketi server.

2. The cluster option is specific to Pusher's hosted service and is not necessary when you are using soketi. You can remove the cluster option from your configuration.

3. Make sure that the event name you are binding to ('message-received') matches the event name that is being broadcasted from your Laravel application.

4. Ensure that the channel name 'book-message' is the same as the one you are broadcasting to in your Laravel application. Remember that if it's a private channel, it should be prefixed with private- and for presence channels, presence-.

5. If you are using a private or presence channel, make sure you have set up the necessary authentication endpoint in your Laravel application and that the client is authenticated properly.

6. Check the browser console for any errors that might indicate what's going wrong.

Here's a revised version of your code with the cluster option removed:

import Pusher from 'pusher-js';
window.Pusher = Pusher;

let client = new Pusher('sdfgsdfg', {
    wsHost: '127.0.0.1',
    wsPort: 6001,
    forceTLS: false,
    encrypted: false,
    disableStats: true,
    enabledTransports: ['ws', 'wss'] // 'wss' is only needed if you are using TLS
});

const channel = client.subscribe('book-message');

channel.bind('message-received', (data) => {
    console.log('Message received:', data);
});

Make sure to replace 'sdfgsdfg' with your actual Pusher app key. If you are still facing issues, you might want to check the network tab in your browser's developer tools to see if there are any failed WebSocket connections or other network issues.

Lastly, ensure that your Laravel event broadcasting is set up correctly. Your event should implement the ShouldBroadcast interface, and the broadcastOn method should return the correct channel instance.

Here's an example Laravel event:

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

class BookMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

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

    public function broadcastOn()
    {
        return new Channel('book-message');
    }

    public function broadcastAs()
    {
        return 'message-received';
    }
}

Remember to dispatch this event in your application where you want the message to be broadcasted. If you've checked all these points and it's still not working, please provide more details about the error or behavior you're observing.