Add Pusher to Laravel

pusher-laravel.md

1. Add pusher PHP server to composer

"pusher/pusher-php-server": "^3.0",

2. Require this package, with Composer, in the root directory of your project.

$ composer require vinkla/pusher

3. Add the service provider to config/app.php in the providers array, or if you're using Laravel 5.5, this can be done via the automatic package discovery.

Vinkla\Pusher\PusherServiceProvider::class

4. If you want you can use the facade. Add the reference in config/app.php to your aliases array.

'Pusher' => Vinkla\Pusher\Facades\Pusher::class

5. Laravel Pusher requires connection configuration. To get started, you'll need to publish all vendor assets:

$ php artisan vendor:publish

6. Add pusher info to .env file

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=

7. Add code

Pusher::trigger('my-channel', 'my-event', ['message' => $message]);
// We're done here - how easy was that, it just works!

Pusher::getSettings();
// This example is simple and there are far more methods available.

8. Add to laravel bootstrap Js file. May already be there.

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

9. Add to script at header to include the variables for JS. That way if anything changes on dev or prod, you don't have to worry. Similar to wp_localize_script

const LaravelVars = {
    "pusher_key": "{{ env("PUSHER_APP_KEY") }}",
    "pusher_cluster": "{{ env("PUSHER_APP_CLUSTER") }}",
}

10. Add pusher info to app.js file

const socket = new Pusher(LaravelVars.pusher_key, {
   cluster: LaravelVars.pusher_cluster,
});

const channel = socket.subscribe('my-channel');

channel.bind('my-event',function(data) {
    alert("commented!");
   // or do whatever you need in Vue or jQuery, etc.
});

11. Make sure you run the script update

yarn run dev
// or npm run dev