Make a soft upgrade (JS and CSS only) of your WebSocket / AJAX application

I am developing an application using websockets, with a departure from ajax.

Most of the logic is on the client side of the application, models, views, etc.

During development, I often have to make small changes and update. The way I do this is a hard browser update that basically restarts the entire application.

This may take some time, these are the following steps:

  • get index.html from server
  • index.html loads all javascript files
  • javascript creates the application and launches websocket
  • upon successful connection to the network, the server will send init data
  • initialization data from the server is received by the client, and the page is created

In a normal situation, this will be normal, because as soon as the application is downloaded, the update will not be.

But it gets painful during development, so I thought of the following solution:

After making changes to the CSS, I run the following script:

softreset: function(){
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}

Resets all CSS at once, so I don’t need to do a full update. One step forward.

Often this is not enough, I also need new content, so I want to do the following:

Question

  • I need to upload all the JS files on the page except those that contain a connection to a web socket.
  • All DOM elements, objects, events associated with these files must be deleted.
  • I need to get new JS files from the server.
  • Upload them to the page and run the onload action.

I tried working with a snippet that I use for CSS, but it does not do the same trick. Anyone have an idea?

+3
1
+2

All Articles