Much more reliable socket.io handling
and reconnections
This commit is contained in:
parent
6a86dac240
commit
47571bcb73
@ -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
|
||||||
|
@ -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.*",
|
||||||
|
28
worldmap.js
28
worldmap.js
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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;"/> <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;"/> <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 = " © IBM 2015,2016"
|
var ibmfoot = " © 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) {
|
||||||
|
Loading…
Reference in New Issue
Block a user