websockets updates

2 files changed, 21 insertions, 5 deletions

diff --git a/public/js/main.js b/public/js/main.js
index 583d06f..0d68a6c 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -115,6 +115,9 @@ function initDOM(){
     domElems.buttonFileUpload = $('#button_fileupload')[0];
     domElems.body = $('body')[0];
     domElems.cnv = $('#bg')[0];
+    domElems.statusWS = $('#statusWS')[0];
+    domElems.statusWS.innerHTML = 'Connecting...';
+    domElems.statusWS.style.color = 'yellow';
     cnv = domElems.cnv; //for convenience
     //domElems.buttonFileUpload.enabled = false;
     domElems.buttonFileUpload.onclick = uploadFile;
@@ -222,21 +225,27 @@ function connectWebSocket(){
         socket.onerror = (err)=>{
             console.log('connection error');
             console.log(err);
+            domElems.statusWS.innerHTML = 'Connection error';
+            domElems.statusWS.style.color = 'red';
             //TODO $('').textContent = err;
         }
         socket.onclose = (err) => {
             console.log('disconnected');
             console.log(err);
+            domElems.statusWS.innerHTML = 'Disconnected';
+            domElems.statusWS.style.color = 'orange';
             //TODO $('').textContent = err;
         }
         socket.onopen = (err) => {
             log('connected');
+            domElems.statusWS.innerHTML = 'Connected';
+            domElems.statusWS.style.color = 'green';
             if (err) console.log(err);
             //TODO $('').textContent = 'Connected';
             socket.pingTimeout = 1000;
             socket.pingInterval = 500;
             setInterval(() => {
-                socket.send(JSON.stringify({action: 'update_pos', data: {pos: me, nick: myNickname}}));
+                send('update_pos', {pos: me, nick: myNickname});
             }, 100);
         }
         /*socket.addEventListener("open", (ev)=>{
@@ -250,11 +259,9 @@ function connectWebSocket(){
 
 
         socket.onmessage = (msg) => {
-            console.log(msg);
             try {
                 // The data is in the .data property of the message event
                 const m = JSON.parse(msg.data);
-                console.log('Parsed message:', m);
                 switch (m.action) {
                     case 'init':
                         myID = m.data;
@@ -271,7 +278,7 @@ function connectWebSocket(){
                 }
             } catch (error) {
                 console.error('Error parsing message:', error);
-                socket.send(JSON.stringify({ error: 'Invalid message format' }));
+                send('error', 'Invalid message format');
                 return;
             }      
         }
@@ -351,6 +358,15 @@ function handleMouseMove(e) {
     me = getMousePos(cnv, e);
 }
 
+function send(action, payload){
+    if (socket != null && socket.readyState === WebSocket.OPEN) {
+        try {
+            socket.send(JSON.stringify({action: action, data: payload}));
+        } catch (e) {
+            console.error('Error sending message:', e);
+        }
+    }
+}
 
 function log(msg, lvl=1){
     if (domElems.debugInfo){
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index f6fd3ad..0771532 100755
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -15,7 +15,7 @@
         </p>
         <div id = "site-status">
             <h6>Current Status</h6>
-            <p></p>
+            <div id = "statusWS"></div>
             <p>Number of friends connected: <b id = "numFriendsConnected"></b></p> <!-- show number of other connections to webserver -->
             <br>
             <h6>Who am I?</h6>