You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
3.8 KiB
141 lines
3.8 KiB
<!-- |
|
Licensed to the Apache Software Foundation (ASF) under one or more |
|
contributor license agreements. See the NOTICE file distributed with |
|
this work for additional information regarding copyright ownership. |
|
The ASF licenses this file to You under the Apache License, Version 2.0 |
|
(the "License"); you may not use this file except in compliance with |
|
the License. You may obtain a copy of the License at |
|
|
|
http://www.apache.org/licenses/LICENSE-2.0 |
|
|
|
Unless required by applicable law or agreed to in writing, software |
|
distributed under the License is distributed on an "AS IS" BASIS, |
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
See the License for the specific language governing permissions and |
|
limitations under the License. |
|
--> |
|
|
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>WebSocket Examples: Reverse</title> |
|
<style type="text/css"> |
|
#connect-container { |
|
float: left; |
|
width: 400px |
|
} |
|
|
|
#connect-container div { |
|
padding: 5px; |
|
} |
|
|
|
#console-container { |
|
float: left; |
|
margin-left: 15px; |
|
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('reverse').disabled = !connected; |
|
} |
|
|
|
function connect() { |
|
var target = document.getElementById('target').value; |
|
ws = new WebSocket(target); |
|
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 updateTarget() { |
|
if (window.location.protocol == 'http:') { |
|
document.getElementById('target').value = 'ws://' + window.location.host + document.getElementById('target').value; |
|
} else { |
|
document.getElementById('target').value = 'wss://' + window.location.host + document.getElementById('target').value; |
|
} |
|
} |
|
|
|
function disconnect() { |
|
if (ws != null) { |
|
ws.close(); |
|
ws = null; |
|
} |
|
setConnected(false); |
|
} |
|
|
|
function reverse() { |
|
if (ws != null) { |
|
var message = document.getElementById('message').value; |
|
log('Sent: ' + message); |
|
ws.send(message); |
|
} else { |
|
alert('WebSocket connection not established, please connect.'); |
|
} |
|
} |
|
|
|
function log(message) { |
|
var console = document.getElementById('console'); |
|
var p = document.createElement('p'); |
|
p.style.wordWrap = 'break-word'; |
|
p.appendChild(document.createTextNode(message)); |
|
console.appendChild(p); |
|
while (console.childNodes.length > 25) { |
|
console.removeChild(console.firstChild); |
|
} |
|
console.scrollTop = console.scrollHeight; |
|
} |
|
</script> |
|
</head> |
|
<body onload="updateTarget()"> |
|
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websockets rely on Javascript being enabled. Please enable |
|
Javascript and reload this page!</h2></noscript> |
|
<div> |
|
<div id="connect-container"> |
|
<div> |
|
<input id="target" type="text" size="40" style="width: 350px" value="/reverse"/> |
|
</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="reverse" onclick="reverse();" disabled="disabled">Reverse message</button> |
|
</div> |
|
</div> |
|
<div id="console-container"> |
|
<div id="console"></div> |
|
</div> |
|
</div> |
|
</body> |
|
</html>
|
|
|