chore: Better logging

client/src/Sockets.vue

@@ -2,7 +2,9 @@
     <div>
         <p v-if="isConnected">We're connected to the server!</p>
         <p v-if="!isConnected">We're not connected yet...</p>
-        <p>Message from server: "{{socketMessage}}"</p>
+        <div v-if="socketMessage != null">
+            <p>Message from server: "{{socketMessage}}"</p>
+        </div>
         <button @click="pingServer()">Ping Server</button>
         <button @click="logOn()">LogOn</button>
         <button @click="logOff()">LogOff</button>
@@ -14,7 +16,7 @@
         data() {
             return {
                 isConnected: false,
-                socketMessage: 'NO_MESSAGE_YET'
+                socketMessage: null
             }
         },
 
@@ -41,14 +43,17 @@
         methods: {
             pingServer() {
                 // Send the "pingServer" event to the server.
-                this.$socket.emit('pingServer', 'PING!');
-                console.log("Ping sent!");
+                if (this.isConnected) {
+                    this.$socket.emit('pingServer', 'PING!');
+                    console.log("Ping sent!");
+                }
             },
             logOn() {
                 this.$socket.onconnect();
             },
             logOff() {
                 this.$socket.ondisconnect();
+                this.socketMessage = null;
             }
         }
     }

client/src/components/Game.vue

+<template>
+    <div class="hello">
+        <h1>Game on!</h1>
+        <h2>{{ msg }}</h2>
+        <button @click="increment">+</button>
+        <button @click="decrement">-</button>
+    </div>
+</template>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+    h1 {
+        margin: 40px 0 0;
+    }
+
+    a {
+        color: #42b983;
+    }
+</style>

server/ws.py

@@ -9,21 +9,21 @@ sio = socketio.AsyncServer(
 
 @sio.event
 def connect(sid, environ):
-    print("connect ", sid, environ)
+    print("[WS] Connect ", sid, environ)
 
 
 @sio.event
 async def chat_message(sid, data):
-    print("message ", data)
+    print("[WS] Message ", data)
     await sio.emit('reply', room=sid)
 
 
 @sio.on("pingServer")
 async def ping_server(sid, data):
-    print("Ping received:", data)
+    print("[WS] Ping received:", data)
     await sio.emit('messageChannel', "PONG")
 
 
 @sio.event
 def disconnect(sid):
-    print('disconnect ', sid)
+    print('[WS] Disconnect ', sid)