server & websocket adress & port added to setting

Dockerfile

@@ -1,6 +1,7 @@
 FROM node:16
 # Create app directory
 WORKDIR /usr/src/app
+ENV WEB_IP "$WEB_ADDRESS_INT"
 # Install app dependencies
 # A wildcard is used to ensure both package.json AND package-lock.json are copied
 # where available (npm@5+)

README.md

@@ -49,11 +49,11 @@ docker run -p 3100:3100 -p 8999:8999 --name ntopngglobe -d dergeorg/ntopngglobe
 ```json
 {
   "location": {
-    "home": {
+    "home": {  
-      "lat": 48.1,
+      "lat": 48.1,  // must be set to lat of home wan ip  --> https://www.maxmind.com/en/locate-my-ip-address
-      "lng": 16.3
+      "lng": 16.3   // must be set to lng of home wan ip --> https://www.maxmind.com/en/locate-my-ip-address
     },
-    "precision": 0
+    "precision": 0   // how to round the decimal. 0 is no decimal
   },
   "colors": {
     "loc": {
@@ -91,8 +91,14 @@ docker run -p 3100:3100 -p 8999:8999 --name ntopngglobe -d dergeorg/ntopngglobe
     }
   },
   "timer": {
-    "del": 30,
+    "del": 30, // deletes alerts older than 30 minutes
-    "refreshTimer": 1
+    "refreshTimer": 1 // 1 --> refresh globe every 1 minute; 0 --> refresh globe on every new Data set
+  },
+  "ips": {
+    "home": "192.168.1.", //Private home adress
+    "loopback": "127.0.0.1",
+    "server": "localhost:3100", //Server adress
+    "serverws": "localhost:8999" //websocket adress
   }
 }
 ```

app.js

@@ -18,7 +18,9 @@ var usersRouter = require('./routes/users');
 // view engine setup
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'jade');
-app.use(cors())
+app.use(cors({
+    origin: 'globe.dergeorg.at'
+}))
 app.use(logger('dev'));
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));

model/globedata.js

