kendrick's avatar

Echo.listen is not working/ logging

I am trying to listen/ console.log (to) a Broadcast Event.

Connection to pusher is provided, the Event is also pushed to the debug console. But I can't listen to the Event.

Somehow Echo is not working, or I am missing something.

What could it be? Where is the problem on the frontend?

This is my setup

npm install --save laravel-echo pusher-js

bootstrap.js

import Echo from 'laravel-echo'
import Pusher from 'pusher-js'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'key', // key is inserted
    cluster: 'eu',
    encrypted: true 
    
});

window.Echo.channel('channeltest')
    .listen('BroadcastTest', (e) => {
        console.log(e);
});

HomeController

public function index(){ 

        BroadcastTest::dispatch();

    return view ('home');
}

BroadcastTest.php

public function broadcastOn()
    {
        return new Channel('channeltest'); 
    }

Is the laravel-echo-server a requirement?

 npm install -g laravel-echo-server

How can I get an insight on logs, or how could I get behind the problem, with respect to Echo?

0 likes
25 replies
D9705996's avatar

You don't need to install laravel-echoserver if you are using pusher (This is for hosting your own websocket server)

DO you see any errors in the console tab of your developer tools?

Could you share you full event code.

kendrick's avatar

Thank you @d9705996

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class BroadcastTest implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

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

Not quite sure. Using sublime text. Within the Chrome console, no errors will be triggered.

D9705996's avatar

On the face of it everything looks ok if you are receiving the events in the pusher console

Do the values in you echo setup match you .env?

    cluster: 'eu',
    encrypted: true 

Can you run php artisan config:clear and retry just in case there is any issues with a cached config. Last thing to check is are the system clocks on your server and browser correct as this can cause issue with SSL for encryption?

kendrick's avatar

Values are matching. Config is cleared.

@d9705996

sudo date on server 
15:36:00 UTC 2018

on browser = 16:41 

and unfortunately

sudo ntpdate ntp.ubuntu.com

couldn't make it equal.

kendrick's avatar

Thank you @d9705996

Already tried to turn encrypted to false (within broadcasting.php and bootstrap.js) + config clear, but somehow it doesn't work either.

Where could I check on the timezone settings of my server? I am using a homestead/virtualbox setup for local dev.?

kendrick's avatar

I could change the local server timezone with

sudo dpkg-reconfigure tzdata

Now it is the same as my browser time.

But the pusher Events are being triggered, still 1 hour behind. As the eu cluster follows the GMT O timezone, but mine is +1.

Update:

I changed local timezone to the GMT 0 time, so now the server timezone, browser and pusher timezone are all the same.

But somehow it won't listen to the Event. @d9705996

How can I check why it is not listening?

D9705996's avatar

I would set you time zone to UTC. I think though the problem is that your client/server are about 5 minutes out even if the timezones are correct.

Can you try manually change the date using date +s ...

kendrick's avatar

By manually you mean on the server? @d9705996

ssh (server) is now UTC

app.php UTC

pusher (eu) UTC

D9705996's avatar

