Long Polling, an alternative to WebSockets

Streaming data is a great solution for many use cases but sometimes it just is not possible, for instance, you could host the site on shared hosting that does not allow WebSocket connections.

But there is a solution even for those times, the long polling is alternative for real-time data delivery. The concept is pretty simple, the user sends a request to the server and if the server does not find data it will postpone response and wait until new data is available or until timeout. The timeout can already be set by the server or it may be implemented on the client or server side manually, preventing too long pending time that could affect the performance of the site.

In the following example, we have created a simple representation of how it could work, our example will update the page to all clients every time someone opens or reloads that page, upon which a new user will be written into the file, and our method will find the difference of old values and new values in the file, thus triggering a response to the clients with the pending request.

For example, if we have a website to track workers who are present on the platform we could use long polling to send data to a supervisor panel every time someone logs on to the site without the need to refresh the supervisor panel page.
Since there is no imminent response you will want to use the POST method if you are sending any data to the server so it would be sent inside the body of the request, if there is any way to get data from the GET method in the long polling I did not manage to make it work, or I cared to try too much.

This is our page that will write new users into the file logs.html:

<!doctype html>


<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>
    .user{
        padding:1rem;
    }
</style>

</head>


<body>
    
    <?php
        $time_id = date("y-d-m", time());
        $rand = rand(1, 200);
        $user = "<div class='user'>USER_ID  ::   {$time_id}  ::   NUMID: {$rand} </div>\r\n\n";
        $file = file_put_contents("logs.html", $user, FILE_APPEND);
    ?>

    <div id="users">
        <?php include("logs.html"); ?>
    </div>

    <script>

        function log_user(){

            $.ajax({
                method: "POST",
                url: "read_users.php",
                data:{"user": "User_ID"},
                success:function(data){
                    var d = JSON.parse(data);
                    console.log(d);
                    $("#users").html(d['data']);
                    log_user();
                }
            });
        }
        log_user();
    </script>
</body>


</html>

And this is our method to postpone responses to clients. If the condition is not met the method will repeat until timeout or memory limit. This will be written in the read_users.php file.

<?php

function update_polling($data){
    static $state;
    if(!isset($state)){
        $state = $data;
    }
    if(strlen($data) != strlen($state)){
       $xhr = ["data"=> $data];
       echo json_encode($xhr);  
       return;
    }
    $state = $data;
    sleep(6);
    $new_data = file_get_contents("logs.html");
    update_polling($new_data);
}

$data = file_get_contents("logs.html");
update_polling($data);

?>

If you visit your localhost in a browser and open another instance in the private window, every time you reload one another will populate with data when the sleep() method counts out. We can use the same principle even for more complex applications, if we make chat we could add an active property to every user and use it as a trigger to update active users or push new messages.

Stay connected.

                        [root@techtoapes]$     whoami 
                        
                        [root@techtoapes]$     Author Luka