aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2018-09-07 14:40:45 +1200
committerAnton Tananaev <anton.tananaev@gmail.com>2018-09-07 14:40:45 +1200
commit06c4ee387669b1ccb5aa3928fbaa7c3650bfb7fa (patch)
tree76b9320815b51c242513a036c1fd2fc37082d5c7 /modern
parent58b66d9a09d3128f96f8c42f0e271a2323581143 (diff)
downloadetbsa-traccar-web-06c4ee387669b1ccb5aa3928fbaa7c3650bfb7fa.tar.gz
etbsa-traccar-web-06c4ee387669b1ccb5aa3928fbaa7c3650bfb7fa.tar.bz2
etbsa-traccar-web-06c4ee387669b1ccb5aa3928fbaa7c3650bfb7fa.zip
Implement WebSocket connection
Diffstat (limited to 'modern')
-rw-r--r--modern/package.json7
-rw-r--r--modern/src/MainPage.js6
-rw-r--r--modern/src/SocketContoller.js30
3 files changed, 41 insertions, 2 deletions
diff --git a/modern/package.json b/modern/package.json
index 94822a6..0c1a1cb 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 eaf3e40..ce4c577 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 0000000..c07fcff
--- /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;