WebSocket Connection to 'wss://mydomain' - Failed (wss) - laravel

I'm following this package intructions: https://beyondco.de/docs/laravel-websockets/getting-started/introduction
I'm using laravel forge to deploy and projects works fine in localhost but doesn't work after deploying to laravel forge
Here is my code
websocket.php
[
'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,
],
],
broadcasting.php
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
'cluster' => env('PUSHER_APP_CLUSTER'),
'useTLS' => true,
'encrypted' => true,
'host' => '127.0.0.1',
'port' => 6001,
'scheme' => 'https'
],
],
.env
PUSHER_APP_KEY=anyKey
PUSHER_APP_SECRET=anySecret
PUSHER_APP_CLUSTER=mt1
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,
wsPort: 6001,
wssPort: 6001,
enabledTransports: ['ws', 'wss'],
wsHost: window.location.hostname,
});
broadcasting route
Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
return (int) $user->id === (int) $id;
});
Broadcast::channel('user-{user_id}-exe', function($user, $user_id) {
return $user->id == $user_id;
});
composer.json
"beyondcode/laravel-websockets": "^1.12",
"pusher/pusher-php-server": "^5.0",
What am I doing wrong?
maybe i think this issue for "wss"

It was solved for me
.env
BROADCAST_DRIVER=pusher
PUSHER_APP_ID="test"
PUSHER_APP_KEY="test"
PUSHER_APP_SECRET="test"
PUSHER_APP_CLUSTER="test"
at the end
php artisan optimize:clear

'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'),
'host' => '127.0.0.1',
'port' => env('LARAVEL_WEBSOCKETS_PORT', 6001),
'useTLS' => true,
'scheme' => 'http',
'curl_options' => [
CURLOPT_SSL_VERIFYHOST => 0,
CURLOPT_SSL_VERIFYPEER => 0,
]
],
],

In broadcasting.php file comment useTLS
'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'),
// 'useTLS' => true,
'host' => '127.0.0.1',
'port' => env('LARAVEL_WEBSOCKETS_PORT', 6001),
'scheme' => 'http'
],
],

Related

laravel broadcasting with pusher Error : (Uncaught Options object must provide a cluster)

I've been trying to set up my a broadcast system with pusher and followed the documentation step by step. when i start the server i get an error
"Uncaught Options object must provide a cluster"
on my console.
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
'host' => env('PUSHER_HOST', 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
'port' => env('PUSHER_PORT', 443),
'scheme' => env('PUSHER_SCHEME', 'https'),
'encrypted' => true,
'useTLS' => env('PUSHER_SCHEME', 'https') === 'https',
],
'client_options' => [
// Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
],
],
so I checked my options object in the broadcast config and i noticed my config doesn't have a cluster option so i added it manually, but still have that error.
.env
PUSHER_APP_ID=1529400
PUSHER_APP_KEY=521a8d3a78ab50e2c14d
PUSHER_APP_SECRET=ce93e12b5f74f8280624
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1
e here
broadcast.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', 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
'port' => env('PUSHER_PORT', 443),
'scheme' => env('PUSHER_SCHEME', 'https'),
'encrypted' => true,
'useTLS' => env('PUSHER_SCHEME', 'https') === 'https',
'cluster' => env('PUSHER_APP_CLUSTER'),
],
'client_options' => [
// Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
],
],
I encountered the same error and solved it by adding cluster to the parameters that are passed in the new Echo instance:
bootstrap.js:
added cluster:import.meta.env.VITE_PUSHER_APP_CLUSTER,
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;
window.Echo = new Echo({
broadcaster: 'pusher',
key: import.meta.env.VITE_PUSHER_APP_KEY,
wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
enabledTransports: ['ws', 'wss'],
disableStats: true,
cluster:import.meta.env.VITE_PUSHER_APP_CLUSTER,//added this line
});
Also, make sure that it is added in the broadcasting.php in options array:
'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'
],
'client_options' => [
// Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
],
],
...
EDIT
I realized that with version 8.0.0, the cluster option is mandatory. Another problem is that if you are using the Laravel-WebSockets package as a drop-in replacement for the pusher, it would be a problem because, in production, pusher connects to that cluster you provided in the options instead. So what I did is that I uninstalled pusher-js version 8.0.0 and installed pusher version 7.6 which does not require a cluster: npm i pusher-js#7.6.0
Joshua,
I ran into the same issue.
The pusher folks now make it mandatory: https://github.com/pusher/pusher-js/releases
I'm rolling my code back to previous version of pusher, hoping that works.

Laravel Websocket works in Firefox, not in Edge

I have installed a laravel application on a public webserver.
Apache has been configured with a Let's Encrypt certificate with certbot and the website is available in https.
Using the mydomain.it/laravel-websockets link I checked that everything is working.
Using firefox the socket connects, but using Edge it does not
I need to use websockets so I configured as follows:
bootstrap.js
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
wsHost: window.location.hostname,
wsPort: 6000,
wssPort: 6001,
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
forceTLS: true,
encrypted: true,
enabledTransports: ['wss']
});
broadcasting.php
'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' => 'mydomain.it',
'port' => 6001,
'scheme' => 'https',
'curl_options' => [
CURLOPT_SSL_VERIFYHOST => 0,
CURLOPT_SSL_VERIFYPEER => 0,
]
],
],
websockets.php
'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,
'encrypted' => true,
'verify_peer' => false,
],
],
.env
PUSHER_APP_ID=123456
PUSHER_APP_KEY=myappkey
PUSHER_APP_SECRET=mysecret
PUSHER_APP_CLUSTER=mt1
LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT=/etc/letsencrypt/live/mydomain.it/fullchain.pem
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK=/etc/letsencrypt/live/mydomain.it/privkey.pem

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://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!
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.

