1
1
( function ( ) {
2
- document . addEventListener ( "DOMContentLoaded" , function ( ) {
2
+ document . addEventListener ( "DOMContentLoaded" , ( ) => {
3
3
4
4
const elLog = document . getElementById ( 'log' ) ;
5
5
const elStatus = document . getElementById ( 'status' ) ;
6
6
const elSend = document . getElementById ( 'send' ) ;
7
7
const elAction = document . getElementById ( 'action' ) ;
8
8
const elData = document . getElementById ( 'data' ) ;
9
9
10
+ /**
11
+ * Add a new log message.
12
+ * @param {string } msg - The message to add.
13
+ */
10
14
const log = ( msg ) => {
11
- return elLog . insertAdjacentHTML ( 'afterbegin' , `${ msg } <br />` ) ;
15
+ elLog . insertAdjacentHTML ( 'afterbegin' , `${ msg } <br />` ) ;
12
16
} ;
13
17
18
+ // Connect to server
14
19
let socket = null ;
15
20
let serverUrl = 'ws://127.0.0.1:8000/demo' ;
16
21
if ( window . MozWebSocket ) {
19
24
socket = new WebSocket ( serverUrl ) ;
20
25
}
21
26
socket . binaryType = 'blob' ;
27
+
28
+ /**
29
+ * Callen when connected to websocket server.
30
+ * @param {Object } msg
31
+ */
22
32
socket . onopen = ( msg ) => {
23
33
elStatus . classList . remove ( 'offline' ) ;
24
34
elStatus . classList . add ( 'online' ) ;
25
- return elStatus . innerText = 'connected' ;
35
+ elStatus . innerText = 'connected' ;
26
36
} ;
27
37
38
+ /**
39
+ * Called when receiving a message from websocket server.
40
+ * @param {Object } msg
41
+ */
28
42
socket . onmessage = ( msg ) => {
29
43
let response = JSON . parse ( msg . data ) ;
30
44
log ( `Action: ${ response . action } ` ) ;
31
- return log ( `Data: ${ response . data } ` ) ;
45
+ log ( `Data: ${ response . data } ` ) ;
32
46
} ;
33
47
48
+ /**
49
+ * Called when disconnected from websocket server.
50
+ * @param {Object } msg
51
+ */
34
52
socket . onclose = ( msg ) => {
35
53
elStatus . classList . remove ( 'online' ) ;
36
54
elStatus . classList . add ( 'offline' ) ;
37
- return elStatus . innerText = 'disconnected' ;
55
+ elStatus . innerText = 'disconnected' ;
38
56
} ;
39
57
58
+ /**
59
+ * Adds event listener to the status indicator.
60
+ */
40
61
elStatus . addEventListener ( 'click' , ( ) => {
41
- return socket . close ( ) ;
62
+ socket . close ( ) ;
42
63
} ) ;
43
64
65
+ /**
66
+ * Adds event listener to the send button.
67
+ */
44
68
elSend . addEventListener ( 'click' , ( ) => {
45
69
let payload = {
46
70
action : elAction . value ,
47
71
data : elData . value
48
72
} ;
49
- return socket . send ( JSON . stringify ( payload ) ) ;
73
+ socket . send ( JSON . stringify ( payload ) ) ;
50
74
} ) ;
51
-
52
75
} ) ;
53
-
54
76
} ) . call ( ) ;
0 commit comments