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