Real-time broadcasting integration in Laravel – Part 3
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. The first argument expected is the name of the socket channel to listen to. 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 when the ActionEvent was fired. 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, if need be.
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 found this series interesting and informative. We look forward to hearing from you if you plan to hire Laravel developers or if you are a talented Laravel expert looking for an exciting job in Kochi, India.