You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@tomcat.apache.org by ma...@apache.org on 2012/03/02 14:57:11 UTC
svn commit: r1296207 - /tomcat/trunk/webapps/examples/websocket/echo.html
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