Attachment 28410 Details for Bug 51181 – Improved echo example

[patch] Improved echo example

Improved_echo_example_.patch (text/plain), 6.23 KB, created by Johno Crawford on 2012-03-02 12:53:06 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Johno Crawford

Created: 2012-03-02 12:53:06 UTC

Size: 6.23 KB

patch

obsolete

>Index: webapps/examples/websocket/echo.html
>IDEA additional info:
>Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
><+>UTF-8
>===================================================================
>--- webapps/examples/websocket/echo.html	(revision 1296108)
>+++ webapps/examples/websocket/echo.html	(revision )
>@@ -17,38 +17,141 @@
> <!DOCTYPE html>
> <html>
> <head>
>-<title>Apache Tomcat WebSocket Examples: Echo</title>
>+    <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">
>+    <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!");
>+        var ws = null;
>+
>+        function setConnected(connected) {
>+            document.getElementById('connect').disabled = connected;
>+            document.getElementById('disconnect').disabled = !connected;
>+            document.getElementById('echo').disabled = !connected;
>-    }
>+        }
>-    ws.onmessage = function(event) {
>-      alert("Received: " + event.data);
>+
>+        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() {
>+            ws.onclose = function () {
>-      alert("WebSocket connection closed.");
>+                setConnected(false);
>+                log('Info: WebSocket connection closed.');
>+            };
>-    }
>+        }
>-    // TODO: Extend with a text box for users to enter data
>+
>+        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 {
>+            } else {
>-    alert("WebSocket is not supported by this browser.");
>+                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>
>+    </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>
>+<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>
>+            
>+            <input id="radio1" type="radio" name="group1" value="/examples/websocket/echoStream"
>+                   onclick="updateTarget(this.value);"> <label for="radio1">streams</label>
>+            
>+            <input id="radio2" type="radio" name="group1" value="/examples/websocket/echoMessage"
>+                   onclick="updateTarget(this.value);"> <label for="radio2">messages</label>
>-</div>
>+        </div>
>-<div id="echoStreamMessage">
>-<a href="javascript:echo('ws://localhost:8080/examples/websocket/echoMessage')">
>-Start echo example using messages on the server side</a>
>+        <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

Actions: View | Diff

Attachments on bug 51181: 28264 | 28342 | 28396 | 28407 | 28408 | 28410 | 28411 | 28415 | 28416 | 28420 | 28426 | 28457