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.
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?
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.
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.
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?
Values are matching. Config is cleared.
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.
@splendidkeen - I think this might be your issue. If you turn off encryption as a test does it work.
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.?
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?
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 ...
By manually you mean on the server? @d9705996
ssh (server) is now UTC
app.php UTC
pusher (eu) UTC
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.
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
Glad you got your issue resolved. If you could mark tgevthread as solved, just in case others have the same problem
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...
Last thing I can think of is to restart your queue worker but I'm clutching at straws as I'm not using pusher but echo server.
You could try manually sending the events from pusher as per this question
https://stackoverflow.com/questions/47116964/laravel-echo-not-receiving-pusher-events-laravel-5-5
I would also double/triple cedck there's no typos in any of the event names/channels
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
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.
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 ?
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)
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.
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?
@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
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?
To install globally you will need to use sudo. It's the correct way to do this
sudo npm -g install laravel-echo-server
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
@SPLENDIDKEEN - Sounds about right :-)
Please or to participate in this conversation.