tomcat-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ma...@apache.org
Subject svn commit: r1296207 - /tomcat/trunk/webapps/examples/websocket/echo.html
Date Fri, 02 Mar 2012 13:57:11 GMT
Author: markt
Date: Fri Mar  2 13:57:11 2012
New Revision: 1296207

URL: http://svn.apache.org/viewvc?rev=1296207&view=rev
Log:
Improve web front-end for the WebSocket examples.
Patch provided by Johno Crawford.

Modified:
    tomcat/trunk/webapps/examples/websocket/echo.html

Modified: tomcat/trunk/webapps/examples/websocket/echo.html
URL: http://svn.apache.org/viewvc/tomcat/trunk/webapps/examples/websocket/echo.html?rev=1296207&r1=1296206&r2=1296207&view=diff
==============================================================================
--- tomcat/trunk/webapps/examples/websocket/echo.html (original)
+++ tomcat/trunk/webapps/examples/websocket/echo.html Fri Mar  2 13:57:11 2012
@@ -17,38 +17,141 @@
 <!DOCTYPE html>
 <html>
 <head>
-<title>Apache Tomcat WebSocket Examples: Echo</title>
-<script type="text/javascript">
-function echo(target) {
-  if ("WebSocket" in window) {
-    // TODO: Can we use relative URLs?
-    var ws = new WebSocket(target);
-    ws.onopen = function() {
-      ws.send("Connection opened");
-      alert("WebSocket connection opened.");
-      ws.send("Here is a message!");
-    }
-    ws.onmessage = function(event) {
-      alert("Received: " + event.data);
-    }
-    ws.onclose = function() {
-      alert("WebSocket connection closed.");
-    }
-    // TODO: Extend with a text box for users to enter data
-  } else {
-    alert("WebSocket is not supported by this browser.");
-  }
-}
-</script>
+    <title>Apache Tomcat WebSocket Examples: Echo</title>
+    <style type="text/css">
+        #connect-container {
+            float: left;
+            width: 400px
+        }
+
+        #connect-container div {
+            padding: 5px;
+        }
+
+        #console-container {
+            float: left;
+            margin-left: 20px;
+            padding-left: 20px;
+            width: 400px;
+        }
+
+        #console {
+            border: 1px solid #CCCCCC;
+            border-right-color: #999999;
+            border-bottom-color: #999999;
+            height: 170px;
+            overflow-y: scroll;
+            padding: 5px;
+            width: 100%;
+        }
+
+        #console p {
+            padding: 0;
+            margin: 0;
+        }
+    </style>
+    <script type="text/javascript">
+        var ws = null;
+
+        function setConnected(connected) {
+            document.getElementById('connect').disabled = connected;
+            document.getElementById('disconnect').disabled = !connected;
+            document.getElementById('echo').disabled = !connected;
+        }
+
+        function connect() {
+            var target = document.getElementById('target').value;
+            if (target == '') {
+                alert('Please select server side connection implementation.');
+                return;
+            }
+            if ('WebSocket' in window) {
+                ws = new WebSocket(target);
+            } else if ('MozWebSocket' in window) {
+                ws = new MozWebSocket(target);
+            } else {
+                alert('WebSocket is not supported by this browser.');
+                return;
+            }
+            ws.onopen = function () {
+                setConnected(true);
+                log('Info: WebSocket connection opened.');
+            };
+            ws.onmessage = function (event) {
+                log('Received: ' + event.data);
+            };
+            ws.onclose = function () {
+                setConnected(false);
+                log('Info: WebSocket connection closed.');
+            };
+        }
+
+        function disconnect() {
+            if (ws != null) {
+                ws.close();
+                ws = null;
+            }
+            setConnected(false);
+        }
+
+        function echo() {
+            if (ws != null) {
+                var message = document.getElementById('message').value;
+                log('Sent: ' + message);
+                ws.send(message);
+            } else {
+                alert('WebSocket connection not established, please connect.');
+            }
+        }
+
+        function updateTarget(target) {
+            document.getElementById('target').value = 'ws://' + window.location.host + target;
+        }
+
+        function log(message) {
+            var console = document.getElementById('console');
+            var p = document.createElement('p');
+            p.style.wordWrap = 'break-word';
+            p.innerHTML = message;
+            console.appendChild(p);
+            while (console.childNodes.length > 25) {
+                console.removeChild(console.firstChild);
+            }
+            console.scrollTop = console.scrollHeight;
+        }
+    </script>
 </head>
 <body>
-<div id="echoStreamTest">
-<a href="javascript:echo('ws://localhost:8080/examples/websocket/echoStream')">
-Start echo example using streams on the server side</a>
-</div>
-<div id="echoStreamMessage">
-<a href="javascript:echo('ws://localhost:8080/examples/websocket/echoMessage')">
-Start echo example using messages on the server side</a>
+<noscript><h1>Seems your browser doesn't support Javascript! Websockets rely
on Javascript being enabled. Please enable
+    Javascript and reload this page!</h1></noscript>
+<div>
+    <div id="connect-container">
+        <div>
+            <span>Connect using:</span>
+            <!-- echo example using streams on the server side -->
+            <input id="radio1" type="radio" name="group1" value="/examples/websocket/echoStream"
+                   onclick="updateTarget(this.value);"> <label for="radio1">streams</label>
+            <!-- echo example using messages on the server side -->
+            <input id="radio2" type="radio" name="group1" value="/examples/websocket/echoMessage"
+                   onclick="updateTarget(this.value);"> <label for="radio2">messages</label>
+        </div>
+        <div>
+            <input id="target" type="text" size="40" style="width: 350px"/>
+        </div>
+        <div>
+            <button id="connect" onclick="connect();">Connect</button>
+            <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
+        </div>
+        <div>
+            <textarea id="message" style="width: 350px">Here is a message!</textarea>
+        </div>
+        <div>
+            <button id="echo" onclick="echo();" disabled="disabled">Echo message</button>
+        </div>
+    </div>
+    <div id="console-container">
+        <div id="console"></div>
+    </div>
 </div>
 </body>
 </html>
\ No newline at end of file



---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tomcat.apache.org
For additional commands, e-mail: dev-help@tomcat.apache.org


Mime
View raw message