In this episode, we're diving into real-time communication using WebSockets with Laravel. The idea is to show progress from backend jobs (like video encoding) directly to the client as it's happening, without making the user keep refreshing or polling for updates.
First, we talk about the classic polling approach (where you keep asking the backend for updates), why it's not efficient, and instead, how real-time broadcasting using WebSockets is so much better for these cases.
To get this up and running locally, we use Socket.io (specifically the local service called Sockety) and configure Laravel to broadcast events using the Pusher protocol, which Sockety understands. Even though Pusher is a third-party service, using its API locally with Sockety is completely free and works exactly the same way.
We walk through installing and running Sockety, installing the necessary Laravel broadcasting packages, and configuring both the backend (via .env
and config files) and the frontend JavaScript so they both know how to connect to the Sockety server. On the frontend, we set up Laravel Echo and pusher.js so we can catch broadcasted events and act on them in real time – for example, by updating progress on a video upload.
Finally, we create a test event in Laravel, broadcast it, and confirm in the browser console that everything's wired up. We go through some common snags (like missing the correct BROADCAST_DRIVER
) and show how to fix them on the fly. With all this in place, we're ready to do some cool real-time stuff, like pushing live job progress updates to users – no manual refresh required!