Yes, makes sure you server has the correct date and time, ideally via NTP and that your client also has the same date/time (a few seconds difference won't matter).

Not sure exactly in steps for Ubuntu as a red hat guy but a quick Google should help.

1 like
kendrick's avatar

Thank you for coming back.

The Server timezone change worked. Client-wise I would change my local (mac) timezone, maybe restart the system and then try it again? @d9705996

D9705996's avatar

Glad you got your issue resolved. If you could mark tgevthread as solved, just in case others have the same problem

1 like
kendrick's avatar

The timezone change worked, but it still doesn't listen/ log (to) any Events on the console. @d9705996

Basically for Echo to work, Server, Browser (Mac), and Pusher need to represent the same timezone, correct?

I am still trying to get it working...

kendrick's avatar

@d9705996

If I test:

var channel = Echo.connector.subscribe('chat');

I get an error :

VM352:1 Uncaught ReferenceError: Echo is not defined
    at <anonymous>:1:15

And

channel.bind('msg', function(data) {console.log(data);})

results in

VM450:1 Uncaught TypeError: Cannot read property 'bind' of undefined
    at <anonymous>:1:9

D9705996's avatar

Have you run npm run dev to generate your front-end assets in the public directory and ensured that you have included a script tag at the bottom of your view to load you JavaScript

<script src="/js/app.js"></script>

Are you also trying to use the same route to dispatch the event that is showing the home view? If so the event may be getting dispatched before the page loads to listen for it. I would create two GET routes and hook up to two function e.g.

public function index(){ 
   return view ('home');
}

public function event() {
       BroadcastTest::dispatch();
}

Visit / to load the view and then every time you hit event you should see the event in the console.

kendrick's avatar

Thank you for your great patience @d9705996

Everything is in the same time manner now. The server, my system, Pusher, and the browser, all UTC. But it just won't log anything to the console.

<div id="app"> 

<div class="container-fluid"> 
    @yield('content') 
</div>  
             
</div>
        <footer>
            @include('templates.user.footer')
        </footer> 
        <script src="/js/app.js"></script>


const app = new Vue({
    
    el: '#app',

    mounted(){
          this.listen();
    }

});

I run npm run devand the script is also included.

This night, I also got the Timestamp expired, 600ms Error.

How should I continue? I really need to get behind it. Should I try to install a echo-server? What would you recommend @d9705996 ?

D9705996's avatar

The timestamp error you are getting is related to this Pusher Knowledge Base article.

Pusher should be easier as it should just work but if you want to try laravel-echo-server you could follow this tutorial

https://medium.com/@dennissmink/laravel-echo-server-how-to-24d5778ece8b

Just note that this is for Laravel 5.6 so you will need to make sure you amend for 5.7 (The only difference I think is changing QUEUE_DRIVER to QUEUE_CONNECTION).

Just remember that everytime you change your code you need to restart the queue worker and I highly recommend using [horizon] (https://laravel.com/docs/5.7/horizon)

kendrick's avatar

Thank you @d9705996

I will try to get it working. Unfortunately, there is no transparent way to get behind it, where the problem could be, with Echo.

kendrick's avatar

Sorry for coming back late @d9705996

I summed up the issue I am facing.

Pusher is still receiving Events, and subscribing to Channels. So this is working. I also contacted Pusher, and they think it is not a timezone problem.

But Echo is not receiving those Events, and unfortunately nothing will be updated in Real-time.

I am using a vagrant/homestead VirtualBox setup:

vagrant up sets up my local development server, not php artisan serve
My local timezone:
Di 29 Nov 2018 13:55:13 CET

cd - Homestead -> vagrant up
sudo date: Di 29 Nov 2018 13:55:13 CET

vagrant ssh -> cd app
sudo date: Di 29 Nov 2018 12:55:13 UTC
(configured via sudo dpkg-reconfigure tzdata, to fit the Pusher 'eu' Cluster)

Pusher is receiving Events (UTC)

App\Events\BroadcastTest :: 12:55:13

The echo Library, I guess is working. If I e.g. trigger on Chrome:

window.Echo.join('Chat')

It returns:

PusherPresenceChannel {name: "presence-Chat", pusher: Pusher, options: {…}, eventFormatter: EventFormatter, subscription: PresenceChannel}

So in Pusher I am basically receiving Events in the future, this must be the reason why echo is not working, correct?

I also tried to change my local timezone (browser) to UTC, and also the Server (vagrant ssh cd/app) to UTC, to fit the pusher 'eu' cluster UTC timezone.

Also always clearing the config, encrypted is set to false, and the keys are provided.

Now if I try to setup the echo server, to hopefully overcome the timezone problems, I get an error of:

-bash: laravel-echo-server: command not found

I have installed the echo-server via

npm install laravel-echo-server

within my application directory.

Now I want to initialize the socket server,


laravel-echo-server init

returns

-bash: laravel-echo-server: command not found

Any ideas why this is the case? Because the echo server was not installed globally?

npm install -g laravel-echo-server

What could it be?

D9705996's avatar

@SPLENDIDKEEN - I would run npm uninstall laravel-echo-server to remove the project installation and then run npm install -g laravel-echo-server to install globally. You should then be able to run laravel-echo-server as the server executable will be installed in your system path e.g. /usr/bin/laravel-echo-server

From there you can navigate to your project root and run laravel-echo-server init to configure the configuration. This blog helped me the first time I setup the echo server

kendrick's avatar

Thank you for coming back @d9705996

Forgot to mention, I followed the blog, but if I try to install the echo server globally it returns a permission error

npm WARN checkPermissions Missing write access to /usr/lib/node_modules

Please try running this command again as root/Administrator.

I read that some had the same issue and then installed it with sudo npm..., but would prefer not to install it with sudo.

What do you think?

D9705996's avatar

To install globally you will need to use sudo. It's the correct way to do this

sudo npm -g install laravel-echo-server
kendrick's avatar

Basically, I am installing the echo-server library on my computer, globally (terminal start then sudo npm install...) and then initialize the socket within my project root directory with (laravel-echo-server init)? @d9705996

Please or to participate in this conversation.