Snippet: Auto reload notifications sidebar

Hi,

Here's a piece of code that reloads the notifications sidebar when a Pusher notification is received. The contents below are those of app.js . Hope it helps anyone. For now, you have to call self.getNotifications for each channel you bind. Perhaps it's possible to automatically call it for each bind, but I haven't figured that out yet.

require('spark-bootstrap');

require('./components/bootstrap');

var app = new Vue({
    mixins: [require('spark')],


    methods: {
        /**
         * Finish bootstrapping the application.
         */
        whenReady: function() {
            this.subscribeToChannel(this);
        },

        subscribeToChannel: function() {
            this.pusher = new Pusher(this.spark.pusherKey);

            this.pusherAnnouncementChannel = this.pusher.subscribe('announcements');
            this.pusherNotificationChannel = this.pusher.subscribe('user.' + this.spark.userId);

            // We need this to get notifications.
            let self = this;

            this.pusherAnnouncementChannel.bind('Laravel\\Spark\\Events\\AnnouncementCreated', function(message) {

                self.getNotifications();

                swal({
                    title: 'Announcement!',
                    text: message.announcement.body,
                    type: 'info',
                    showConfirmButton: false,
                    timer: 2000
                });
            });
        }
    }
});

In my layouts/app.blade.php I have added the pusherKey to scriptVariables()

    <!-- Global Spark Object -->
    <script>
        window.Spark = <?php echo json_encode(array_merge(
            Spark::scriptVariables(), [
                    'pusherKey' => env('PUSHER_KEY')
                ]
        )); ?>
    </script>