laravelwebsocketpusherlaravel-echo

Laravel Echo not receiving events from self hosted websocket


I have a Laravel application, running through docker-compose, and am trying to setup a Soketi self hosted Websocket, that is also run as a docker container

Everything is, as far as I can tell, running correctly. The websocker is running, and is receiving a connection from my app, subscribing to channels and also receiving events.

Only thing that is not working is on the frontend, where I am utilising the Laravel Echo library to communicate with the Websocket, is not recieving the events that I am broadcasting to the websocket

config/broadcasting.php

'pusher' => [
        'driver' => 'pusher',
        'key' =>  'broadcasting',
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => 'broadcasting',
        'options' => [
            'cluster' => 'default',
            'encrypted' => true,
            'host' => 'soketi',
            'port' => 6001,
            'scheme' => 'http',
            'useTLS' => false,
        ],
    ],

bootstrap.js

import Echo from 'laravel-echo'

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

window.laravelEcho = new Echo({
    broadcaster: 'pusher',
    key: 'broadcasting',
    cluster: 'default',
    wsHost: window.location.hostname,
    wssHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001,
    forceTLS: false,
    disableStats: true,
    enabledTransports: ['ws', 'wss'],
    encrypted: true,
    enableLogging: true,
});

window.laravelEcho.channel(`klinik`)
    .listen('.test', (e) => {
        alert('works');
    });

The event

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

    public function broadcastOn()
    {
        return new Channel('klinik');
    }

    public function broadcastAs()
    {
        return 'test';
    }
}

The event is simply being dispatched via a console command

public function handle()
{
    TestEvent::dispatch();
}

Upon page load, the websocket is loaded and subscribes to the klinik channel, as shown in the logs from docker

   [Tue Jan 31 2023 10:22:08 GMT+0000 (Coordinated Universal Time)] 👨‍🔬 New connection:   

{

  ws: uWS.WebSocket { ip: '172.24.0.1', ip2: '', appKey: 'broadcasting' }

}

   [Tue Jan 31 2023 10:22:08 GMT+0000 (Coordinated Universal Time)] ✈ Sent message to client:   

{

  ws: uWS.WebSocket {

    ip: '172.24.0.1',

    ip2: '',

    appKey: 'broadcasting',

    sendJson: [Function (anonymous)],

    id: '435260853.7865190267',

    subscribedChannels: Set(0) {},

    presence: Map(0) {},

    app: App {

      initialApp: [Object],

      server: [Server],

      enableUserAuthentication: false,

      hasClientEventWebhooks: false,

      hasChannelOccupiedWebhooks: false,

      hasChannelVacatedWebhooks: false,

      hasMemberAddedWebhooks: false,

      hasMemberRemovedWebhooks: false,

      hasCacheMissedWebhooks: false,

      id: 'broadcasting',

      key: 'broadcasting',

      secret: 'app-secret',

      maxConnections: -1,

      enableClientMessages: false,

      enabled: true,

      maxClientEventsPerSecond: -1,

      maxPresenceMembersPerChannel: 100,

      maxPresenceMemberSizeInKb: 2,

      maxChannelNameLength: 200,

      maxEventChannelsAtOnce: 100,

      maxEventNameLength: 200,

      maxEventPayloadInKb: 100,

      maxEventBatchSize: 10

    },

    timeout: Timeout {

      _idleTimeout: 120000,

      _idlePrev: [TimersList],

      _idleNext: [TimersList],

      _idleStart: 1682165,

      _onTimeout: [Function (anonymous)],

      _timerArgs: undefined,

      _repeat: null,

      _destroyed: false,

      [Symbol(refed)]: true,

      [Symbol(kHasPrimitive)]: false,

      [Symbol(asyncId)]: 3549,

      [Symbol(triggerId)]: 0

    }

  },

  data: {

    event: 'pusher:connection_established',

    data: '{"socket_id":"435260853.7865190267","activity_timeout":30}'

  }

}

   [Tue Jan 31 2023 10:22:09 GMT+0000 (Coordinated Universal Time)] ⚡ New message received:   

{

  message: { event: 'pusher:subscribe', data: { auth: '', channel: 'klinik' } },

  isBinary: false

}

   [Tue Jan 31 2023 10:22:09 GMT+0000 (Coordinated Universal Time)] ✈ Sent message to client:   

{

  ws: uWS.WebSocket {

    ip: '172.24.0.1',

    ip2: '',

    appKey: 'broadcasting',

    sendJson: [Function (anonymous)],

    id: '435260853.7865190267',

    subscribedChannels: Set(1) { 'klinik' },

    presence: Map(0) {},

    app: App {

      initialApp: [Object],

      server: [Server],

      enableUserAuthentication: false,

      hasClientEventWebhooks: false,

      hasChannelOccupiedWebhooks: false,

      hasChannelVacatedWebhooks: false,

      hasMemberAddedWebhooks: false,

      hasMemberRemovedWebhooks: false,

      hasCacheMissedWebhooks: false,

      id: 'broadcasting',

      key: 'broadcasting',

      secret: 'app-secret',

      maxConnections: -1,

      enableClientMessages: false,

      enabled: true,

      maxClientEventsPerSecond: -1,

      maxPresenceMembersPerChannel: 100,

      maxPresenceMemberSizeInKb: 2,

      maxChannelNameLength: 200,

      maxEventChannelsAtOnce: 100,

      maxEventNameLength: 200,

      maxEventPayloadInKb: 100,

      maxEventBatchSize: 10

    },

    timeout: Timeout {

      _idleTimeout: 120000,

      _idlePrev: [TimersList],

      _idleNext: [TimersList],

      _idleStart: 1682550,

      _onTimeout: [Function (anonymous)],

      _timerArgs: undefined,

      _repeat: null,

      _destroyed: false,

      [Symbol(refed)]: true,

      [Symbol(kHasPrimitive)]: false,

      [Symbol(asyncId)]: 3553,

      [Symbol(triggerId)]: 0

    }

  },

  data: {

    event: 'pusher_internal:subscription_succeeded',

    channel: 'klinik'

  }

}

And this can also verified in the network tab. Echo is also pinging the websocket without issue

enter image description here

pusher/pusher-php-server: v. 7.2
laravel-echo: v. 1.15
pusher-js: v. 8.0.1

I recently tested this, with all the same settings, but using the Pusher API, and it worked like a charm

Any idea what I am doing wrong?


Solution

  • Solution was to send with all relevant environment variables to the docker image. Socketi uses default values for app_id, app_key and app_secret. I had specified the id and key, but not the secret, and adding that to the container fixed the issue.

    My docker-compose.yml looks like this now

      soketi:
        image: 'quay.io/soketi/soketi:latest-16-alpine'
        environment:
          SOKETI_DEBUG: '1'
          SOKETI_METRICS_SERVER_PORT: '9601'
          SOKETI_DEFAULT_APP_ID: 'broadcasting'
          SOKETI_DEFAULT_APP_KEY: 'broadcasting'
          SOKETI_DEFAULT_APP_SECRET: 'mysecret'
        ports:
          - '6001:6001'
          - '9601:9601'
        networks:
          - vetisearch