Laravel Websocket works in Firefox, not in Edge - laravel

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

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 Vue websockets running but not working on unbutu server

Hello laravel websocket is working on local but when I deployed on ubuntu server it showing the following error.
http://sockjs.pusher.com/pusher/app/MY_KEY/288/iqbkjca8/xhr_streaming?protocol=7&client=js&version=7.0.6&t=1644557389290&n=3
I checkout a lot of post about this laravel vue websockets issue but that doesn't worked for me...
pusher-js version: "pusher-js": "^7.0.3",
laravel echo version: "laravel-echo": "^1.10.0",
someone mentioned that change pusher version to 5.1.1
I do that but that also doesn't worked for me...
here is 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' => true,
'host' => '127.0.0.1',
'port' => 6001,
'scheme' => 'http'
],
],
here is on vue side
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'thisIsA1xicP0rTaLD3v310p3DByHBilalKhanY0safZai',
wsHost: window.location.hostname,
wsPort: 6001,
forceTLS: false,
disableStats: true,
});
here is console screenshot
here is console screenshot

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

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'
],
],

how to set up your Laravel-WebSockets via SSL

The Problem is Laravel-Websockets and Laravel-Echo combination works fine until you want to secure the connection by using SSL HTTP -> HTTPS
so I installed SSL Certificate on LocalHost (xampp, also I tried that on the live server too and got the same error) and changed the forceTLS: false to forceTLS: true, but I keep getting the Provisional headers are shown error on chrome network tab I even tried Laravel CORS
bootstrap.js be like :
import Echo from 'laravel-echo';
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: true,
wsHost: window.location.hostname,
wsPort: 6001,
wssPort: 6001,
disableStats: true,
devMode : true,
});
broadcast.php be like :
'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' => 'websocket8.test', // I read somewhere it's better to use domain name when we are working with HTTPS
'port' => 6001,
'scheme' => env('PUSHER_SCHEME'),
'curl_options' => [
CURLOPT_SSL_VERIFYHOST => 0,
CURLOPT_SSL_VERIFYPEER => 0,
],
],
],
if you asking for .env file :
PUSHER_APP_ID={a random id}
PUSHER_APP_KEY={a random key}
PUSHER_APP_SECRET={a random secret}
PUSHER_APP_CLUSTER=mt1
PUSHER_SCHEME=http
LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT="E:/Software/Xampp/apache/conf/ssl.crt"
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK="E:/Software/Xampp/apache/conf/ssl.key"
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
chrome network tab error is like this:

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.

Resources