Does using beyondcode/laravel-websockets need pusher APP/KEY? - laravel

Question

To implement chat In Laravel 8/vue 2.6 I added beyondcode/laravel-websockets
and reading some manuals I found that I need to use pusher packages, like
laravel-echo and pusher-js not not pusher App API. So I tried to make as in .env :
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=myId
PUSHER_APP_KEY=myKey
PUSHER_APP_SECRET=mySecret
PUSHER_APP_CLUSTER=eu
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
and in resources/js/bootstrap.js :
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'myKey',
wsHost: 601,
disableStats: true,
forceTLS: false
});
In config/app.php I uncommented line :
App\Providers\BroadcastServiceProvider::class,
In config/broadcasting.php :
<?php
return [
'default' => env('BROADCAST_DRIVER', 'null'),
'connections' => [
'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'),
'encrypted' => true,
'host' => '127.0.0.1',
'port' => 6001,
'scheme' => 'http',
'useTLS' => false,
],
],
'ably' => [
'driver' => 'ably',
'key' => env('ABLY_KEY'),
],
'redis' => [
'driver' => 'redis',
'connection' => 'default',
],
'log' => [
'driver' => 'log',
],
'null' => [
'driver' => 'null',
],
],
];
and in routes/channels.php :
Broadcast::channel('chat', function ($user, $id) {
\Log::info( varDump($user, ' routes/channels.php -1 $user::') ); // I DO NOT SEE THESE log lines
// return (int) $user->id === (int) $id;
return $user;
});
and in config/websockets.php :
<?php
use BeyondCode\LaravelWebSockets\Dashboard\Http\Middleware\Authorize;
return [
'dashboard' => [
'port' => env('LARAVEL_WEBSOCKETS_PORT', 6001),
],
'apps' => [
[
'id' => env('PUSHER_APP_ID'),
'name' => env('APP_NAME'),
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'path' => env('PUSHER_APP_PATH'),
'capacity' => null,
'enable_client_messages' => false,
'enable_statistics' => true,
],
],
'app_provider' => BeyondCode\LaravelWebSockets\Apps\ConfigAppProvider::class,
'allowed_origins' => [
//
],
'max_request_size_in_kb' => 250,
'path' => 'laravel-websockets',
'middleware' => [
'web',
Authorize::class,
],
'statistics' => [
'model' => \BeyondCode\LaravelWebSockets\Statistics\Models\WebSocketsStatisticsEntry::class,
'logger' => BeyondCode\LaravelWebSockets\Statistics\Logger\HttpStatisticsLogger::class,
'interval_in_seconds' => 60,
'delete_statistics_older_than_days' => 60,
'perform_dns_lookup' => false,
],
'ssl' => [
'local_cert' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT', null),
'local_pk' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_PK', null),
'passphrase' => env('LARAVEL_WEBSOCKETS_SSL_PASSPHRASE', null),
],
'channel_manager' => \BeyondCode\LaravelWebSockets\WebSockets\Channels\ChannelManagers\ArrayChannelManager::class,
];
Running server I see :
user#os:app_path$ php artisan websockets:serve
Starting the WebSocket server on port 6001...
New connection opened for app key myKey.
Connection id 447562709.864005085 sending message {"event":"pusher:connection_established","data":"{\"socket_id\":\"447562709.864005085\",\"activity_timeout\":30}"}
...
RunningWebSockets Dashboard at
http://127.0.0.1:8000/laravel-websockets
is connected with success with many messages,
But trying to post new event I see error : https://imgur.com/a/7zJZPyu
{"message":"The given data was invalid.","errors":{"data":["The data must be a valid JSON string."]}}
But in the brwosers console I see error :
app.js:119179 WebSocket connection to 'ws://0.0.2.89/app/myKey?protocol=7&client=js&version=7.0.3&flash=false' failed:
It fails with "myKey". Maybe it some options not to use pusher server key?
Thanks!

Answer 1

You need to ensure the credentials are the same on both the server and the client. You are setting the key value as PUSHER_APP_KEY=myKey in the client. What is the value of the variable used in the config/broadcasting.php file
and config/websockets.php : key' => env('PUSHER_APP_KEY'),.
Source: Make sure to use the same app id, key and secret as in your broadcasting configuration section. Otherwise broadcasting events from Laravel will not work.
You will also need to ensure you use a valid JSON payload from the debug console.
Source: Simply enter the channel, the event name and provide a valid JSON payload to send it to all connected clients in the given channel.