Ably Broadcaster For Laravel

4 minute read

Since the incarnation of our Laravel backend at SpringboardVR we’ve constantly had issues with our WebSocket setup. We use WebSockets heavily at SpringboardVR- all of our software needs to be highly reactive across our multiple Single Page Applications, our Desktop software, and our VR software. Unlike a traditional web application where one user means one constant subscription, for each of our users this generally means 10+ constant subscriptions anytime their business is open and using our software. Each of their VR machines is an active subscription and we have web applications that our users keep open constantly on multiple devices. Our WebSocket setup needs to be rock solid, fast, and reliable for thousands of devices across multiple continents. Over the last 3 years we’ve gone through a progression of using Pusher, Laravel Echo Server, Laravel WebSockets, and then recently back to Pusher again. Throughout all of them we were constantly fighting with both scaling up our usage and scaling our services globally. After our experiences with Laravel Echo Server and Laravel WebSockets we came to the conclusion that WebSocket servers belong with MySQL Databases and Redis Clusters- something we don’t want to deal with hosting and managing in-house. Without a dedicated DevOps person on our team there was just too much involved with keeping these sorts of services running reliably. We’ve been using Pusher again for the last 3 months but after seeing how high the latency is for some of our customers we decided to look into some of our alternatives - and that’s how we found Ably!

Why Ably over Pusher?

Global Deployment

SpringboardVR has customers all over the world and one of the issues we were seeing with Pusher was very high latency for all of our non-US customers. Pusher is only in one datacenter per application while Ably is 15 across the world. In our testing so far we’ve seen an incredible lowering of our WebSocket latency in all edge locations.

Pricing

The pricing for Pusher just doesn’t make any sense. You’re stuck picking from 4 specific tiers no matter what type of application you’re building. What if you have an app that uses a lot of connections but a few messages? Or vice versa? Ably lets you pick the usage you want across both connections and messages, letting you pay for a package that makes sense for your application.

Pusher & Laravel Echo Compatible

While we were evaluating options for replacing Pusher one of our biggest requirements was that we could continue to use Laravel Echo. As Pusher and Laravel Echo are already heavily baked into our multiple Single Page Applications as well as our Desktop system we wanted a seamless transition where we could slowly move over from our existing Pusher infrastructure.

Lots more awesome features

On top of everything else there are a ton of interesting features that Ably offers that Pusher doesn’t have anything comparable too- Ably has a great list breaking them all down. Some of our favourites are MQTT, AMQP, and STOMP support allowing you do build full microservice communication on the back of Ably. They even have gRPC and WebSub support coming soon- technologies we’re very excited to play with.

Getting Ably and Laravel to Play Nicely

In our initial testing of Ably we decided to use Ably’s fantastic Pusher interop layer. But, as we we’re now looking to roll Ably out to Production we’ve decided it was time to build a custom Broadcast driver for Laravel that adds in Ably support! Introducing the Ably Laravel Broadcaster! This driver extends the native Laravel Broadcasting system and works with Laravel Echo! Currently to use Ably with Laravel Echo in the frontend you need to enable the Pusher Protocol Support inside of your Abbly account.

  1. Go to Settings for your Application
  2. Enable Pusher protocol support under Protocol Adapter Settings Once you’ve got that setup you can continue to configuring your Laravel application.First you need to add the new Broadcaster as a composer dependency
     composer require springboardvr/laravel-ably-broadcaster
    

    Change your default Broadcast driver name in config/broadcasting.php

	'default' => env('BROADCAST_DRIVER', 'ably'),

Then you need to add Ably to your config/broadcasting.php config file under connections.

	'ably' => [
	    'driver' => 'ably',
	    'key' => env('ABLY_KEY'),
	],

Then you need to update your .env file with your Ably configuration details. The Key is available in the API Keys section of Ably. You need a key with full Privileges. The ABLY_KEY value will look something like g7CSSj.E08Odw:t2w2LkZ7OcR2Xk7S
For the MIX_ABLY_KEY value you need to take everything before the : in your ABLY_KEY, like g7CSSj.E08Odw

	BROADCAST_DRIVER=ably
	ABLY_KEY=
	MIX_ABLY_KEY=

Once you’ve got the Laravel side setup you also need to update Laravel Echo to use Ably! It keeps using the Pusher JS library but you use the Websocket Host that Ably provides.

	import Echo from "laravel-echo"

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

	window.Echo = new Echo({
	    broadcaster: 'pusher',
	    key: process.env.MIX_ABLY_KEY,
	    wsHost: 'realtime-pusher.ably.io',
	    wsPort: 443,
	    disableStats: true,
	    encrypted: true,
	});

That’s it! Public, Private, and Presence channels will all work as with Pusher.

What’s Next?

In the near future we’re going to be evaluating adding full Ably support using the Ably Javascript SDK to the Laravel Echo library. There is a lot of awesome features that you miss out on by using the Pusher interop layer and we want to have access to all the features Ably offers! We hope everyone falls in love with Ably as much as we have at SpringboardVR!

Updated:

Comments