Merge pull request #5 from SoopSASM/feature/add-socket

Add simple socket for react and node-red server communication

.gitignore

@@ -1 +1,2 @@
 node_modules
+dashboard/dist

dashboard/dashboard.js

@@ -3,25 +3,55 @@ let initialized = false;
 module.exports = function (RED) {
   if (!initialized) {
     initialized = true;
-    init(RED.httpNode || RED.httpAdmin, RED.settings);
+    init(RED);
   }
 
   return {
-    testFunc,
+    emitState,
   };
 };
 
 const path = require("path");
+const socketio = require("socket.io");
 const serveStatic = require("serve-static");
 
-function init(app, settings) {
+let io = null;
+const dashboardState = {};
+
+function init(RED) {
+  const app = RED.httpNode || RED.httpAdmin;
+  const server = RED.server;
+
+  io = socketio(server);
+  initSocket(io);
+
+  // const settings = RED.settings;
   // const path = `${settings.httpNodeRoot}${settings.path}`;
   // app.use(path, serveStatic(path.join(__dirname, "/dist")));
 
   app.use("/dashboard", serveStatic(path.join(__dirname, "/dist")));
   console.log("react dashboard started at /dashboard");
 }
 
-function testFunc() {
-  return "test message";
+function initSocket(io) {
+  io.on("connection", (socket) => {
+    socket.emit("initial-value", dashboardState);
+  });
+}
+
+function emitState(state) {
+  const node_id = state.node_id;
+  state.time = Date.now();
+
+  if (dashboardState.hasOwnProperty(node_id)) {
+    dashboardState[node_id].push(state);
+  } else {
+    dashboardState[node_id] = [state];
+  }
+
+  emit(state);
+}
+
+function emit(state) {
+  io.emit("update-value", state);
 }

dashboard/nodes/lower-case.html

@@ -28,6 +28,16 @@
           },
         ],
       });
+
+      console.log("prepared");
+
+      RED.nodes.eachNode((node) => {
+        console.log(node);
+      });
+
+      RED.nodes.eachConfig((node) => {
+        console.log(node);
+      });
     },
   });
 </script>

dashboard/nodes/lower-case.js

@@ -4,9 +4,7 @@ module.exports = function (RED) {
   function LowerCaseNode(config) {
     const node = this;
     RED.nodes.createNode(node, config);
-
     node.on("input", function (msg, send, done) {
-      node.log("input has arrived " + dashboard.testFunc());
       send =
         send ||
         function () {
@@ -19,14 +17,7 @@ module.exports = function (RED) {
       if (done) done();
     });
 
-    node.on("close", function (removed, done) {
-      if (removed) {
-        node.log("This node has been disabled/deleted");
-      } else {
-        node.log("This node is being restarted");
-      }
-      done();
-    });
+    node.log("LowerCase Node created");
   }
 
   RED.nodes.registerType("lower-case", LowerCaseNode);

dashboard/nodes/test-node.html

@@ -1,7 +1,3 @@
-<script type="text/javascript">
-  const MY_CATEGORY = "common";
-</script>
-
 <script type="text/javascript">
   RED.nodes.registerType("test-node", {
     category: MY_CATEGORY,

dashboard/nodes/test-node.js

@@ -4,7 +4,7 @@ module.exports = function (RED) {
   function TestNode(config) {
     const node = this;
     RED.nodes.createNode(node, config);
-    console.log("Test Node created " + dashboard.testFunc());
+    node.log("Test Node created");
   }
 
   RED.nodes.registerType("test-node", TestNode);

dashboard/src/components/app.js

@@ -1,5 +1,21 @@
-import React from "react";
+import React, { useEffect } from "react";
 
-export default function App() {
-  return <div>Hello Dashboard App</div>;
-}
+import { initlaizeSocket, disconnectSocket } from "../utils/socket";
+
+const App = () => {
+  useEffect(() => {
+    initlaizeSocket();
+
+    return () => {
+      disconnectSocket();
+    };
+  }, []);
+
+  return (
+    <>
+      <div>Hello Dashboard</div>
+    </>
+  );
+};
+
+export default App;

dashboard/src/utils/socket.js

@@ -0,0 +1,23 @@
+import { io } from "socket.io-client";
+
+let socket;
+
+export const initlaizeSocket = () => {
+  socket = io();
+
+  socket.on("connect", () => {
+    console.info(`socket connected : ${socket.id}`);
+  });
+
+  socket.on("initial-value", (state) => {
+    console.log(state);
+  });
+
+  socket.on("update-value", (state) => {
+    console.log(state);
+  });
+};
+
+export const disconnectSocket = () => {
+  socket.disconnect();
+};