dashboard: prevent state update on every reconnection

This commit is contained in:
Kurkó Mihály 2018-01-09 13:04:00 +02:00
parent 8cfb146d31
commit cb37e3a4a4
3 changed files with 15 additions and 19 deletions

View file

@ -26891,19 +26891,19 @@ var _bundleJs = []byte((((((((((`!function(modules) {
function Dashboard(props) {
_classCallCheck(this, Dashboard);
var _this = _possibleConstructorReturn(this, (Dashboard.__proto__ || Object.getPrototypeOf(Dashboard)).call(this, props));
return _this.connect = function() {
return _this.reconnect = function() {
var server = new WebSocket(("https:" === window.location.protocol ? "wss://" : "ws://") + window.location.host + "/api");
server.onmessage = function(event) {
server.onopen = function() {
_this.setState({
content: defaultContent,
shouldUpdate: {}
});
}, server.onmessage = function(event) {
var msg = JSON.parse(event.data);
msg && _this.update(msg);
}, server.onclose = function() {
setTimeout(_this.reconnect, 3e3);
};
}, _this.reconnect = function() {
_this.setState({
content: defaultContent,
shouldUpdate: {}
}), _this.connect();
}, _this.update = function(msg) {
_this.setState(function(prevState) {
return {
@ -26935,7 +26935,7 @@ var _bundleJs = []byte((((((((((`!function(modules) {
return _inherits(Dashboard, _Component), _createClass(Dashboard, [ {
key: "componentDidMount",
value: function() {
this.connect();
this.reconnect();
}
}, {
key: "render",

View file

@ -158,15 +158,18 @@ class Dashboard extends Component<Props, State> {
// componentDidMount initiates the establishment of the first websocket connection after the component is rendered.
componentDidMount() {
this.connect();
this.reconnect();
}
// connect establishes a websocket connection with the server, listens for incoming messages
// reconnect establishes a websocket connection with the server, listens for incoming messages
// and tries to reconnect on connection loss.
connect = () => {
reconnect = () => {
const server = new WebSocket(`${((window.location.protocol === 'https:') ? 'wss://' : 'ws://') + window.location.host}/api`);
server.onopen = () => {
this.setState({content: defaultContent, shouldUpdate: {}});
};
server.onmessage = (event) => {
const msg: Content = JSON.parse(event.data);
const msg: $Shape<Content> = JSON.parse(event.data);
if (!msg) {
return;
}
@ -177,12 +180,6 @@ class Dashboard extends Component<Props, State> {
};
};
// reconnect clears the state before the connection establishment.
reconnect = () => {
this.setState({content: defaultContent, shouldUpdate: {}});
this.connect();
};
// update updates the content corresponding to the incoming message.
update = (msg: $Shape<Content>) => {
this.setState(prevState => ({

View file

@ -27,7 +27,6 @@
"material-ui": "^1.0.0-beta.24",
"material-ui-icons": "^1.0.0-beta.17",
"path": "^0.12.7",
"ramda": "^0.25.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-fa": "^5.0.0",