Fixed printer status with socket

rjfc · Nov 26, 2019 · 64f99ba · 64f99ba
1 parent 26c3c0b
commit 64f99ba
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 29 deletions.
diff --git a/app.js b/app.js
@@ -324,6 +324,13 @@ io.on("connection", socket => {
           };
           io.sockets.emit("printer stats", printerStats);
       });
+
+
+  });
+
+  socket.on("get printer status", () => {
+      // Change so this fires on status change (not asking every x seconds)
+      io.sockets.emit("printer status", portStatus);
   });
 
   //A special namespace "disconnect" for when a client disconnects

diff --git a/client/src/App.js b/client/src/App.js
@@ -1,16 +1,26 @@
 import React, { Component }  from 'react';
 import './App.css';
 import Home from './Home.js';
+import socketIOClient from "socket.io-client";
 
 class App extends Component {
     state = {
-        portStatusResponse: '',
+        response: 0,
+        endpoint: "https://10.36.23.89:5000/", //can change to https://127.0.0.1:5000  to run on local machine,
+        printerStatus: '',
         timeElapsedResponse: '',
         hotendTemperatureResponse: '',
         currentPositionResponse: ''
     };
 
     componentDidMount() {
+        const {endpoint} = this.state;
+        //Very simply connect to the socket
+        const socket = socketIOClient(endpoint);
+        setInterval(async () => {
+            socket.emit("get printer status");
+        });
+        socket.on("printer status", data => this.setState({printerStatus: data}));
         /*try {
             setInterval(async () => {
                 this.getPortStatus()
@@ -33,45 +43,21 @@ class App extends Component {
 
     }
 
-    getPortStatus = async () => {
+    /*getPortStatus = async () => {
         const response = await fetch('/port/status');
         const body = await response.json();
         if (response.status !== 200) throw Error(body.message);
 
         return body;
-    };
-
-    getTimeElapsed = async () => {
-        const response = await fetch('/stats/timeElapsed');
-        const body = await response.json();
-        if (response.status !== 200) throw Error(body.message);
-
-        return body;
-    };
-
-    getHotendTemperature = async () => {
-        const response = await fetch('/stats/hotendTemperature');
-        const body = await response.json();
-        if (response.status !== 200) throw Error(body.message);
-
-        return body;
-    };
-
-    getCurrentPosition = async () => {
-        const response = await fetch('/stats/currentPosition');
-        const body = await response.json();
-        if (response.status !== 200) throw Error(body.message);
-
-        return body;
-    };
-
+    };*/
 
     render() {
         return (
             <div className="App">
                 <Home button1Text = {"PRINTER STATISTICS"}
                       button2Text = {"SEARCH 3D MODELS"}
-                      placeholderText = {"Search 3D models"}>
+                      placeholderText = {"Search 3D models"}
+                      portStatus = {this.state.printerStatus}>
                 </Home>
 
             </div>