Photo by on Cristina Gottardi Unsplash 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: The iOS application tries to authenticate to a private channel. This is done by requesting access from the Laravel application. If authentication succeeds a socket token is sent back to iOS. With the socket token iOS can subscribe to a private channel in Pusher. If Laravel sends an event out over a private channel, iOS is able to receive it😃 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. Setting up Pusher To use Pusher as broadcast service you can create a free account . 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 implementation. Keep this open cause we will use it later on. here .env Setting up Laravel 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 is the installation guide provided by the documentation. here If we open up .env we will see various environment variables. The ones we are looking for are the following: PUSHER_APP_ID=PUSHER_APP_KEY=PUSHER_APP_SECRET=PUSHER_APP_CLUSTER=mt1 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 to . BROADCAST_DRIVER pusher 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 method will create a socket token we can use in future requests from the iOS application. socket_auth Frontend We will create a simple text input to send messages to Pusher. Enter a message to submit Go ahead and create a beautiful web page with a fancy theme or copy my form HTML into your welcome.blade.php Next we will create the route we referenced in the above HTML, in our web.php: When posting to we will send an Event with the input text. To send an event to Laravel we can create a separate class for that: /broadcasting php artisan make:event SendMessage In this event we will set a class variable called which will be available for the iOS app. Remember that all variables in a Laravel event will be available for applications who are listening for the event. The content of the class will be: $message public This will send an event in the channel with the name . The content of the message can be found in the variable. messages message.sent $message Open up the debug console in your Pusher dashboard and go test if you see any events incoming! Pusher dashboard 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 ✅
