Merge pull request #2 from peteriman/feat/socket.io-namespace

feat: socket.io namespace support

README.md

@@ -44,7 +44,9 @@ title: 'Express Status',  // Default title
 theme: 'default.css',     // Default styles
 path: '/status',
 socketPath: '/socket.io', // In case you use a custom path
-websocket: existingSocketIoInstance,
+namespace: '/',           // socket.io namespace
+port: null,               // socket.io port
+websocket: null,          // In case you use an existing socket.io instance
 spans: [{
   interval: 1,            // Every second
   retention: 60           // Keep 60 datapoints in memory
@@ -59,15 +61,14 @@ chartVisibility: {
   cpu: true,
   mem: true,
   load: true,
-  eventLoop: true,
   heap: true,
+  eventLoop: true,
   responseTime: true,
   rps: true,
   statusCodes: true
 },
-healthChecks: [],
-ignoreStartsWith: '/admin'
-
+ignoreStartsWith: '/admin',
+healthChecks: []
 ```
 
 ## Health Checks

src/helpers/default-config.js

@@ -3,6 +3,9 @@ module.exports = {
   theme: 'default.css',
   path: '/status',
   socketPath: '/socket.io',
+  namespace: '/',
+  port: null,
+  websocket: null,
   spans: [
     {
       interval: 1,
@@ -17,8 +20,6 @@ module.exports = {
       retention: 60,
     },
   ],
-  port: null,
-  websocket: null,
   iframe: false,
   chartVisibility: {
     cpu: true,

src/helpers/socket-io-init.js

@@ -19,7 +19,10 @@ module.exports = (server, config) => {
     if (config.websocket !== null) {
       io = config.websocket;
     } else {
-      io = socketIo(server);
+      io = socketIo(server, { path: config.socketPath });
+    }
+    if (typeof io.of === 'function') {
+      io = io.of(config.namespace);
     }
 
     io.on('connection', socket => {

src/helpers/validate.js

@@ -14,14 +14,35 @@ module.exports = config => {
     return defaultConfig.chartVisibility;
   };
 
+  const prependWithSlash = string => {
+    if (string && !string.startsWith('/')) {
+      return `/${string}`;
+    }
+    return string;
+  };
+
   config.title =
     typeof config.title === 'string' ? config.title : defaultConfig.title;
   config.theme =
     typeof config.theme === 'string' ? config.theme : defaultConfig.theme;
   config.path =
-    typeof config.path === 'string' ? config.path : defaultConfig.path;
+    prependWithSlash(
+      typeof config.path === 'string'
+        ? config.path
+        : defaultConfig.path
+    );
+  config.namespace =
+    prependWithSlash(
+      typeof config.namespace === 'string'
+        ? config.namespace
+        : defaultConfig.namespace
+    );
   config.socketPath =
-    typeof config.socketPath === 'string' ? config.socketPath : defaultConfig.socketPath;
+    prependWithSlash(
+      typeof config.socketPath === 'string'
+        ? config.socketPath
+        : defaultConfig.socketPath
+    );
   config.spans =
     typeof config.spans === 'object' ? config.spans : defaultConfig.spans;
   config.port =
@@ -37,14 +58,21 @@ module.exports = config => {
       ? mungeChartVisibility(config.chartVisibility)
       : defaultConfig.chartVisibility;
   config.ignoreStartsWith =
-    typeof config.path === 'string'
-      ? config.ignoreStartsWith
-      : defaultConfig.ignoreStartsWith;
+    prependWithSlash(
+      typeof config.ignoreStartsWith === 'string'
+        ? config.ignoreStartsWith
+        : defaultConfig.ignoreStartsWith
+    );
 
   config.healthChecks =
     Array.isArray(config.healthChecks)
       ? config.healthChecks
-      : defaultConfig.healthChecks
+      : defaultConfig.healthChecks;
+  config.healthChecks.forEach(healthCheck => {
+    if (healthCheck.path) {
+      healthCheck.path = prependWithSlash(healthCheck.path);
+    }
+  });
 
   return config;
 };

src/middleware-wrapper.js

@@ -22,6 +22,7 @@ const middlewareWrapper = config => {
     title: validatedConfig.title,
     port: validatedConfig.port,
     socketPath: validatedConfig.socketPath,
+    namespace: validatedConfig.namespace,
     bodyClasses,
     script: fs.readFileSync(path.join(__dirname, '/public/javascripts/app.js')),
     style: fs.readFileSync(path.join(__dirname, '/public/stylesheets/', validatedConfig.theme))

src/public/index.html

@@ -108,6 +108,7 @@ <h1>{{status}}</h1>
     <script>
       var port = '{{port}}';
       var socketPath = '{{socketPath}}';
+      var namespace = '{{namespace}}';
       {{{script}}}
     </script>
   </body>

src/public/javascripts/app.js

@@ -2,7 +2,7 @@
   eslint-disable no-plusplus, no-var, strict, vars-on-top, prefer-template,
   func-names, prefer-arrow-callback, no-loop-func
 */
-/* global Chart, location, document, port, socketPath, parseInt, io */
+/* global Chart, location, document, port, socketPath, namespace, parseInt, io */
 
 'use strict';
 
@@ -13,9 +13,9 @@ Chart.defaults.global.elements.line.backgroundColor = 'rgba(0,0,0,0)';
 Chart.defaults.global.elements.line.borderColor = 'rgba(0,0,0,0.9)';
 Chart.defaults.global.elements.line.borderWidth = 2;
 
-var socket = io(location.protocol + '//' + location.hostname + ':' + (port || location.port), {
+var socket = io(location.protocol + '//' + location.hostname + ':' + (port || location.port) + namespace, {
     path: socketPath,
-    transports: ["websocket"]
+    transports: ['websocket']
 });
 var defaultSpan = 0;
 var spans = [];