Implement WebSocket connection

3 files changed, 41 insertions, 2 deletions

diff --git a/modern/package.json b/modern/package.json
index 94822a62..0c1a1cbb 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -19,5 +19,10 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://localhost:8082"
+  "proxy": {
+    "/api": {
+      "target": "http://localhost:8082",
+      "ws": true
+    }
+  }
 }
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index eaf3e40c..ce4c5771 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -4,6 +4,8 @@ import MainToobar from './MainToolbar';
 import MainMap from './MainMap';
 import Drawer from '@material-ui/core/Drawer';
 import withStyles from '@material-ui/core/styles/withStyles';
+import SocketController from './SocketContoller';
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
 
 const styles = theme => ({
   root: {
@@ -64,9 +66,11 @@ class MainPage extends Component {
     } else {
       return (
         <div className={classes.root}>
+          <SocketController />
           <MainToobar history={this.props.history} />
           <div className={classes.content}>
             <Drawer
+              anchor={isWidthUp('sm', this.props.width) ? "left" : "bottom"}
               variant="permanent"
               classes={{ paper: classes.drawerPaper }}>
             </Drawer>
@@ -82,4 +86,4 @@ class MainPage extends Component {
   }
 }
 
-export default withStyles(styles)(MainPage);
+export default withWidth()(withStyles(styles)(MainPage));
diff --git a/modern/src/SocketContoller.js b/modern/src/SocketContoller.js
new file mode 100644
index 00000000..c07fcff0
--- /dev/null
+++ b/modern/src/SocketContoller.js
@@ -0,0 +1,30 @@
+import { Component } from 'react';
+
+class SocketController extends Component {
+  connectSocket() {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const socket = new WebSocket(protocol + '//' + window.location.host + '/api/socket');
+
+    socket.onclose = () => {
+      setTimeout(() => this.connectSocket(), 60 * 1000);
+    };
+
+    socket.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+      if (data.positions) {
+        // TODO update positions
+        console.log(data.positions);
+      }
+    }
+  }
+
+  componentDidMount() {
+    this.connectSocket();
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default SocketController;