php - Laravel Broadcast in not working with Pusher
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. Laravel Event is not getting broadcasted.
This is my Broadcasting Event
class DrawOptionsChanged implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $options;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct($options)
{
$this->options = $options;
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new Channel('draw_options');
}
}
Calling this with the following code:
event(new DrawOptionsChanged($data));
Everything workes perfectly in my local machine. But in the server, both client and laravel-webSockets url is getting connected but events are not received in any of them.
in 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'
],
],
I have noticed, events are getting broadcasted by the websocket url and client is also receiving that... But from codes they are not getting broadcasted... Everything works perfectly in local machine...
http://api.etakweet.com/laravel-websockets
Client Connection Codes
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);
};
Client Binding Codes
this.pusherService.channel.bind('pusher:subscription_succeeded', function(members) {
console.log('successfully subscribed!');
});
this.pusherService.channel.bind('App\\Events\\DrawOptionsChanged', res => {
const data = res.options
this.major = data.major
this.degree = data.degree
this.gender = data.gender
if (data.generate == 1) {
this.getResult()
}
});
Broadcasting Code:
public function optionChanged(Request $request)
{
$major = $request->input('major');
$degree = $request->input('degree');
$gender = $request->input('gender');
$draw = $request->input('draw');
$generate = $request->input('generate');
$data = [
'major' => $major,
'draw' => $draw,
'gender' => $gender,
'degree' => $degree,
'generate' => $generate,
];
$drawData = Draw::where('id', $draw)->first();
$drawData->current_gender = $gender;
$drawData->current_qualification_type = $degree;
$drawData->current_major = $major;
$drawData->save();
try {
event(new DrawOptionsChanged($data));
} catch (\Exception $exception) {
$exception->getMessage();
}
return response()->json([
'message' => 'success'
]);
}
Answer
Solution:
try this laravel echo https://www.npmjs.com/package/laravel-echo
Echo.channel("draw_options")
.listen("DrawOptionsChanged ",res => {
const data = res.options
this.major = data.major
this.degree = data.degree
this.gender = data.gender
if (data.generate == 1) {
this.getResult()
}
}
);
Source