broadcasting using Pusher and Laravel Echo - laravel

Question

I am going through this tutorial Introducing Laravel Echo. Broadcasting thing is working perfecting fine. Whenever I execute the command php artisan chat:message "something". Event get triggered and data stores in database. But moving on to Laravel Echo. I tried a lot but I am going no where. I have put Echo in /js/app.js but in docs it mentioned that /js/bootstrap.js. Since i am following the tutorial, therefore I have put it in /js/app.js Echo is not showing data in log. I am using ubuntu.
Test Event:
class TestEvent implements ShouldBroadcast
{
use InteractsWithSockets, SerializesModels;
public $message;
public $user;
/**
* Create a new event instance.
*
* #return void
*/
public function __construct($user, $message)
{
//
$this->user = $user;
$this->message = $message;
}
/**
* Get the channels the event should broadcast on.
*
* #return Channel|array
*/
public function broadcastOn()
{
return "chat-room";
}
}
Send Chat Command Code:
class SendChatMessage extends Command
{
/**
* The name and signature of the console command.
*
* #var string
*/
protected $signature = 'chat:message {message}';
protected $description = 'Send chat message.';
public function handle()
{
// Fire off an event, just randomly grabbing the first user for now
$user = \App\User::first();
$message = \App\Message::create([
'user_id' => $user->id,
'content' => $this->argument('message')
]);
event(new \App\Events\TestEvent($message, $user));
}
/**
* Create a new command instance.
*
* #return void
*/
public function __construct()
{
parent::__construct();
}
/**
* Execute the console command.
*
* #return mixed
*/
}
Laravel Echo:
import Echo from "laravel-echo"
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'my-key'
});
window.Echo.channel('chat-room')
.listen('TestEvent', (e) => {
console.log(e.user, e.message);
});
one more thing whenever I send an event from pusher. Pusher is able to send it correctly.

Answer 1

Not sure if it is still relevant but might help someone.
I am using Laravel 5.4 and using 'eu' cluster in pusher. Please note that sometimes pusher goes crazy. It starts receiving broadcasted events late. So, I made my event implement ShouldBroadcastNow contract instead of ShouldBroadcast to overcome this problem. I am not using a queue to post events to pusher. Even then sometimes I notice delays in receiving events. Anyways, all well on the broadcasting part.
Now, on the client side, here is the script I am using to listen to events triggered from pusher(in my case private channel)
bootstrap.js (available by default in Laravel 5.4)
import Echo from "laravel-echo"
window.Echo = new Echo({
broadcaster: 'pusher',
key: '<your_pusher_app_key>',
csrfToken: window.Laravel.csrfToken,
cluster:'eu',
encrypted: true });
You should compile the JS if you make change to bootstrap.js else, your changes won't be packed into public folder. Laravel 5.4 uses Laravel Mix and the command to compile is "npm run dev"
In My blade template:
window.Echo.private('<channel_name_without_prefixing_private_keyword>')
.listen("<Just the event class name and not fully qualified name>", function(e){
console.log(e);
});
This worked for me. Further, ensure that, BroadcastServiceProvider is uncommented in config\app.php file. It's not enabled by default.
In routes/channels.php
Broadcast::channel('<channel_name_without_private_prefix>', function ($user) {
//Auth check
return true;
});