Mirrors/libwebsockets
1
0
Fork 0
mirror of https://github.com/warmcat/libwebsockets.git synced 2025-03-09 00:00:04 +01:00
Code Issues Releases Wiki Activity

plugins-dim-webpage-when-connection-lost

Browse source
This commit is contained in:
Andy Green 2016-07-13 08:45:22 +08:00
parent 722cc4a366
commit 2671b7469a
5 changed files with 37 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
README.coding.md
View file

@ -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'});

3
plugins/generic-sessions/assets/index.html
View file

@ -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>

5
plugins/server-status.html
View file

@ -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);

3
test-server/test-server-http.c
View file

@ -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;
}

5
test-server/test.html
View file

@ -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);