Browse Source

Add high-level KeepAlive, small style changes

parent
commit
d7464ac8af
7 changed files with 54 additions and 10 deletions
  1. 4
    1
      API.md
  2. 6
    0
      CHANGELOG.md
  3. 1
    1
      README.md
  4. 8
    0
      backend/serverManager.js
  5. 25
    5
      frontend/src/App.js
  6. 8
    2
      frontend/src/index.css
  7. 2
    1
      frontend/src/index.js

+ 4
- 1
API.md View File

@@ -1,4 +1,4 @@
1
-# afu-group-trainer WebSocket API 0.2.1
1
+# AFU group trainer WebSocket API 0.3.0
2 2
 
3 3
 ## From server
4 4
 
@@ -62,6 +62,9 @@
62 62
         
63 63
     Error:
64 64
         message: String
65
+    
66
+    KeepAlive:
67
+        next: Int
65 68
 
66 69
 ## From user
67 70
 

+ 6
- 0
CHANGELOG.md View File

@@ -1,6 +1,12 @@
1 1
 # Changelog
2 2
 
3 3
 ## Public versions
4
+### 0.3.0 (2019-01-19)
5
+- Configuration options in separate files
6
+- Headers in search results
7
+- KeepAlive packets for client
8
+- Various style fixes
9
+
4 10
 ### 0.2.1 (2019-01-16)
5 11
 - Fix TLS configuration
6 12
 - Improve responsive design

+ 1
- 1
README.md View File

@@ -28,7 +28,7 @@ Im Ordner `backend` muss die `config.js`-Datei angepasst werden. Hier können ei
28 28
 - `config.websocketPort`: Hier den offenen TCP-Port eintragen
29 29
 - `config.tlsConfig`: Hier kann mit `useTLS` auf `true` die TLS-Verschlüsselung eingeschaltet werden. Wenn sie eingeschaltet ist, müssen die Variablen `cert` und `key` mit Dateinamen befüllt werden. Am Beispiel Uberspace mit Let's Encrypt wäre das `cert` auf `/home/BENUTZER/.config/letsencrypt/live/DOMAIN/cert.pem` und `key` auf `/home/BENUTZER/.config/letsencrypt/live/DOMAIN/privkey.pem`.
30 30
 - `config.users`: Ein Array von Objekten mit `username` und `password` Schlüsseln. Das sind die Dozenten-Logins.
31
-- `config.pingTest`: Der Intervall in Millisekunden, in denen über den WebSocket ein Ping-Paket geschickt wird. Wird verwendet, um kaputte Verbindungen zuverlässig zu trennen. Empfohlen wird ein Wert von 20 Sekunden (20000), maximal sollten 60 Sekunden (60000) eingetragen werden.
31
+- `config.pingTest`: Der Intervall in Millisekunden, in denen über den WebSocket ein Ping-Paket geschickt wird. Wird verwendet, um kaputte Verbindungen zuverlässig zu trennen. Empfohlen wird ein Wert von 20 Sekunden (20000), maximal sollten 60 Sekunden (60000) eingetragen werden. Ein zu kleiner Wert führt zu Problemen! Hier sollten als absolute Untergrenze 10 Sekunden (10000) eingetragen werden.
32 32
 - `config.debug`: Aktiviert Debugausgaben. Im Produktivsystem i.d.R. nicht erforderlich.
33 33
 - `config.questions`: Die Fragenkataloge, die geladen werden sollen. I.d.R. ist eine Anpassung nicht erforderlich.
34 34
 

+ 8
- 0
backend/serverManager.js View File

@@ -60,6 +60,14 @@ let ServerManager = function (config) {
60 60
 
61 61
                 ws.isAlive = false;
62 62
                 ws.ping(noop);
63
+
64
+                if (ws.readyState === WebSocket.OPEN) {
65
+                    ws.send(JSON.stringify({
66
+                        KeepAlive: {
67
+                            next: 2 * config.pingTest,
68
+                        }
69
+                    }));
70
+                }
63 71
             }.bind(this));
