I have a laravel application with websockets. I already setup all the needs for the websocket and pusher config. But whenever I test my broadcast channel I got
app.js:58283 WebSocket connection to 'wss://127.0.0.1/app/644a4ac1988060882370?protocol=7&client=js&version=6.0.2&flash=false' failed: Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID
When i do some reload. sometimes i get
app.js:55791 WebSocket connection to 'wss://127.0.0.1/app/644a4ac1988060882370?protocol=7&client=js&version=6.0.2&flash=false' failed: WebSocket is closed before the connection is established.
Here are my configs.
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', ], ],
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, 'verify_peer' => false, ], ],
bootstrap.js
import Echo from "laravel-echo" window.Pusher = require('pusher-js'); window.Echo = new Echo({ broadcaster: 'pusher', key: 'xxxxxxxxxxxxxxx', wsHost: window.location.hostname, wsPort: 6001, disableStats: true, // enabledTransports: ['ws', 'wss'] }); window.Echo.channel('Inventory').listen('InventoryEvent',(e)=>{ console.log(e) })
web.php
Route::get('/', function () { broadcast(new InventoryEvent('somedata')); return view('welcome'); });
InventoryEvent
namespace AppEvents; use IlluminateBroadcastingChannel; use IlluminateBroadcastingInteractsWithSockets; use IlluminateBroadcastingPresenceChannel; use IlluminateBroadcastingPrivateChannel; use IlluminateContractsBroadcastingShouldBroadcast; use IlluminateFoundationEventsDispatchable; use IlluminateQueueSerializesModels; class InventoryEvent implements ShouldBroadcast { use Dispatchable, InteractsWithSockets, SerializesModels; public $somedata; /** * Create a new event instance. * * @return void */ public function __construct($somedata) { $this->somedata = $somedata; } /** * Get the channels the event should broadcast on. * * @return IlluminateBroadcastingChannel|array */ public function broadcastOn() { return new Channel('Inventory'); } }
package.json
"devDependencies": { "axios": "^0.19", "bootstrap": "^4.0.0", "cross-env": "^7.0", "jquery": "^3.2", "laravel-mix": "^5.0.1", "lodash": "^4.17.13", "popper.js": "^1.12", "resolve-url-loader": "2.3.1", "sass": "^1.20.1", "sass-loader": "7.*", "vue": "^2.5.17", "vue-template-compiler": "^2.6.10" }, "dependencies": { "admin-lte": "^3.0.4", "fusioncharts": "^3.15.1-sr.1", "laravel-echo": "^1.7.0", "pusher-js": "^6.0.2", "sweetalert2": "^9.10.9", "vue-fusioncharts": "^3.0.4", "vue-moment": "^4.1.0", "vue-router": "^3.1.6", "vue-select": "^3.9.5" }
I already setup the env for my pusher credentials. Do i need to config something in my pusher in order for this to work? I got another project with the same setup but it works but this one is not.
Advertisement
Answer
Try downgrading your pusher-js
package to version 4.3.1
. Thats what I am using and it works well. Latest version always seems to listen on secure wss
instead of the non-secure ws
.