beyondcode laravel-websocket not connecting on server

I am trying to build a chat app and for that using beyondcode/laravel-websockets. When I used it in local it was working great but on the server can not make it run.
My Configurations are as follows
My Echo Settings (Js/Bootstrap.js)
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: false,
wsHost: window.location.hostname,
wsPort: 6001,
});
My Pusher Settings (Broadcasting.php)
'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' => false,
'host' => env('WEBSOCKET_HOST'),
'port' => env('WEBSOCKET_PORT'),
'scheme' => env('WEBSSOCKET_SCHEME'),
],
],
My Webscoket Settings (Websockets.php)
'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' => true,
'enable_statistics' => true,
],
],
My .env Configuration
PUSHER_APP_ID=MyDefaultIdForURMENU
PUSHER_APP_KEY=1234567
PUSHER_APP_SECRET=MyDefaultSecretForURMENU
PUSHER_APP_CLUSTER=mt1
WEBSOCKET_HOST = 127.0.0.1
WEBSOCKET_PORT = 6001
WEBSSOCKET_SCHEME= http
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
Now when I run websocket either directly in ssh or using setsid using command
php artisan websockets:serve
OR
setsid php artisan websockets:serve
it shows
Starting the WebSocket server on port 6001...
But the console log is showing either
WebSocket connection to 'wss://mydomain.com/app/1234567?protocol=7&client=js&version=5.0.3&flash=false' failed: Error during WebSocket handshake: Unexpected response code: 404
OR Sometimes
WebSocket connection to 'ws://mydomain.com:6001/app/1234567?protocol=7&client=js&version=5.0.3&flash=false' failed: WebSocket is closed before the connection is established.
Please guide me what's I am doing wrong
Hi there guys I was having this problem and I searched the internet top to bottom and finally did the following to make it work on VPS
1- Config/broadcasting.php
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
'useTLS' => true,
'encrypted' => true,
'host' => '127.0.0.1',
'port' => 6001,
'scheme' => 'https',
'curl_options' => [
CURLOPT_SSL_VERIFYHOST => 0,
CURLOPT_SSL_VERIFYPEER => 0,
]
]
]
2- Resources/js/bootstrap.js
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
forceTLS: true,
encrypted: true,
wsHost: window.location.hostname,
wsPort: 6001,
wssPort: 6001,
enabledTransports: ['ws','wss'],
disableStats: true
});
3- Config/websockets.php
'ssl' => [
/*
* Path to local certificate file on filesystem. It must be a PEM encoded file which
* contains your certificate and private key. It can optionally contain the
* certificate chain of issuers. The private key also may be contained
* in a separate file specified by local_pk.
*/
'local_cert' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT', null),
/*
* Path to local private key file on filesystem in case of separate files for
* certificate (local_cert) and private key.
*/
'local_pk' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_PK', null),
/*
* Passphrase for your local_cert file.
*/
'passphrase' => null,
'verify_peer' => false
],
4- .env
LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT="../ssl/certs/filename.crt"
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK="../ssl/keys/filename.key"
Step 3 and 4 are also important like 1 and 2 you need to provide .crt and .key files paths. The path can different for different servers you can move up to public_html folder in your cpanel file manager and find ssl folder for these files.

.Illuminate\Broadcasting\BroadcastException in laravel 6

I am trying to send a broadcast to pusher 6.18.8 in laravel 6 but i am getting the following error
Illuminate\Broadcasting\BroadcastException
enter image description here
my pusher config
'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' => false,
// 'useTLS' => true,
'host' => '127.0.0.1',
'port' => 60001,
'scheme' => 'http'
],
'curl_options' => [
CURLOPT_SSL_VERIFYHOST => 0,
CURLOPT_SSL_VERIFYPEER => 0,
],
],
env
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:*********************
APP_DEBUG=true
APP_URL=http://
DB_HOST=localhost
LOG_CHANNEL=stack
DB_CONNECTION=mysql
I have cleared my config and cache so many times but I am still getting the same error.
Assuming you have also correctly set the environment variables for:
PUSHER_APP_KEY
PUSHER_APP_SECRET
PUSHER_APP_ID
PUSHER_APP_CLUSTER
I believe the issue is related to setting the following:
'host' => '127.0.0.1',
'port' => 60001,
'scheme' => 'http'
This will override the default host and port being used by the Pusher driver. The Pusher package will resolve this itself using the PUSHER_APP_CLUSTER.
If you remove the host/port/scheme options and try again this should work.
You can also check this against the Laravel documentation: https://laravel.com/docs/5.8/broadcasting#driver-prerequisites

Resources