diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2018-09-07 14:40:45 +1200 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2018-09-07 14:40:45 +1200 |
commit | 06c4ee387669b1ccb5aa3928fbaa7c3650bfb7fa (patch) | |
tree | 76b9320815b51c242513a036c1fd2fc37082d5c7 /modern | |
parent | 58b66d9a09d3128f96f8c42f0e271a2323581143 (diff) | |
download | etbsa-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.json | 7 | ||||
-rw-r--r-- | modern/src/MainPage.js | 6 | ||||
-rw-r--r-- | modern/src/SocketContoller.js | 30 |
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; |