Last Updated: February 25, 2016
·
1K
· bajalovic

Websocket with Ajax Polling support

I had a task to display some data updates in real time, and I decided to use websockets. Once I implemented websockets, I decided to go a little further and to add an Ajax Polling support for browsers that do not have support for websockets.

var ajaxPolling = false;
var ajaxPollingTimeout = null;
var ajaxPollingTimer = 5; // seconds
var websocketPolling = true;
var websocketReconnectTimer = 2; // seconds
var timerIncrease = 2;
var conn = null;

startWebsocketConnection();

function startWebsocketConnection() {
    conn = new ab.Session(
            'ws://localhost:8080'
            , function() {            // Once the connection has been established
                console.log("Opened connection");
                // set websocketPolling to true and reset reconnect timer
                websocketPolling = true;
                websocketReconnectTimer = 2; // seconds 
                stopAjaxPolling(); // stop ajax polling if any

                conn.subscribe('some-topic', function(topic, data) {
                    // handle data
                });
            }
            , function() {            // When the connection is closed or do not exist
                console.warn('WebSocket connection closed');
                startAjaxPolling();

                startReconnectingWebsocketConnection();
            }
            , { 
                'skipSubprotocolCheck': true
            }
    );
}

function AjaxPolling() {
    if(!ajaxPolling) { // if ajaxPolling is false, go out ;)
        stopAjaxPolling();
        return;
    }

    $.ajax({
        url: '/get-data',
        type: 'GET',
        dataType: 'JSON',
        success: function(data) {
            // handle data

            // set timeout to make another ajax request
            ajaxPollingTimeout = setTimeout(function() {
                AjaxPolling();
            }, ajaxPollingTimer * 1000);
        }
    });
}

function startReconnectingWebsocketConnection() {
    websocketPolling = false;
    // set timer, it will call startWebsocketConnection() method for 4s, 8s, 16s, 32s, ...
    websocketReconnectTimer = websocketReconnectTimer * timerIncrease;
    setTimeout(function() {
        startWebsocketConnection();
    }, websocketReconnectTimer * 1000);
}

function startAjaxPolling() {
    if(!ajaxPolling) {
        ajaxPolling = true;
        AjaxPolling();
    }
}

function stopAjaxPolling() {
    ajaxPolling = false;
    if(ajaxPollingTimeout)
        clearTimeout(ajaxPollingTimeout);
}

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside