CODEWITHSUNDEEP
phplaravelvue.jspusherlaravel-echo
JaChNo
JaChNo

Reputation: 1563

Laravel Echo vuejs not hearing pusher event

I am using vuejs and laravel echo to send and receive events, I can see my client side code registering in the pusher development console. but when i send an event either via the console or from laravel.

It is not being heard by the client code.

Vuejs Component

<template>
    <card class="flex flex-col items-center justify-center">
        <div class="px-3 py-3">
            <h1 class="text-center text-3xl text-80 font-light">Test Nova Card</h1>
        </div>
    </card>
</template>

<script>
export default {
    props: ['card'],

    mounted() {
        console.log('mounted');
        this.listen();

    },
    methods:
        {
            listen: function () {
                console.log('Listen Method')
                Echo.channel('test')
                    .listen('TestEvent', (e) => {
                        console.log(e);
                    });
            }
        }
}
</script>

Event being fired 

namespace Devtropolis\NovaEnvoyerStatus\events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Support\Facades\Log;

class TestEvent implements ShouldBroadcast
{
    use InteractsWithSockets, SerializesModels;

    public $chatMessage;


    /**
     * Create a new event instance.
     *
     * @param $chatMessage
     * @param $user
     */
    public function __construct($chatMessage)
    {
        Log::info('message fired');
        $this->chatMessage = $chatMessage;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('test');

    }
}

Event being received in pusher console

Event being received in pusher console

Client registering in the console

enter image description here

and this is the code firing the event

 Route::get('/endpoint', function (Request $request) {

     Log::info('Starting event');
     $message = array([
         'user_id' => 1,
         'message' => 'message'
     ]);

     event(new TestEvent($message));

     return 'dave';
 });

Upvotes: 1

Views: 1369

Answers (2)

kacem
kacem

Reputation: 31

Well, I was exactly on the same case and here how I solve it out :

1 - First Add this line in your app.js so you can see Pusher errors in your console

Pusher.log = function (message) { window.console.log(message); }

2- Then (In my case, your's might be different !) When the event is received I had this message in my console saying

Pusher : Event recd : {"event":"Event_name","channel":"channel_name","data":[]} Pusher : No callbacks on channel_name for Event_name

So now it's obvious that the problem is coming from the way I'm handling the received event. After some googling I found that it's related to "Echo" and specially to namespacing. [more can be found at this feed on Github ].

So the solution is just to prefix your event with a "." in your Vue component and it will work as a charm

 methods:
    {
        listen: function () {
            console.log('Listen Method')
            Echo.channel('test')
                .listen('.TestEvent', (e) => {
                    console.log(e);
                });
        }
    }

Upvotes: 2

Sambit Mohapatra
Sambit Mohapatra

Reputation: 153

add this to config/broadcasting.php

'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'encrypted' => true,
            'curl_options' => [
                CURLOPT_SSL_VERIFYHOST => 0,
                CURLOPT_SSL_VERIFYPEER => 0,]
             ],

Upvotes: -1

Related Questions