How to set up Pusher with Wave

Hi there,

With Wave, when adding new npm packages, you have to add them in the resources/views/themes/your_theme directory.

https://wave.devdojo.com/docs/features/themes

Basically, each theme is responsible for managing their own assets. In each theme you will find a package.json which contains the front-end dependencies to run webpack and build each one.

Let me know how it goes!

Hello Bobby. I am also trying to manage some live events in my current Laravel project which was initially built with Laravel 8.83 but got upgraded now to 10.39 successfully. I am trying to use laravel-echo with Pusher service in order to provide some live chat messaging app between users.

When I do install laravel-echo and pusher-server etc. as soon as I add them in my project I get a warning:

dashboard:1 Uncaught TypeError: Failed to resolve module specifier "laravel-echo". Relative references must start with either "/", "./", or "../".

here is my custom call to echo:

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.VITE_PUSHER_APP_KEY,
    cluster: process.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true,
    authEndpoint: '/broadcasting/auth',
    auth: {
        headers: {
            Authorization: 'Bearer ' + process.env.VITE_PUSHER_APP_AUTH_TOKEN,
        },
    },
});

console.log(window.userId);

Echo.private('user.' + window.userId)
    .listen('NewNotificationsEvent', (e) => {
        document.getElementById('totalNotificationsCounter').textContent = e.totalReceivedMessages;
    });

From what I've read, you say we should include the laravel-echo in the theme but I did include them where I usually add those with vite so I am really confused and it would be great if you could share the proper steps to make this beast starting to work ;)

Hey!

Yes indeed, you need to include the frontend assets in the theme's directory, eg:

resources/views/themes/tailwind

So you will first have to cd into that directory and then install the package using npm.

Then you can add your custom JS logic in the resources/views/themes/tailwind/assets/js/app.js file as normal.

After that make sure to run npm run production to build the new asset files with those changes.

Let me know how it goes.

Ok, Ok, will try that. Hopefully it works as I am using a custom admin interface as per my project needs, but I've reused the URLs and view files from the theme, so I guess that was the issue.

Will get back to you with the result but I hope to finally see the pusher debug sharing the success connection as I know for sure it works fine, it just did not recognize the echo in the root of the project as I was not aware we need to have it inside the theme and not where it officially gets installed.

Thanks again for the quick and efficient help even on holidays ;)

No worries at all! Let me know how it goes! 😊

Hey Bobby,

I can confirm gladly that your suggestion worked perfectly. Here are the steps I took as an example to test the connectivity:

1. Install fresh Wave following instructions. At the end the project should allow registration and navigation of profile etc.
2. From the root of the project install pusher server using:

composer require pusher/pusher-php-server

3. Navigate to your Wave theme (if using custom theme, make sure to change the path/folder name):

cd .\resources\views\themes\tailwind\

4. Install laravel-echo and pusher-js (I am using npm, but yarn also does the trick)

npm install --save laravel-echo pusher-js

5. Once installed, add the following code to: resources/views/themes/tailwind/assets/js/app.js (I added it right after the import of Alpine and axios):

// Laravel Echo
import Echo from 'laravel-echo';

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-key',
    cluster: 'your-pusher-cluster',
    encrypted: true,
    forceTLS: true
});

6. Build the new js resource using:

npm run production

7. In the file config/broadcasting.php, set the default option to pusher :

'default' => env('BROADCAST_DRIVER', 'pusher'),

8. To check debug console in Pusher, we need to enable app debugging in .env

APP_DEBUG=true

9. To test the broadcasting feel free to create a livewire component using:

php artisan make:event OrderShipped

10. Change the content of the newly created event file in app\Events\OrderShipped.php to:

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;

class OrderShipped implements ShouldBroadcastNow
{
    public $order;

    public function __construct($order)
    {
        $this->order = $order;
    }

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

11. Create a test Livewire component (taken from Livewire echo example - check the documentation for more details):

php artisan livewire:make OrderTracker

12. Replace the code of the newly created component controller app\Http\Livewire\OrderTracker.php to:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class OrderTracker extends Component
{
    public $showNewOrderNotification = false;

    protected $listeners = ['echo:orders,OrderShipped' => 'notifyNewOrder'];

    public function notifyNewOrder()
    {
        $this->showNewOrderNotification = true;
    }
}

13. After all steps it is time to test the connectivity. Open a terminal/command line and initiate laravel tinker:

php artisan tinker

14. As a last step, let's trigger an event manually which if all was set correctly and pusher credentials were added to .env file, should appear in the Debug console of Pusher.com:

event(new App\Events\OrderShipped('Test event for a shipped order. Please work!')); 

Well, here are my 5 cents back to the community and anyone falling as me in the need of live events. Hope this will save some hair being pulled out from the scalp ;)

@bobby - I would suggest to consider adding a video in Wave video tutorials about how to install and test live events as this topic would be valuable for many people.

P.S. If you are like me (again0 and using a custom UI for admin/users, just make sure to include the newly generated file to your scripts section: /public\themes\tailwind\js\app.js

That is awesome! Thank you for putting this tutorial together!

Hey Bobby. What an irony - I seem to be still missing a step as I noticed I am not including the app.js anywhere, but when I try to do so, I get an error again:

Uncaught ReferenceError: Pusher is not defined

Not sure what to do or how to include the daemn Echo and Pusher as any way I tried so far (using require, with relative path etc.) did not succeed and without it I am not able to connect to Pusher to listen for an event trigger after I broadcast.

Any help, example code etc. would be extremely appreciated...

Btw, would you offer some extra support (not for free) just to provide access to someone who can help me to figure out what is going on with my app in terms of Echo/Pusher connectivity and live broadcasting?

I am trying to use Munafio's Chatify and I see all notifications correctly in Pusher.com Dev console, however I cannot listen for the triggered events because of the lack of ability to load and use Echo and Pusher...