| 刘洪青 | 6266f99 | 2017-05-15 21:21:03 +0800 | [diff] [blame^] | 1 | <!--
|
| 2 | Licensed to the Apache Software Foundation (ASF) under one or more
|
| 3 | contributor license agreements. See the NOTICE file distributed with
|
| 4 | this work for additional information regarding copyright ownership.
|
| 5 | The ASF licenses this file to You under the Apache License, Version 2.0
|
| 6 | (the "License"); you may not use this file except in compliance with
|
| 7 | the License. You may obtain a copy of the License at
|
| 8 |
|
| 9 | http://www.apache.org/licenses/LICENSE-2.0
|
| 10 |
|
| 11 | Unless required by applicable law or agreed to in writing, software
|
| 12 | distributed under the License is distributed on an "AS IS" BASIS,
|
| 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
| 14 | See the License for the specific language governing permissions and
|
| 15 | limitations under the License.
|
| 16 | -->
|
| 17 | <!DOCTYPE html>
|
| 18 | <html>
|
| 19 | <head>
|
| 20 | <title>Apache Tomcat WebSocket Examples: Echo</title>
|
| 21 | <style type="text/css">
|
| 22 | #connect-container {
|
| 23 | float: left;
|
| 24 | width: 400px
|
| 25 | }
|
| 26 |
|
| 27 | #connect-container div {
|
| 28 | padding: 5px;
|
| 29 | }
|
| 30 |
|
| 31 | #console-container {
|
| 32 | float: left;
|
| 33 | margin-left: 15px;
|
| 34 | width: 400px;
|
| 35 | }
|
| 36 |
|
| 37 | #console {
|
| 38 | border: 1px solid #CCCCCC;
|
| 39 | border-right-color: #999999;
|
| 40 | border-bottom-color: #999999;
|
| 41 | height: 170px;
|
| 42 | overflow-y: scroll;
|
| 43 | padding: 5px;
|
| 44 | width: 100%;
|
| 45 | }
|
| 46 |
|
| 47 | #console p {
|
| 48 | padding: 0;
|
| 49 | margin: 0;
|
| 50 | }
|
| 51 | </style>
|
| 52 | <script type="text/javascript">
|
| 53 | var ws = null;
|
| 54 |
|
| 55 | function setConnected(connected) {
|
| 56 | document.getElementById('connect').disabled = connected;
|
| 57 | document.getElementById('disconnect').disabled = !connected;
|
| 58 | document.getElementById('echo').disabled = !connected;
|
| 59 | }
|
| 60 |
|
| 61 | function connect() {
|
| 62 | var target = document.getElementById('target').value;
|
| 63 | if (target == '') {
|
| 64 | alert('Please select server side connection implementation.');
|
| 65 | return;
|
| 66 | }
|
| 67 | if ('WebSocket' in window) {
|
| 68 | ws = new WebSocket(target);
|
| 69 | } else if ('MozWebSocket' in window) {
|
| 70 | ws = new MozWebSocket(target);
|
| 71 | } else {
|
| 72 | alert('WebSocket is not supported by this browser.');
|
| 73 | return;
|
| 74 | }
|
| 75 | ws.onopen = function () {
|
| 76 | setConnected(true);
|
| 77 | log('Info: WebSocket connection opened.');
|
| 78 | };
|
| 79 | ws.onmessage = function (event) {
|
| 80 | log('Received: ' + event.data);
|
| 81 | };
|
| 82 | ws.onclose = function () {
|
| 83 | setConnected(false);
|
| 84 | log('Info: WebSocket connection closed.');
|
| 85 | };
|
| 86 | }
|
| 87 |
|
| 88 | function disconnect() {
|
| 89 | if (ws != null) {
|
| 90 | ws.close();
|
| 91 | ws = null;
|
| 92 | }
|
| 93 | setConnected(false);
|
| 94 | }
|
| 95 |
|
| 96 | function echo() {
|
| 97 | if (ws != null) {
|
| 98 | var message = document.getElementById('message').value;
|
| 99 | log('Sent: ' + message);
|
| 100 | ws.send(message);
|
| 101 | } else {
|
| 102 | alert('WebSocket connection not established, please connect.');
|
| 103 | }
|
| 104 | }
|
| 105 |
|
| 106 | function updateTarget(target) {
|
| 107 | if (window.location.protocol == 'http:') {
|
| 108 | document.getElementById('target').value = 'ws://' + window.location.host + target;
|
| 109 | } else {
|
| 110 | document.getElementById('target').value = 'wss://' + window.location.host + target;
|
| 111 | }
|
| 112 | }
|
| 113 |
|
| 114 | function log(message) {
|
| 115 | var console = document.getElementById('console');
|
| 116 | var p = document.createElement('p');
|
| 117 | p.style.wordWrap = 'break-word';
|
| 118 | p.appendChild(document.createTextNode(message));
|
| 119 | console.appendChild(p);
|
| 120 | while (console.childNodes.length > 25) {
|
| 121 | console.removeChild(console.firstChild);
|
| 122 | }
|
| 123 | console.scrollTop = console.scrollHeight;
|
| 124 | }
|
| 125 | </script>
|
| 126 | </head>
|
| 127 | <body>
|
| 128 | <noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websockets rely on Javascript being enabled. Please enable
|
| 129 | Javascript and reload this page!</h2></noscript>
|
| 130 | <div>
|
| 131 | <div id="connect-container">
|
| 132 | <div>
|
| 133 | <span>Connect using:</span>
|
| 134 | <!-- echo example using streams on the server side -->
|
| 135 | <input id="radio1" type="radio" name="group1" value="/examples/websocket/tc7/echoStream"
|
| 136 | onclick="updateTarget(this.value);"> <label for="radio1">streams</label>
|
| 137 | <!-- echo example using messages on the server side -->
|
| 138 | <input id="radio2" type="radio" name="group1" value="/examples/websocket/tc7/echoMessage"
|
| 139 | onclick="updateTarget(this.value);"> <label for="radio2">messages</label>
|
| 140 | </div>
|
| 141 | <div>
|
| 142 | <input id="target" type="text" size="40" style="width: 350px"/>
|
| 143 | </div>
|
| 144 | <div>
|
| 145 | <button id="connect" onclick="connect();">Connect</button>
|
| 146 | <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
|
| 147 | </div>
|
| 148 | <div>
|
| 149 | <textarea id="message" style="width: 350px">Here is a message!</textarea>
|
| 150 | </div>
|
| 151 | <div>
|
| 152 | <button id="echo" onclick="echo();" disabled="disabled">Echo message</button>
|
| 153 | </div>
|
| 154 | </div>
|
| 155 | <div id="console-container">
|
| 156 | <div id="console"></div>
|
| 157 | </div>
|
| 158 | </div>
|
| 159 | </body>
|
| 160 | </html> |