64 72
         }.bind(this), config.pingTest);
65 73
     }

+ 25
- 5
frontend/src/App.js View File

@@ -60,7 +60,8 @@ class App extends Component {
60 60
             questionProgress: {
61 61
                 remainingQuestions: 0,
62 62
                 initialQuestionLength: 0,
63
-            }
63
+            },
64
+            nextKeepAliveTimeout: null,
64 65
         };
65 66
 
66 67
         let app = this;
@@ -89,7 +90,9 @@ class App extends Component {
89 90
         };
90 91
 
91 92
         socket.onmessage = function (e) {
92
-            console.log("Received: " + e.data);
93
+            if (!app.props.release) {
94
+                console.log("Received: " + e.data);
95
+            }
93 96
             app.parseMessage(app, e.data);
94 97
         };
95 98
     }
@@ -192,6 +195,13 @@ class App extends Component {
192 195
         };
193 196
     }
194 197
 
198
+    timeout() {
199
+        this.setState({
200
+            mode: AppModes.ERROR,
201
+            errorMessage: "Die Verbindung zum Server ist abgebrochen."
202
+        });
203
+    }
204
+
195 205
     parseMessage(app, msg) {
196 206
         let data = JSON.parse(msg);
197 207
         if (data.RoomList) {
@@ -299,11 +309,21 @@ class App extends Component {
299 309
                     membersTotal: data.AdminRoomStatus.total,
300 310
                 },
301 311
             })
312
+        } else if (data.KeepAlive) {
313
+            let next = data.KeepAlive.next;
314
+
315
+            if (this.state.nextKeepAliveTimeout) {
316
+                clearTimeout(this.state.nextKeepAliveTimeout);
317
+            }
318
+
319
+            this.setState({
320
+                nextKeepAliveTimeout: setTimeout(this.timeout.bind(this), next)
321
+            });
302 322
         } else {
303 323
             app.setState({
304 324
                 mode: AppModes.ERROR,
305 325
                 errorMessage: "Unbekannte Nachricht vom Server erhalten"
306
-            })
326
+            });
307 327
         }
308 328
     }
309 329
 
@@ -410,8 +430,8 @@ class App extends Component {
410 430
                                  questionDatabase={this.state.questionDatabase}
411 431
                                  onCreateRoom={this.createRoomRequest.bind(this)}
412 432
                                  roomMaster={this.state.roomMaster} questionProgress={this.state.questionProgress}/>
413
-                    <div style={{height: "10em"}}/>
414
-                    <AppFooter version={"0.2.1"} footerLink={this.props.footerLink}/>
433
+                    <div style={{height: "5em"}}/>
434
+                    <AppFooter version={"0.3.0"} footerLink={this.props.footerLink}/>
415 435
                 </MathJax.Provider>
416 436
             </div>
417 437
         );

+ 8
- 2
frontend/src/index.css View File

@@ -19,8 +19,14 @@ footer {
19 19
 }
20 20
 
21 21
 #footerList {
22
-    padding: 0.1cm 0.2cm 0.1cm 0.1cm;
23
-    background-color: #CCCCCC;
22
+    padding: 0.1cm 0.2cm 0.1cm 0.2cm;
23
+    background-color: black;
24
+    color: white;
25
+    opacity: 0.75;
26
+}
27
+
28
+#footerList:hover {
29
+    opacity: 1;
24 30
 }
25 31
 
26 32
 .hidden {

+ 2
- 1
frontend/src/index.js View File

@@ -18,4 +18,5 @@ if (!config.webSocketUrl) {
18 18
 }
19 19
 
20 20
 ReactDOM.render(<App socketUrl={config.webSocketUrl} mathJaxProvider={config.mathJaxProvider}
21
-                     footerLink={config.footerLink} color="green"/>, document.getElementById("root"));
21
+                     footerLink={config.footerLink} release={config.release}
22
+                     color="blue"/>, document.getElementById("root"));

Loading…
Cancel
Save