@@ -16,7 +16,7 @@ async function addArc(src, dest, uid, src_name, dest_name){
     var endLat = undefined;
     var endLng = undefined;
     if(!data.arc.some(x => x.src === src && x.dest === dest)) {
-        if (src.includes("192.168.1.") || src.includes("127.0.0.1")) {
+        if (src.includes(settings.ips.home) || src.includes("127.0.0.1")) {
             startLat = round(settings.location.home.lat, settings.location.precision)
             startLng = round(settings.location.home.lng, settings.location.precision)
         } else {

public/conf/settings.json

@@ -44,5 +44,11 @@
   "timer": {
     "del": 30,
     "refreshTimer": 1
+  },
+  "ips": {
+    "home": "192.168.1.",
+    "loopback": "127.0.0.1",
+    "server": "localhost:3100",
+    "serverws": "localhost:8999"
   }
 }

public/globe.html

@@ -80,77 +80,72 @@
             item.cli_os + " \nis_srv_vic " + item.is_srv_vic
     }
 
-    function componentDidMount() {
-        var data = {};
-        if ("WebSocket" in window) {
-            console.log("WebSocket is supported by your Browser!");
-            const ws = new WebSocket('ws://localhost:8999');
-            ws.onopen = function () {
-                // Web Socket is connected, send data using send()
-                console.log("Message is sent...");
-            };
-            ws.onmessage = function (evt) {
-                var received_msg = evt.data;
-                console.log("Message is received...");
-                componentDidMount()
-            };
-            ws.onclose = function () {
-                // websocket is closed.
-                console.log("Connection is closed...");
-            };
-        }else {
-            // The browser doesn't support WebSocket
-            alert("WebSocket NOT supported by your Browser! A left click on the globe will refresh the data");
-        }
 
-        axios.get("http://localhost:3100/display").then(res => {
+    function componentDidMount() {
-            data = res.data;
+        axios.get('/conf/settings.json').then(res => {
-            console.log(data)
+            const settings = res.data;
-            ReactDOM.render(
+            var data = {};
-                <Globe
+            if ("WebSocket" in window) {
-                    onGlobeClick={() => {
+                console.log("WebSocket is supported by your Browser!");
-                        axios.get("http://localhost:3100/display").then(res => {
+                const ws = new WebSocket('ws://'+settings.ips.server);
-                            data = res.data;
+                ws.onmessage = function (evt) {
-                            componentDidMount()
+                    var received_msg = evt.data;
-                        });
+                    componentDidMount()
-                    }}
+                };
-                    globeImageUrl="/images/earth-night.jpg"
+            }else {
-                    backgroundImageUrl="/images/night-sky.png"
+                // The browser doesn't support WebSocket
-                    backgroundColor={"#000011"}
+                alert("WebSocket NOT supported by your Browser! A left click on the globe will refresh the data");
-                        // edges
+            }
-                    arcsData={data.arc}
+
-                    arcColor={(d) => [d.color[0], d.color[1]]}
+            axios.get("http://"+settings.ips.server+"/display").then(res => {
-                    arcDashLength={data.settings.sizes.globe.arcDashLength}
+                data = res.data;
-                    arcAltitudeAutoScale={data.settings.sizes.globe.arcAltitudeAutoScale}
+                console.log(data)
-                    arcDashGap={data.settings.sizes.globe.arcDashGap}
+                ReactDOM.render(
-                    arcDashInitialGap={data.settings.sizes.globe.arcDashInitialGap}
+                    <Globe
-                    arcDashAnimateTime={data.settings.sizes.globe.arcDashAnimateTime}
+                        onGlobeClick={() => {
-                    arcStroke={data.settings.sizes.globe.arcStroke}
+                            axios.get("http://"+settings.ips.server+"/display").then(res => {
-                    arcLabel={(d) => generateHoverText(d.txrx)}
+                                data = res.data;
-                    onArcClick={function (d) {
+                                componentDidMount()
-                        axios.get("http://localhost:3100/alert/" + d.uid).then(res => {
+                            });
-                            const resdata = res.data;
+                        }}
-                            alert(generateClickText(resdata))
+                        globeImageUrl="/images/earth-night.jpg"
-                        })
+                        backgroundImageUrl="/images/night-sky.png"
-                    }}
+                        backgroundColor={"#000011"}
-                        //arcCircularResolution={64}
+                            // edges
-                        // arcLabel={() => "test"}
+                        arcsData={data.arc}
-                        // labels
+                        arcColor={(d) => [d.color[0], d.color[1]]}
-                    labelsData={data.loc}
+                        arcDashLength={data.settings.sizes.globe.arcDashLength}
-                    labelLat={(d) => d.lat}
+                        arcAltitudeAutoScale={data.settings.sizes.globe.arcAltitudeAutoScale}
-                    labelLng={(d) => d.lng}
+                        arcDashGap={data.settings.sizes.globe.arcDashGap}
-                    labelText={(d) => d.name}
+                        arcDashInitialGap={data.settings.sizes.globe.arcDashInitialGap}
-                        // labelSize={(d) => 0.5 + d.size}
+                        arcDashAnimateTime={data.settings.sizes.globe.arcDashAnimateTime}
-                    labelSize={0}
+                        arcStroke={data.settings.sizes.globe.arcStroke}
-                    labelDotRadius={0.4}
+                        arcLabel={(d) => generateHoverText(d.txrx)}
-                        // labelDotRadius={(d) => 0.5 + d.size}
+                        onArcClick={function (d) {
-                    labelColor={(d) => d.color}
+                            axios.get("http://"+settings.ips.server+"/alert/" + d.uid).then(res => {
-                    labelResolution={2}
+                                const resdata = res.data;
-                    enablePointerInteraction={true}
+                                alert(generateClickText(resdata))
-                />,
+                            })
-                document.getElementById('globeViz')
+                        }}
-            );
+                            //arcCircularResolution={64}
-        }).catch(err => alert(err))
+                            // arcLabel={() => "test"}
+                            // labels
+                        labelsData={data.loc}
+                        labelLat={(d) => d.lat}
+                        labelLng={(d) => d.lng}
+                        labelText={(d) => d.name}
+                            // labelSize={(d) => 0.5 + d.size}
+                        labelSize={0}
+                        labelDotRadius={0.4}
+                            // labelDotRadius={(d) => 0.5 + d.size}
+                        labelColor={(d) => d.color}
+                        labelResolution={2}
+                        enablePointerInteraction={true}
+                    />,
+                    document.getElementById('globeViz')
+                );
+            }).catch(err => alert(err))
+        })
     }
 
     componentDidMount()