I am using Pusher in my Web Application. My backend is built with Laravel & Frontend is built with Angular 10. Everything works perfectly in my local machine. But in the server it is not working. The client is failing to connect stating the following error:
Pusher : : [{"type":"WebSocketError","error":{"type":"PusherError","data":{"code":4001,"message":"Could not find app key `4895a6a5e4626a3afdfb`."}}}]
In my local machine, everything is working properly. Both in the angular and the laravel project, I am using the same app key. And the keys are correctly collected from the pusher website.
Here is my Client Connecting Code:
constructor() {
console.log(window.location.hostname);
this.pusher = new Pusher(environment.pusher.key, {
cluster: environment.pusher.cluster,
wsHost: '162.214.125.121',
// wsHost: '127.0.0.1',
wsPort: 6001,
encrypted: false,
forceTLS: false,
});
this.channel = this.pusher.subscribe('draw_options');
Pusher.log = (msg) => {
console.log(msg);
};
}
export const environment = {
production: false,
pusher: {
key: '4895a6a5e4626a3afdfb',
cluster: 'mt1',
}
};
And in my laravel env:
PUSHER_APP_ID=1069575
PUSHER_APP_KEY=4895a6a5e4626a3afdfb
PUSHER_APP_SECRET=__its_correct_as_well__
PUSHER_APP_CLUSTER=mt1
in my 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'),
'useTLS' => false,
'encrypted' => false,
// 'host' => '162.214.125.121',
'host' => '127.0.0.1',
'port' => 6001,
'scheme' => 'http'
],
],
everything is working properly in the local machine. But in server this fails If you go to the following url, you will see, socket is getting connecting by laravel. http://api.etakweet.com/laravel-websockets
I have also noticed, no logs were found when event is getting broadcasted by laravel project.