Imagine you have a Laravel application, an iOS application and some data that is pushed between those applications. The iOS application needs to display data from the Laravel application as fast as possible (realtime). Here is where Pusher comes in handy. In this first part of a 2 post series, we will setup Laravel to handle authentication requests with Laravel Passport and we will configure Pusher to send events.
I created the following diagram to illustrate the process:
This all seems fairly simple but the authentication process was a bit harder than expected. Since I couldn’t find any good tutorial on how to authenticate through Laravel Passport, which implements oauth, I thought I would write a simple tutorial.
To use Pusher as broadcast service you can create a free account here. Create an application in Pusher named laravel-pusher e.g. When the application is successfully created you will the various code to implement Pusher. Search for the .env implementation. Keep this open cause we will use it later on.
Setup a new Laravel project using the following command:
$ composer create-project laravel/laravel laravel-pusher
This will create a directory laravel-pusher with a fresh Laravel project. Next we will install Laravel Passport and the Pusher dependency:
$ composer require laravel/passport pusher/pusher-php-server
For the sake of brevity I will not explain the whole installation for Laravel Passport but here is the installation guide provided by the documentation.
If we open up .env we will see various environment variables. The ones we are looking for are the following:
Now we go back to the Pusher website you should still have in your browser and copy paste the code from Pusher into your .env file. The PUSHER_APP_CLUSTER variable is not provided by Pusher but fill in the cluster you have selected during creating the Pusher application.
Another important step is to set the
Since the iOS is going to request access to subscribe to Pusher, we need to create a HTTP route where we handle the authentication request. We will create the route in the routes/api.php. I added one route to the file:
Since the route is placed in the routes/api.php file it gets automatically prefixed with /api. The full path will be /api/broadcast/auth.
This route points to a controller which doesn’t exist yet. Create the controller:
php artisan make:controller Api\\BroadcastAuthController
This will create a folder named Api within app\Http\Controllers and the controller itself. The following method will authenticate a request from the iOS app:
In this method we will call the Pusher library directly with the incoming channel name and socket id. The
socket_auth method will create a socket token we can use in future requests from the iOS application.
We will create a simple text input to send messages to Pusher.
Go ahead and create a beautiful web page with a fancy theme or copy my form HTML into your
Next we will create the route we referenced in the above HTML, in our web.php:
When posting to
/broadcasting we will send an Event with the input text. To send an event to Laravel we can create a separate class for that:
php artisan make:event SendMessage
In this event we will set a class variable called
$message which will be available for the iOS app. Remember that all
public variables in a Laravel event will be available for applications who are listening for the event. The content of the class will be:
This will send an event in the channel
messages with the name
message.sent . The content of the message can be found in the
Open up the debug console in your Pusher dashboard and go test if you see any events incoming!
This is part 1 of a serie where we are going to build two applications who can communicate to each other through websockets. The focus hereby is on authenticating through Laravel Passport. You can find all code from this tutorial on GitHub.
Sjors van Dongen is a Dutch guy with a passion for development, entrepreneurship and personal growth. He’s currently working on his startup for digital visitor registration software Incheckert✅
Create your free account to unlock your custom reading experience.