projects / platform / upstream / libwebsockets.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 722cc4a)
plugins-dim-webpage-when-connection-lost
authorAndy Green <andy@warmcat.com>
Wed, 13 Jul 2016 00:45:22 +0000 (08:45 +0800)
committerAndy Green <andy@warmcat.com>
Thu, 14 Jul 2016 00:57:28 +0000 (08:57 +0800)
README.coding.md patch | blob | history
plugins/generic-sessions/assets/index.html patch | blob | history
plugins/server-status.html patch | blob | history
test-server/test-server-http.c patch | blob | history
test-server/test.html patch | blob | history

diff --git a/README.coding.md b/README.coding.md
index 7a85e33..b4fc811 100644 (file)
--- a/README.coding.md
+++ b/README.coding.md
@@ -672,3 +672,25 @@ the protocol struct.
 This allocation is only deleted / replaced when the connection accesses a
 URL region with a different protocol (or the default protocols[0] if no
 CALLBACK area matches it).
+
+@section dim Dimming webpage when connection lost
+
+The lws test plugins' html provides useful feedback on the webpage about if it
+is still connected to the server, by greying out the page if not.  You can
+also add this to your own html easily
+
+ - include lws-common.js from your HEAD section
+ 
+   <script src="/lws-common.js"></script>
+   
+ - dim the page during initialization, in a script section on your page
+ 
+   lws_gray_out(true,{'zindex':'499'});
+   
+ - in your ws onOpen(), remove the dimming
+ 
+   lws_gray_out(false);
+   
+ - in your ws onClose(), reapply the dimming
+ 
+   lws_gray_out(true,{'zindex':'499'});
diff --git a/plugins/generic-sessions/assets/index.html b/plugins/generic-sessions/assets/index.html
index d370f9d..f0703c0 100644 (file)
--- a/plugins/generic-sessions/assets/index.html
+++ b/plugins/generic-sessions/assets/index.html
@@ -1,5 +1,6 @@
 <html>
  <head>
+  <script src="/lws-common.js"></script>
   <script src="lwsgs.js"></script>
   <style>
        .body { font-size: 12 }
@@ -21,7 +22,7 @@
        <img src="lwsgs-logo.png">
       </td>
       <td style="vertical-align:top;float:right">
-       <div id=lwsgs style="text-align:right;background-color: rgba(255, 255, 255, 0.8);"></div>
+       <div id=lwsgs style="zIndex: 1000;text-align:right;background-color: rgba(255, 255, 255, 0.8);"></div>
       </td>
      </tr>
      
diff --git a/plugins/server-status.html b/plugins/server-status.html
index 5a299c8..155287d 100644 (file)
--- a/plugins/server-status.html
+++ b/plugins/server-status.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
  <meta charset=utf-8 http-equiv="Content-Language" content="en"/>
+ <script src="/lws-common.js"></script>
  <title>LWS Server Status</title>
 <style type="text/css">
        span.title { font-size:18pt; font: Arial; font-weight:normal;
@@ -121,6 +122,8 @@
 
 <script>
 
+lws_gray_out(true,{'zindex':'499'});
+
 /*
  * We display untrusted stuff in html context... reject anything
  * that has HTML stuff in it
@@ -193,6 +196,7 @@ function get_appropriate_ws_url()
        try {
                socket_status.onopen = function() {
                        document.getElementById("title").innerHTML = "Server Status (Active)";
+                       lws_gray_out(false);
                }
 
                socket_status.onmessage =function got_packet(msg) {
@@ -286,6 +290,7 @@ function get_appropriate_ws_url()
 
                socket_status.onclose = function(){
                        document.getElementById("title").innerHTML = "Server Status (Disconnected)";
+                       lws_gray_out(true,{'zindex':'499'});
                }
        } catch(exception) {
                alert('<p>Error' + exception);  
diff --git a/test-server/test-server-http.c b/test-server/test-server-http.c
index cdd136d..e15cef9 100644 (file)
--- a/test-server/test-server-http.c
+++ b/test-server/test-server-http.c
@@ -118,6 +118,9 @@ const char * get_mimetype(const char *file)
        if (!strcmp(&file[n - 4], ".css"))
                return "text/css";
 
+       if (!strcmp(&file[n - 3], ".js"))
+               return "text/javascript";
+
        return NULL;
 }
 
diff --git a/test-server/test.html b/test-server/test.html
index c7ae069..3c5a482 100644 (file)
--- a/test-server/test.html
+++ b/test-server/test.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
  <meta charset=utf-8 http-equiv="Content-Language" content="en"/>
+ <script src="/lws-common.js"></script>
  <title>Minimal Websocket test app</title>
 <style type="text/css">
        span.title { font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#000000; }
@@ -353,6 +354,8 @@ function san(s)
        return s;
 }
 
+lws_gray_out(true,{'zindex':'499'});
+
 /* BrowserDetect came from http://www.quirksmode.org/js/detect.html */
 
 var BrowserDetect = {
@@ -665,6 +668,7 @@ function ot_req_close() {
                        document.getElementById("wslm_status").innerHTML =
                                " <b>websocket connection opened</b><br>" +
                                san(socket_lm.extensions);
+                       lws_gray_out(false);
                } 
 
                socket_lm.onmessage =function got_packet(msg) {
@@ -693,6 +697,7 @@ function ot_req_close() {
                socket_lm.onclose = function(){
                        document.getElementById("wslm_statustd").style.backgroundColor = "#ff4040";
                        document.getElementById("wslm_status").textContent = " websocket connection CLOSED ";
+                       lws_gray_out(true,{'zindex':'499'});
                }
        } catch(exception) {
                alert('<p>Error' + exception);  
Domain: Network & Connectivity / Data Network;