socket.io: Reconnect if the server disconnects

This will make the pages gracefully handle HTTP server restart events,
which happen whenever a plugin is installed or uninstalled via the
`/admin/plugins` page.

src/static/js/admin/plugins.js

@@ -4,6 +4,11 @@
 
 $(document).ready(() => {
   const socket = socketio.connect('..', '/pluginfw/installer');
+  socket.on('disconnect', (reason) => {
+    // The socket.io client will automatically try to reconnect for all reasons other than "io
+    // server disconnect".
+    if (reason === 'io server disconnect') socket.connect();
+  });
 
   const search = (searchTerm, limit) => {
     if (search.searchTerm !== searchTerm) {
@@ -253,10 +258,12 @@ $(document).ready(() => {
     search.results = [];
   });
 
-  // init
-  updateHandlers();
-  socket.emit('getInstalled');
-  search('');
+  socket.on('connect', () => {
+    updateHandlers();
+    socket.emit('getInstalled');
+    search.searchTerm = null;
+    search($('#search-query').val());
+  });
 
   // check for updates every 5mins
   setInterval(() => {

src/static/js/admin/settings.js

@@ -5,6 +5,16 @@
 $(document).ready(() => {
   const socket = socketio.connect('..', '/settings');
 
+  socket.on('connect', () => {
+    socket.emit('load');
+  });
+
+  socket.on('disconnect', (reason) => {
+    // The socket.io client will automatically try to reconnect for all reasons other than "io
+    // server disconnect".
+    if (reason === 'io server disconnect') socket.connect();
+  });
+
   socket.on('settings', (settings) => {
     /* Check whether the settings.json is authorized to be viewed */
     if (settings.results === 'NOT_ALLOWED') {
@@ -46,8 +56,6 @@ $(document).ready(() => {
     $('#response').text(progress);
     $('#response').fadeOut('slow');
   });
-
-  socket.emit('load'); // Load the JSON from the server
 });
 
 

src/static/js/pad.js

@@ -238,15 +238,25 @@ const handshake = () => {
     sendClientReady(receivedClientVars);
   });
 
-  socket.on('reconnecting', () => {
+  const socketReconnecting = () => {
     // pad.collabClient might be null if the hanshake failed (or it never got that far).
     if (pad.collabClient != null) {
       pad.collabClient.setStateIdle();
       pad.collabClient.setIsPendingRevision(true);
       pad.collabClient.setChannelState('RECONNECTING');
     }
+  };
+
+  socket.on('disconnect', (reason) => {
+    // The socket.io client will automatically try to reconnect for all reasons other than "io
+    // server disconnect".
+    if (reason !== 'io server disconnect') return;
+    socketReconnecting();
+    socket.connect();
   });
 
+  socket.on('reconnecting', socketReconnecting);
+
   socket.on('reconnect_failed', (error) => {
     // pad.collabClient might be null if the hanshake failed (or it never got that far).
     if (pad.collabClient != null) {

src/static/js/timeslider.js

@@ -59,8 +59,11 @@ const init = () => {
       sendSocketMsg('CLIENT_READY', {});
     });
 
-    socket.on('disconnect', () => {
+    socket.on('disconnect', (reason) => {
       BroadcastSlider.showReconnectUI();
+      // The socket.io client will automatically try to reconnect for all reasons other than "io
+      // server disconnect".
+      if (reason === 'io server disconnect') socket.connect();
     });
 
     // route the incoming messages