Real-time broadcasting integration in Laravel – Part 3

October 10, 2018

This is the third and concluding part of the three-part series on implementing real-time broadcasting in Laravel using Redis, Node.js and Socket.io. The first part covered the basic workflow of the implementation, including firing an event to broadcast data. The second part dealt with setting up a socket server to broadcast data.

In Part-2, we setup data to be broadcast from the “Publishing” server. Now, we need to create a Websocket channel, connecting the publishing server and the frontend bidding pages where we need real-time data updates. We can then listen to and fetch data passed on the Websocket channel, and process it as needed.

We’ll be using the Socket.io client library to setup the Websocket channel. On the publishing server that we installed the socket.io package, the client library file can be found at the following path: application_root/node_modules/socket.io-client/dist/socket.io.js. We can copy and include this file in the frontend bidding pages where we need to setup the Websocket.

Setup Websocket

The following script sets up the Websocket, and listens for data updates.

<script src=”path/to/socket.io.js”></script>

<script>
    var sock = io("//{{ config('env.PUBLISHER_URL') }}:{{ config('env.BROADCAST_PORT') }}");
    sock.on('action-channel-one:App\\Events\\ActionEvent', function (data) {

        //data.actionId and data.actionData hold the data that was broadcast
        //process the data, add needed functionality here
    });
</script>

The first line includes the Socket.io client library. Next, the sock variable is initialised to hold the Websocket which connects to the publishing server. The broadcast port must match the port that the publishing server is listening on.

The sock.on() code block listens to a specific channel on the Websocket. You might remember that in the socket server script we set up the socket channel name to be channel-name:EventName, where action-channel-one was the channel name and App\Events\ActionEvent was the event name.

The closure function gets the data that is broadcast. The data.actionId contains the actionId, and the data.actionData gets the actionData that was broadcast. In this closure, we can set up the code for processing the broadcast data using plain Javascript.

We can use multiple blocks of the sock.on() call to listen to different Websocket channels. For reference purposes, I’m adding example values for .env constants used in the code above.

BROADCAST_DRIVER=redis 
REDIS_HOST= 123.12.12.12 //127.0.0.1 if localhost 
REDIS_PASSWORD=yourRedisPassword 
REDIS_PORT=6379 // Redis port number, by default it is 6379 
BROADCAST_PORT=3444 //Can be any port number not used by other processes 
PUBLISHER_URL=http://app.publisher // The URL at which Publishing Server can be accessed

We hope you have found this series to be useful and helpful. You may contact us if you’re looking for a Laravel developer job in Kochi, India – or if you are looking to hire Laravel developers.

Leave a Reply

Your email address will not be published. Required fields are marked *