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

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://i.sstatic.net/HbWAI.jpg

{"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!

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.