Much more reliable socket.io handling

and reconnections

README.md

@@ -104,7 +104,7 @@ To add a new base layer
         msg.payload.command.map = {
             name:"OSMhot",
             url:'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
-            opt:JSON.stringify('{ maxZoom: 19, attribution: "© OpenStreetMap"}')
+            opt:{ maxZoom:19, attribution:"© OpenStreetMap" }
         };
 
 Demo Flow

package.json

@@ -1,6 +1,6 @@
 {
     "name"          : "node-red-contrib-web-worldmap",
-    "version"       : "1.0.7",
+    "version"       : "1.0.8",
     "description"   : "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies"  : {
         "express": "4.*",

worldmap.js

@@ -24,8 +24,7 @@ module.exports = function(RED) {
         var node = this;
         //node.log("Serving map from "+__dirname+" as "+RED.settings.httpNodeRoot.slice(0,-1)+"/worldmap");
         RED.httpNode.use("/worldmap", express.static(__dirname + '/worldmap'));
-        io.on('connection', function(socket) {
-            //node.log(socket.request.connection.remoteAddress);
+        var callback = function(socket) {
             node.status({fill:"green",shape:"dot",text:"connected"});
             node.on('input', function(msg) {
                 socket.emit("worldmapdata",msg.payload);
@@ -33,18 +32,20 @@ module.exports = function(RED) {
             socket.on('disconnect', function() {
                 node.status({fill:"red",shape:"ring",text:"disconnected"});
             });
-        });
             node.on("close", function() {
                 node.status({});
+                socket.disconnect();
+                io.sockets.removeListener('connection', callback);
             });
-
+        }
+        io.on('connection', callback );
     }
     RED.nodes.registerType("worldmap",WorldMap);
 
     var WorldMapIn = function(n) {
         RED.nodes.createNode(this,n);
         var node = this;
-        io.on('connection', function(socket) {
+        var callback = function(socket) {
             node.status({fill:"green",shape:"dot",text:"connected"});
             socket.on('worldmap', function(data) {
                 node.send({payload:data, topic:"worldmap"});
@@ -53,10 +54,13 @@ module.exports = function(RED) {
                 node.status({fill:"red",shape:"ring",text:"disconnected"});
                 node.send({payload:{action:"disconnect"}, topic:"worldmap"});
             });
-        });
             node.on("close", function() {
                 node.status({});
+                socket.disconnect();
+                io.sockets.removeListener('connection', callback);
             });
         }
+        io.on('connection', callback);
+    }
     RED.nodes.registerType("worldmap in",WorldMapIn);
 }

worldmap/index.html

@@ -63,7 +63,7 @@
 </div>
 <div id="results">
     <span id="searchRes"></span>
-    <span id="bars" onclick='toggleMenu()' onmouseover='toggleMenu()''><i class="fa fa-bars fa-2x fa-inverse"></i></span>
+    <span id="bars" onclick='toggleMenu()' onmouseover='toggleMenu()'><i class="fa fa-bars fa-2x fa-inverse"></i></span>
 </div>
 <div id="menu"><table>
     <tr><td><input type='text' name='search' id='search' size='20' style="width:150px;"/>&nbsp;<span onclick='doSearch();'><i class="fa fa-search fa-lg"></i></span></td></tr>
@@ -116,7 +116,6 @@ var menuOpen = false;
 var clusterAt = 1;
 var maxage = 600;   // default max age of icons on map in seconds - cleared after 10 mins
 var baselayername = "OSM grey";     // Default base layer OSM but uniform grey
-
 var ibmfoot = "&nbsp;&copy; IBM 2015,2016"
 
 // Create the socket
@@ -131,11 +130,13 @@ ws.on('connect', function() {
 ws.on('disconnect', function() {
     console.log("DISCONNECTED");
     document.getElementById("foot").innerHTML = "<font color='#900'>"+ibmfoot+"</font>";
+    setTimeout(function() { ws.connect(); }, 2500);
 });
 
 ws.on('error', function() {
     console.log("ERROR");
     document.getElementById("foot").innerHTML = "<font color='#C00'>"+ibmfoot+"</font>";
+    setTimeout(function() { ws.connect(); }, 2500);
 });
 
 ws.on('worldmapdata', function(data) {
@@ -165,7 +166,7 @@ map = new L.map('map').setView(startpos, startzoom);
 
 // Move some bits around if in an iframe
 if (window.self !== window.top) {
-    console.log("In an iframe");
+    console.log("IN an iframe");
     (document.getElementById("topbar").style.display="none");
     (document.getElementById("map").style.top="0px");
     (document.getElementById("results").style.right="50px");
@@ -386,7 +387,7 @@ map.on('overlayremove', function(e) {
         map.removeControl(drawControl);
     }
     //else console.log("layer del :",e.name);
-    ws.emit("worldmap",{action:"delete", name:e.name});
+    ws.emit("worldmap",{action:"dellayer", name:e.name});
 });
 
 map.on('baselayerchange', function(e) {