Much more reliable socket.io handling

and reconnections
This commit is contained in:
Dave Conway-Jones 2016-06-01 23:40:38 +01:00
parent 6a86dac240
commit 47571bcb73
4 changed files with 23 additions and 18 deletions

View File

@ -104,7 +104,7 @@ To add a new base layer
msg.payload.command.map = { msg.payload.command.map = {
name:"OSMhot", name:"OSMhot",
url:'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', 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 Demo Flow

View File

@ -1,6 +1,6 @@
{ {
"name" : "node-red-contrib-web-worldmap", "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.", "description" : "A Node-RED node to provide a web page of a world map for plotting things on.",
"dependencies" : { "dependencies" : {
"express": "4.*", "express": "4.*",

View File

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

View File

@ -63,7 +63,7 @@
</div> </div>
<div id="results"> <div id="results">
<span id="searchRes"></span> <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>
<div id="menu"><table> <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> <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 clusterAt = 1;
var maxage = 600; // default max age of icons on map in seconds - cleared after 10 mins 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 baselayername = "OSM grey"; // Default base layer OSM but uniform grey
var ibmfoot = "&nbsp;&copy; IBM 2015,2016" var ibmfoot = "&nbsp;&copy; IBM 2015,2016"
// Create the socket // Create the socket
@ -131,11 +130,13 @@ ws.on('connect', function() {
ws.on('disconnect', function() { ws.on('disconnect', function() {
console.log("DISCONNECTED"); console.log("DISCONNECTED");
document.getElementById("foot").innerHTML = "<font color='#900'>"+ibmfoot+"</font>"; document.getElementById("foot").innerHTML = "<font color='#900'>"+ibmfoot+"</font>";
setTimeout(function() { ws.connect(); }, 2500);
}); });
ws.on('error', function() { ws.on('error', function() {
console.log("ERROR"); console.log("ERROR");
document.getElementById("foot").innerHTML = "<font color='#C00'>"+ibmfoot+"</font>"; document.getElementById("foot").innerHTML = "<font color='#C00'>"+ibmfoot+"</font>";
setTimeout(function() { ws.connect(); }, 2500);
}); });
ws.on('worldmapdata', function(data) { 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 // Move some bits around if in an iframe
if (window.self !== window.top) { if (window.self !== window.top) {
console.log("In an iframe"); console.log("IN an iframe");
(document.getElementById("topbar").style.display="none"); (document.getElementById("topbar").style.display="none");
(document.getElementById("map").style.top="0px"); (document.getElementById("map").style.top="0px");
(document.getElementById("results").style.right="50px"); (document.getElementById("results").style.right="50px");
@ -386,7 +387,7 @@ map.on('overlayremove', function(e) {
map.removeControl(drawControl); map.removeControl(drawControl);
} }
//else console.log("layer del :",e.name); //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) { map.on('baselayerchange', function(e) {