Laravel Echo not receiving events from self hosted websocket - laravel

Question

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
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?

Answer 1

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