Made webclient aware of the server dropping (both websocket and AJAX). The server currently reacts to the websocket client dropping but not to the AJAX one (the latter forms ghost players)

evennia/web/webclient/static/webclient/css/webclient.css

@@ -29,11 +29,6 @@ a:hover, a:active { color: #ccc }
 strong {font-weight:normal;}
 
 div {margin:0px;}
-/* Base style for new messages in the main message area */
-/*.msg {
-  white-space: pre-wrap; }
-  padding: .5em .9em;} */
-  /*border-bottom: 1px dotted #222 } /*optional line between messages */
 
 /* Utility messages (green) */
 .sys { color: #0f0 }
@@ -45,7 +40,7 @@ div {margin:0px;}
 .out { color: #aaa }
 
 /* Error messages (red) */
-.err { color: #f00 }
+.err { color: #f00; }
 
 /* Prompt base (white) */
 .prompt {color: #fff }

evennia/web/webclient/static/webclient/js/evennia.js

@@ -195,20 +195,31 @@ An "emitter" object must have a function
     //
     var WebsocketConnection = function () {
         log("Trying websocket ...");
+        wsurl = "ws://blah";
+        var open = false;
         var websocket = new WebSocket(wsurl);
         // Handle Websocket open event
         websocket.onopen = function (event) {
+            open = true;
             Evennia.emit('connection_open', ["websocket"], event);
         };
         // Handle Websocket close event
         websocket.onclose = function (event) {
-            Evennia.emit('connection_close', ["websocket"], event);
+            if (open) {
+                // only emit if websocket was ever open at all
+                Evennia.emit('connection_close', ["websocket"], event);
+            }
+            open = false;
         };
         // Handle websocket errors
         websocket.onerror = function (event) {
-            Evennia.emit('connection_error', ["websocket"], event);
             if (websocket.readyState === websocket.CLOSED) {
                 log("Websocket failed. Falling back to Ajax...");
+                if (open) {
+                    // only emit if websocket was ever open at all.
+                    Evennia.emit('connection_error', ["websocket"], event);
+                }
+                open = false;
                 Evennia.connection = AjaxCometConnection();
             }
         };
@@ -232,6 +243,7 @@ An "emitter" object must have a function
             // tied to when the client window is closed). This
             // Makes use of a websocket-protocol specific instruction.
             websocket.send(JSON.stringify(["websocket_close", [], {}]));
+            open = false;
         }
         return websocket;
     };
@@ -264,7 +276,6 @@ An "emitter" object must have a function
 
         // Send Client -> Evennia. Called by Evennia.msg
         var msg = function(data) {
-            log("AJAX.msg:", data);
             $.ajax({type: "POST", url: "/webclientdata",
                    async: true, cache: false, timeout: 30000,
                    dataType: "json",
@@ -287,8 +298,8 @@ An "emitter" object must have a function
                     dataType: "json",
                     data: {mode: 'receive', 'suid': client_hash},
                     success: function(data) {
+                        log("ajax data received:", data);
                         Evennia.emit(data[0], data[1], data[2]);
-                        log("AJAX/COMET: Evennia->client", data);
                         poll(); // immiately start a new request
                     },
                     error: function(req, stat, err) {

evennia/web/webclient/static/webclient/js/webclient_gui.js

@@ -179,9 +179,10 @@ function doWindowResize() {
 // Handle text coming from the server
 function onText(args, kwargs) {
     // append message to previous ones, then scroll so latest is at
-    // the bottom.
+    // the bottom. Send 'cls' kwarg to modify the output class.
     var mwin = $("#messagewindow");
-    mwin.append("<div class='msg out'>" + args[0] + "</div>");
+    var cls = kwargs == null ? 'out' : kwargs['cls'];
+    mwin.append("<div class='" + cls + "'>" + args[0] + "</div>");
     mwin.animate({
         scrollTop: document.getElementById("messagewindow").scrollHeight
     }, 0);
@@ -191,7 +192,7 @@ function onText(args, kwargs) {
 function onPrompt(args, kwargs) {
     // show prompt
     $('#prompt')
-        .addClass("msg out")
+        .addClass("out")
         .html(args[0]);
     doWindowResize();
 }
@@ -199,9 +200,22 @@ function onPrompt(args, kwargs) {
 // Silences events we don't do anything with.
 function onSilence(cmdname, args, kwargs) {}
 
+// Handle the server connection closing
+function onConnectionClose(conn_name, evt) {
+    onText(["The connection was closed or lost."], {'cls': 'err'});
+}
+
+// Handle a connection error
+function onConnectionError(conn_name, evt) {
+    if (conn_name[0].lastIndexOf("AJAX/COMET", 0) === 0) {
+        // only display anything if the error is in AJAX/COMET
+        onText(["The connection was closed or lost."], {'cls': 'err'});
+    }
+}
+
 // Handle unrecognized commands from server
 function onDefault(cmdname, args, kwargs) {
-    mwin = $("#messagewindow");
+    var mwin = $("#messagewindow");
     mwin.append(
             "<div class='msg err'>"
             + "Error or Unhandled event:<br>"
@@ -240,7 +254,8 @@ $(document).ready(function() {
     Evennia.emitter.on("default", onDefault);
     // silence currently unused events
     Evennia.emitter.on("connection_open", onSilence);
-    Evennia.emitter.on("connection_close", onSilence);
+    Evennia.emitter.on("connection_close", onConnectionClose);
+    Evennia.emitter.on("connection_error", onConnectionError);
 
     // Handle pressing the send button
     $("#inputsend").bind("click", doSendText);