diff options
Diffstat (limited to 'examples/websocket/priv/index.html')
-rw-r--r-- | examples/websocket/priv/index.html | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/examples/websocket/priv/index.html b/examples/websocket/priv/index.html new file mode 100644 index 0000000..5bc7f15 --- /dev/null +++ b/examples/websocket/priv/index.html @@ -0,0 +1,112 @@ +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> + <title>Websocket client</title> + <script src="/static/jquery.min.js"></script> + <script type="text/javascript"> + + var websocket; + $(document).ready(init); + + function init() { + if(!("WebSocket" in window)){ + $('#status').append('<p><span style="color: red;">websockets are not supported </span></p>'); + $("#navigation").hide(); + } else { + $('#status').append('<p><span style="color: green;">websockets are supported </span></p>'); + connect(); + }; + $("#connected").hide(); + $("#content").hide(); + }; + + function connect() + { + wsHost = $("#server").val() + websocket = new WebSocket(wsHost); + showScreen('<b>Connecting to: ' + wsHost + '</b>'); + websocket.onopen = function(evt) { onOpen(evt) }; + websocket.onclose = function(evt) { onClose(evt) }; + websocket.onmessage = function(evt) { onMessage(evt) }; + websocket.onerror = function(evt) { onError(evt) }; + }; + + function disconnect() { + websocket.close(); + }; + + function toggle_connection(){ + if(websocket.readyState == websocket.OPEN){ + disconnect(); + } else { + connect(); + }; + }; + + function sendTxt() { + if(websocket.readyState == websocket.OPEN){ + txt = $("#send_txt").val(); + websocket.send(txt); + showScreen('sending: ' + txt); + } else { + showScreen('websocket is not connected'); + }; + }; + + function onOpen(evt) { + showScreen('<span style="color: green;">CONNECTED </span>'); + $("#connected").fadeIn('slow'); + $("#content").fadeIn('slow'); + }; + + function onClose(evt) { + showScreen('<span style="color: red;">DISCONNECTED </span>'); + }; + + function onMessage(evt) { + showScreen('<span style="color: blue;">RESPONSE: ' + evt.data+ '</span>'); + }; + + function onError(evt) { + showScreen('<span style="color: red;">ERROR: ' + evt.data+ '</span>'); + }; + + function showScreen(txt) { + $('#output').prepend('<p>' + txt + '</p>'); + }; + + function clearScreen() + { + $('#output').html(""); + }; + </script> + </head> + + <body> + <div id="header"> + <h1>Websocket client</h1> + <div id="status"></div> + </div> + + + <div id="navigation"> + + <p id="connecting"> + <input type='text' id="server" value="ws://localhost:8080/websocket"></input> + <button type="button" onclick="toggle_connection()">connection</button> + </p> + <div id="connected"> + <p> + <input type='text' id="send_txt" value=></input> + <button type="button" onclick="sendTxt();">send</button> + </p> + </div> + + <div id="content"> + <button id="clear" onclick="clearScreen()" >Clear text</button> + <div id="output"></div> + </div> + + </div> + </body> +</html> |