Limiting Pusher Connections with Laravel

Laravel allows you to Broadcast Server Side Events over a WebSocket Connection. This allows you to update your Frontend when a certain action is initiated or completed on Server, without User having to refresh their screen, thereby improving the User experience.

Laravel supports multiple drivers to implement Broadcasting, with Pusher being one of the famous drivers. It allows you to have 100 Concurrent Connections in the Free Plan. Depending upon your usage, you might need one of their Paid Plan.

We had implemented the same on Laravel Shift, most noticeably on Can I Upgrade Laravel, which allows you to determine if your dependencies are compatible. All the other pages using Pusher were behind login and not publicly accessible.

Just before Laravel 9 was due to be released, the number of visitors to the Shift increased and we had to upgrade to a higher Pusher Plan to keep up with the Concurrent Connections. As the release buzz passed, the number of visitors were going back to pre-release levels, however the number of Concurrent Connections hadn't fallen by as much.

On further investigation we found out that a New Connection was being established for every visitor on the Site. Ideally a Connection should only be established when a User visits a Page which has functionality related to Pusher. However, a New Connection was getting established even if User Visited the Home Page. With the large number of Users that visit Laravel Shift, this was definitely a problem that we needed to address.

Laravel Documentation recommends adding the following code to bootstrap.js inside /resources/js in order to enable Pusher.

import Echo from 'laravel-echo';

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

We soon found out that whenever Pusher encounters the code new Echo({..., it starts a New Connection. Since this code was present in bootstrap.js which was being loaded on every page of the website (compiled via Laravel Mix), a connection was being established on every Page.

So once we figured out the root cause, we just moved the above code from bootstrap.js to a New JS File custom.js. We then injected this JS File using Stacks only on the pages where we were using Pusher.

We immediately saw a big decrease in the number of Connections after this fix and the numbers have been steady since then. In the hindsight, it is something which should have been obvious and could easily have been avoided. Fortunately it wasn't a very costly mistake.

Comments

[compendiumlib]

Could you provide some more detail on how you injected the js code via Stacks?

For example, when I inject the above code directly into a script tag in the header, I get the Javascript error "Cannot use import statement outside a module".