Problems when storing WebSocket connection handle objects using jQuery.data() -- what's the best thing to do?

Question

I have an asynchronous queue worker running as a Tornado script on my server -- it hosts a subclass of Tornado's PeriodicTask, which consumes events from Redis. To monitor the queue, I set up a tornado.websocket.WebSocketHandler subclass on a URL, and then encapsulated the client WebSocket JavaScript in a jQuery plugin (here is the full code).

The idea is, you can have a number of queues on the server, and so you can use the jQuery module to set up a widget that specifically monitors that queue. At the moment, the logic is dead simple -- the widgets merely indicate how many tasks are enqueued in their target queue.

Here's the init code in question:

    /* init: */ function (_options) {
    options = $.extend(options, _options);
    var self = this;

    self.data('recently', [0,0,0,0,0,0,0,0,0]);
    self.data('options', options);
    self.data('sock', null);

    var sock = null;
    if ('endpoint' in options && options['endpoint']) {
        sock = new WebSocket(options['endpoint']);
        sock.onopen = function () {};
        sock.onclose = function () {};
        sock.onmessage = function (e) {
            var d = $.parseJSON(e.data);
            if (options.queuename in d) {
                var qlen = d[options.queuename]
                lastvalues = self.data('recently');
                lastvalues.shift();
                lastvalues.push(qlen);
                if (lastvalues.every(function (itm) { return itm == 0; })) {
                    self.each(function () {
                        var elem = $(this);
                        elem.html("<b>Currently Idle</b>");
                    });
                } else {
                    self.each(function () {
                        var elem = $(this);
                        elem.html("<b>" + qlen + "</b> Queued Signals");
                    });
                }
                self.data('recently', lastvalues);
            }
        }
    }
    self.data('sock', sock);
    return self.each(function () {
        var elem = $(this);
        elem.data('sock', sock);
    });
}

The javascript uses window.setInterval() to periodically send a message to the socket; the server replies with the status of the queue for which it was asked, and the socket's frontend callback updates the DOM.

But the problem is: after a few minutes of this sort of polling -- set off specifically by navigating between pages containing the client socket code -- the sockets fail by throwing an exception with a message like DOM_ERROR_11 and a message that the socket object is no longer valid.

Once the page enters this error condition, I have to restart both the browser and the server websocket script to get everything to start up again.

... Is there a better way to set things up than I have (with the window.setInterval() and whatnot)?

Answer 1

Well, it's probably not the best idea to keep a heavy object attached to DOM

You could alternatively have a global storage (probably a dictionary) with keys to sockets mapping, and only store the key as a DOM obj attribute