Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Ligonsker's avatar

Broadcast not received in the browser

I setup a soketi server on 127.0.0.1:6001, it's running and if I go to 127.0.0.1:6001 I see the OK text in the browser.

This is my Laravel configuration:

.env:

BROADCAST_DRIVER=pusher
QUEUE_CONNECTION=sync

PUSHER_APP_ID=mypusherid
PUSHER_APP_KEY=mypusherkey
PUSHER_APP_SECRET=mypushersecret
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

SOKETI_DEBUG=1

bootstrap.js:

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: false
});

app.js:

require('./bootstrap');

Echo.channel('status_update_channel')
.listen('OrderShipmentStatusUpdated', (e) => {
    console.log("broadcast received");
});

broadcasting.php:

    'connections' => [
        
        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'host' => env('PUSHER_HOST', '127.0.0.1'),
                'port' => env('PUSHER_PORT', 6001),
                'scheme' => env('PUSHER_SCHEME', 'http'),
                'encrypted' => false,
                'useTLS' => false,
            ],
        ],    

app.php:

  'providers' => [

        /*
         * Laravel Framework Service Providers...
         */        
        Illuminate\Broadcasting\BroadcastServiceProvider::class,
        // ...

homepage.blade.php: (At the bottom of the body)

<script src="{{ asset('js/app.js') }}"></script>

OrderShipmentStatusUpdated.php event:

class OrderShipmentStatusUpdated implements ShouldBroadcastNow
{
    // ...

    public function broadcastOn()
    {
        Log::debug("Broadcast sent");
        return new Channel('status_update_channel');
    }    

When I go to Tinker and type OrderShipmentStatusUpdated::dispatch();, nothing shows up in the browser. and the Tinker output is:

>>> OrderShipmentStatusUpdated::dispatch();
=> []

**There are no JavaScript errors in the browser

How can I debug it to find the reason?

0 likes
23 replies
Sinnbeck's avatar
  1. Did you set the same key, secret and id in soketi?
  2. What queue driver are you using? If redis or similar, make sure that the queue listener is running
1 like
Ligonsker's avatar

@Sinnbeck queue driver is sync (that's why I also used ShouldBroadcastNow),

Where is the soketi configuration file? I might've forgotten about that

Sinnbeck's avatar

@Ligonsker There isnt one :) You can make one, or use environment variable to set the key. In dev you can use the defaults.

PUSHER_APP_ID=app-id
PUSHER_APP_KEY=app-key
PUSHER_APP_SECRET=app-secret
1 like
Ligonsker's avatar

@Sinnbeck and this is in Laravel's .env right? (and the corresponding ones in broadcasting.php). Can you please check my code above, if that's what you meant? I think it's already done so, maybe it's not correct? (Perhaps I did not use the defaults, but they are matching)

Sinnbeck's avatar

@Ligonsker No soketi does not read your .env file. If you are using docker/sail, you can add them to the env section there :)

Your code looks good. But check the network tab and set it to WS to see if it gets data

1 like
Ligonsker's avatar

@Sinnbeck I'm not using docker/sail, I'm on a simple dev server right now with php artisan serve.

So now I am confused, why do I need to set the following in the .env:

PUSHER_APP_ID=mypusherid
PUSHER_APP_KEY=mypusherkey
PUSHER_APP_SECRET=mypushersecret

Where is it being read from? What uses that for verification?

**Update: My bad, I think I figured that out, the frontend Echo object verifies it, as defined in bootstrap.js

**Update 2 : I checked WS tab and now there's a bit of info :)!

{"event":"pusher:error","data":{"code":4001,"message":"App key mypusherkey not in this cluster. Did you forget to specify the cluster?"}}	
Sinnbeck's avatar

@Ligonsker Exactly. It is needed by both echo and laravels internal broadcasing. Both use it.

And they are sent to soketi

I noticed an error in your js. Remove this (only used if you use the actual pusher service)

    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
1 like
Ligonsker's avatar

@Sinnbeck I removed it but still getting the same error, could this line also be the problem:

broadcaster: 'pusher',

and I need to change it to my own broadcaster?

(I restarted the soketi server and the php server)

Sinnbeck's avatar

@Ligonsker Did you remember to recompile mix? npm run dev

The rest is correct as far as I can see, but the error comes from that line.

1 like
Ligonsker's avatar

@Sinnbeck Yes I recompiled, yet still it expects a cluster from some reason (I even removed the cluster variables from the .env file completely)

Maybe I do need to specify my own local cluster and make it matching just like the app id/secret/key?

Ligonsker's avatar

@Sinnbeck Exactly as above, just removed the cluster variable from the Echo object and the .env file:

bootstrap.js:

import Echo from 'laravel-echo';

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,    
    forceTLS: false
});

.env:

BROADCAST_DRIVER=pusher
QUEUE_CONNECTION=sync

PUSHER_APP_ID=mypusherid
PUSHER_APP_KEY=mypusherkey
PUSHER_APP_SECRET=mypushersecret

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

SOKETI_DEBUG=1

Maybe I do need to specify a cluster that is my own cluster, but then also specify it in another location, not just the Echo object?

Ligonsker's avatar

@Sinnbeck Now my Echo initialization looks like this:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,    
    wsHost: process.env.MIX_PUSHER_HOST,
    wsPort: process.env.MIX_PUSHER_PORT,
    forceTLS: false,
    encrypted: false,
});

and I get a new error: App key mypusherkey does not exist

Sinnbeck's avatar
Sinnbeck
Best Answer
Level 102

@Ligonsker seems you aren't using the defaults I suggested? You have two options

  • use the defaults in env
  • change the values in soketi using environment variables (not env file), or a config file in json

I recommend the first in dev

Soketi has nothing to do with laravel, so it does not read your env file:)

1 like
Ligonsker's avatar

@Sinnbeck Yes! I thought the defaults are something I decide in Laravel's .env, but now I think I understood that, the defaults are saved somewhere in the soketi server and can be changed using the environment variables as seen in soketi docs.

Finally, it is working with both these changes and I get the broadcast!

Thank you, you literally helped me the entire day on this issue

Sinnbeck's avatar

@Ligonsker just went through exactly the same more or less as I set it up with docker locally and on my production server with nginx :)

Happy to have helped

1 like
Ligonsker's avatar

@Sinnbeck 😀this is awesome maybe next time I will be able to help someone who needs it as well

Btw, I saw in the docs of soketi that you can define a .env "placed at the location from where the soketi server command is being run", so if I used the soketi start in the Laravel's project root, then my non-default credentials would've worked? (because so far I just typed soketi start from my home directory since it's globally installed on my Ubuntu)

(Btw do you use .env or the JSON based config file? I think the JSON option looks better)

Also, if someones sees this post in the future, this is my working code:

The Echo object initialization:

import Echo from 'laravel-echo';

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,    
    wsHost: process.env.MIX_PUSHER_HOST,
    wsPort: process.env.MIX_PUSHER_PORT,
    forceTLS: false,
    encrypted: false,
    enabledTransports: ['ws', 'wss'],
});

The relevant .env part:

PUSHER_APP_KEY=app-key
PUSHER_APP_ID=app-id
PUSHER_APP_SECRET=app-secret
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_HOST="${PUSHER_HOST}"
MIX_PUSHER_PORT="${PUSHER_PORT}"
Ligonsker's avatar

@Sinnbeck thank you! Not sure I'll go live anytime soon, in my workplace they still prefer to not use live updates, so I just do it for fun and learning and I do not have a live personal project currently

1 like
Sinnbeck's avatar

@Ligonsker yeah I used pusher at first. I made a chat. But ran into limits and desided to switch. I set live up using ploi. Took only about an hour so not that bad :)

Sinnbeck's avatar

In case you use ploi I will soon be writing a guide on how to set soketi up with a certificate and nginx

overthinking-owl's avatar

Hello OP and everyone. I am currently struggling with similar problem for days now. I only have a few differences with OP's issue. Can you help me from here? laracasts.com/discuss/channels/laravel/laravel-echo-broadcastingauth-error-on-laravel-11-next-typescript

Please or to participate in this conversation.