Building Real-Time Laravel Apps with Pusher

Adding Notifications to the UI

We know that our back-end application is successfully triggering events. Now let's look at how we can receive those events within our client application. Pusher has WebSocket-powered client libraries for JavaScript, Android and iOS.

In this section we're going to use the Pusher JavaScript library to receive the notification from the server and use the toastr library to show the notifications.

We briefly looked at the Pusher JavaScript library previously, but let's start by looking at some of the conventions in a bit more detail.

Channels & Events

We trigger events on channels from the back-end. On the front-end we subscribe to channels and bind to events on those channels. Whenever an event occurs on a channel we can define a function to be called to handle that event and any associated event data payload.

var pusher = new Pusher('{{env("PUSHER_KEY")}}');
var channel = pusher.subscribe('channel-name');
channel.bind('event-name', function(data) {
  // do something with the event data
});

Showing the Notifications

The Pusher JavaScript library and the toastr notification library has already been included in the template we copied earlier. So, all we need to do is subscribe to the notifications channel, bind to the new-notification event and use the toastr library to show the notification.

Use the following code outline to implement the notification functionality:

$(notifyInit); // Existing functionality

// Use toastr to show the notification
function showNotification(data) {
    // TODO: get the text from the event data

    // TODO: use the text in the notification
    //toastr.success(text, null, {"positionClass": "toast-bottom-left"});
}

var pusher = new Pusher('{{env("PUSHER_KEY")}}');

// TODO: Subscribe to the channel

// TODO: Bind to the event and pass in the notification handler

You can test the notification functionality without a back-end in two ways:

  1. Since the showNotification function is global you can test it by opening up the browser console and calling it with showNotification({text:"hello"});.
  2. You can use the Event Creator in the Pusher Debug Console to trigger events

Once you've put those few pieces of code in place you've not got real-time notifications in your app.

Open up a http://localhost:8000/notifications in a second browser window - even a different browser altogether - and test out the functionality.

If you've got a tool like awesome ngrok installed you can share the app with anybody else in the world to test out your new real-time functionality.

Extras

If you get everything else done and you've still some time left. Why not try...

Excluding the Triggerer

It's possible to stop the user who triggered the event also receiving the event by Pusher. To do this you need to pass a unique connection identifier called the socket_id to the $pusher->trigger function call.

You can get the socket_id on the client in JavaScript using pusher.connection.socket_id and pass it to the back-end notifications/notify endpoint in the POST data. Then you can use it to exclude that user from getting their own event using $pusher->trigger($channelName, $eventName, $eventData, $socketId).

Where next?

Let's have a look a what we've learned in this chapter.