366 lines
13 KiB
HTML
366 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title></title>
|
|
<style>
|
|
table {
|
|
border: 0
|
|
}
|
|
|
|
.commslog-data {
|
|
font-family: Consolas, Courier New, Courier, monospace;
|
|
}
|
|
|
|
.commslog-server {
|
|
background-color: red;
|
|
color: white
|
|
}
|
|
|
|
.commslog-client {
|
|
background-color: green;
|
|
color: white
|
|
}
|
|
</style>
|
|
|
|
<style type="text/css">
|
|
body {
|
|
background-repeat: no-repeat;
|
|
padding-top: 85px;
|
|
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
|
|
font-size: 0.9em;
|
|
line-height: 130%;
|
|
}
|
|
|
|
.selectBoxArrow {
|
|
margin-top: 1px;
|
|
float: left;
|
|
position: absolute;
|
|
right: 1px;
|
|
}
|
|
|
|
.selectBoxInput {
|
|
border: 0px;
|
|
padding-left: 1px;
|
|
height: 16px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 600px;
|
|
}
|
|
|
|
.selectBox {
|
|
border: 1px solid #7f9db9;
|
|
height: 20px;
|
|
}
|
|
|
|
.selectBoxOptionContainer {
|
|
position: absolute;
|
|
border: 1px solid #7f9db9;
|
|
height: 100px;
|
|
background-color: #FFF;
|
|
left: -1px;
|
|
top: 20px;
|
|
visibility: hidden;
|
|
overflow: auto;
|
|
}
|
|
|
|
.selectBoxAnOption {
|
|
font-family: arial;
|
|
font-size: 12px;
|
|
cursor: default;
|
|
margin: 1px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.selectBoxIframe {
|
|
position: absolute;
|
|
background-color: #FFF;
|
|
border: 0px;
|
|
z-index: 999;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
|
|
// Path to arrow images
|
|
var arrowImage = './images/select_arrow.gif'; // Regular arrow
|
|
var arrowImageOver = './images/select_arrow_over.gif'; // Mouse over
|
|
var arrowImageDown = './images/select_arrow_down.gif'; // Mouse down
|
|
|
|
var selectBoxIds = 0;
|
|
var currentlyOpenedOptionBox = false;
|
|
var editableSelect_activeArrow = false;
|
|
|
|
function selectBox_switchImageUrl() {
|
|
if (this.src.indexOf(arrowImage) >= 0) {
|
|
this.src = this.src.replace(arrowImage, arrowImageOver);
|
|
} else {
|
|
this.src = this.src.replace(arrowImageOver, arrowImage);
|
|
}
|
|
}
|
|
|
|
function selectBox_showOptions() {
|
|
if (editableSelect_activeArrow && editableSelect_activeArrow != this) {
|
|
editableSelect_activeArrow.src = arrowImage;
|
|
}
|
|
editableSelect_activeArrow = this;
|
|
|
|
var numId = this.id.replace(/[^\d]/g, '');
|
|
var optionDiv = document.getElementById('selectBoxOptions' + numId);
|
|
if (optionDiv.style.display == 'block') {
|
|
optionDiv.style.display = 'none';
|
|
if (navigator.userAgent.indexOf('MSIE') >= 0) document.getElementById('selectBoxIframe' + numId).style.display = 'none';
|
|
this.src = arrowImageOver;
|
|
} else {
|
|
optionDiv.style.display = 'block';
|
|
if (navigator.userAgent.indexOf('MSIE') >= 0) document.getElementById('selectBoxIframe' + numId).style.display = 'block';
|
|
this.src = arrowImageDown;
|
|
if (currentlyOpenedOptionBox && currentlyOpenedOptionBox != optionDiv) currentlyOpenedOptionBox.style.display = 'none';
|
|
currentlyOpenedOptionBox = optionDiv;
|
|
}
|
|
}
|
|
|
|
function selectOptionValue() {
|
|
var parentNode = this.parentNode.parentNode;
|
|
var textInput = parentNode.getElementsByTagName('INPUT')[0];
|
|
textInput.value = this.innerHTML;
|
|
this.parentNode.style.display = 'none';
|
|
document.getElementById('arrowSelectBox' + parentNode.id.replace(/[^\d]/g, '')).src = arrowImageOver;
|
|
|
|
if (navigator.userAgent.indexOf('MSIE') >= 0) document.getElementById('selectBoxIframe' + parentNode.id.replace(/[^\d]/g, '')).style.display = 'none';
|
|
|
|
}
|
|
|
|
var activeOption;
|
|
function highlightSelectBoxOption() {
|
|
if (this.style.backgroundColor == '#316AC5') {
|
|
this.style.backgroundColor = '';
|
|
this.style.color = '';
|
|
} else {
|
|
this.style.backgroundColor = '#316AC5';
|
|
this.style.color = '#FFF';
|
|
}
|
|
|
|
if (activeOption) {
|
|
activeOption.style.backgroundColor = '';
|
|
activeOption.style.color = '';
|
|
}
|
|
activeOption = this;
|
|
}
|
|
|
|
function createEditableSelect(dest) {
|
|
dest.className = 'selectBoxInput';
|
|
var div = document.createElement('DIV');
|
|
div.style.styleFloat = 'left';
|
|
div.style.width = dest.offsetWidth + 16 + 'px';
|
|
div.style.position = 'relative';
|
|
div.id = 'selectBox' + selectBoxIds;
|
|
var parent = dest.parentNode;
|
|
parent.insertBefore(div, dest);
|
|
div.appendChild(dest);
|
|
div.className = 'selectBox';
|
|
div.style.zIndex = 10000 - selectBoxIds;
|
|
|
|
var img = document.createElement('IMG');
|
|
img.src = arrowImage;
|
|
img.className = 'selectBoxArrow';
|
|
|
|
img.onmouseover = selectBox_switchImageUrl;
|
|
img.onmouseout = selectBox_switchImageUrl;
|
|
img.onclick = selectBox_showOptions;
|
|
img.id = 'arrowSelectBox' + selectBoxIds;
|
|
|
|
div.appendChild(img);
|
|
|
|
var optionDiv = document.createElement('DIV');
|
|
optionDiv.id = 'selectBoxOptions' + selectBoxIds;
|
|
optionDiv.className = 'selectBoxOptionContainer';
|
|
optionDiv.style.width = div.offsetWidth - 2 + 'px';
|
|
div.appendChild(optionDiv);
|
|
|
|
if (navigator.userAgent.indexOf('MSIE') >= 0) {
|
|
var iframe = document.createElement('<IFRAME src="about:blank" frameborder=0>');
|
|
iframe.style.width = optionDiv.style.width;
|
|
iframe.style.height = optionDiv.offsetHeight + 'px';
|
|
iframe.style.display = 'none';
|
|
iframe.id = 'selectBoxIframe' + selectBoxIds;
|
|
div.appendChild(iframe);
|
|
}
|
|
|
|
if (dest.getAttribute('selectBoxOptions')) {
|
|
var options = dest.getAttribute('selectBoxOptions').split(';');
|
|
var optionsTotalHeight = 0;
|
|
var optionArray = new Array();
|
|
for (var no = 0; no < options.length; no++) {
|
|
var anOption = document.createElement('DIV');
|
|
anOption.innerHTML = options[no];
|
|
anOption.className = 'selectBoxAnOption';
|
|
anOption.onclick = selectOptionValue;
|
|
anOption.style.width = optionDiv.style.width.replace('px', '') - 2 + 'px';
|
|
anOption.onmouseover = highlightSelectBoxOption;
|
|
optionDiv.appendChild(anOption);
|
|
optionsTotalHeight = optionsTotalHeight + anOption.offsetHeight;
|
|
optionArray.push(anOption);
|
|
}
|
|
if (optionsTotalHeight > optionDiv.offsetHeight) {
|
|
for (var no = 0; no < optionArray.length; no++) {
|
|
optionArray[no].style.width = optionDiv.style.width.replace('px', '') - 22 + 'px';
|
|
}
|
|
}
|
|
optionDiv.style.display = 'none';
|
|
optionDiv.style.visibility = 'visible';
|
|
}
|
|
selectBoxIds = selectBoxIds + 1;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>WebSocket Sample Application</h1>
|
|
<p id="stateLabel">Ready to connect...</p>
|
|
<div>
|
|
<label for="connectionUrl">WebSocket Server URL:</label>
|
|
<input id="connectionUrl" />
|
|
<button id="connectButton" type="submit">Connect</button>
|
|
</div>
|
|
<p></p>
|
|
<div>
|
|
<label for="sendMessage">Message to send:</label>
|
|
<input id="sendMessage" disabled selectBoxOptions="CloseFromServerBugRepro;CloseFromServerWithIgnoringExceptionError" />
|
|
<button id="sendButton" type="submit" disabled>Send</button>
|
|
<button id="closeButton" disabled>Close Socket</button>
|
|
<button id="clearButton">Clear Log</button>
|
|
</div>
|
|
<h2>Communication Log</h2>
|
|
<table style="width: 800px">
|
|
<thead>
|
|
<tr>
|
|
<td style="width: 100px">From</td>
|
|
<td style="width: 100px">To</td>
|
|
<td>Data</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="commsLog"></tbody>
|
|
</table>
|
|
|
|
<script type="text/javascript">
|
|
|
|
createEditableSelect(document.getElementById("sendMessage"));
|
|
|
|
</script>
|
|
|
|
<script>
|
|
var connectionForm = document.getElementById("connectionForm");
|
|
var connectionUrl = document.getElementById("connectionUrl");
|
|
var connectButton = document.getElementById("connectButton");
|
|
var stateLabel = document.getElementById("stateLabel");
|
|
var sendMessage = document.getElementById("sendMessage");
|
|
var sendButton = document.getElementById("sendButton");
|
|
var sendForm = document.getElementById("sendForm");
|
|
var commsLog = document.getElementById("commsLog");
|
|
|
|
var socket;
|
|
|
|
var scheme = document.location.protocol == "https:" ? "wss" : "ws";
|
|
var port = document.location.port ? (":" + document.location.port) : "";
|
|
|
|
connectionUrl.value = scheme + "://" + document.location.hostname + port + "/ws";
|
|
|
|
function updateState() {
|
|
function disable() {
|
|
sendMessage.disabled = true;
|
|
sendButton.disabled = true;
|
|
closeButton.disabled = true;
|
|
}
|
|
function enable() {
|
|
sendMessage.disabled = false;
|
|
sendButton.disabled = false;
|
|
closeButton.disabled = false;
|
|
}
|
|
|
|
connectionUrl.disabled = true;
|
|
connectButton.disabled = true;
|
|
|
|
if (!socket) {
|
|
disable();
|
|
} else {
|
|
switch (socket.readyState) {
|
|
case WebSocket.CLOSED:
|
|
stateLabel.innerHTML = "Closed";
|
|
disable();
|
|
connectionUrl.disabled = false;
|
|
connectButton.disabled = false;
|
|
break;
|
|
case WebSocket.CLOSING:
|
|
stateLabel.innerHTML = "Closing...";
|
|
disable();
|
|
break;
|
|
case WebSocket.CONNECTING:
|
|
stateLabel.innerHTML = "Connecting...";
|
|
disable();
|
|
break;
|
|
case WebSocket.OPEN:
|
|
stateLabel.innerHTML = "Open";
|
|
enable();
|
|
break;
|
|
default:
|
|
stateLabel.innerHTML = "Unknown WebSocket State: " + socket.readyState;
|
|
disable();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
closeButton.onclick = function () {
|
|
if (!socket || socket.readyState != WebSocket.OPEN) {
|
|
alert("socket not connected");
|
|
}
|
|
socket.close(1000, "Closing from client");
|
|
}
|
|
|
|
clearButton.onclick = function () {
|
|
var table = document.getElementById("commsLog");
|
|
table.innerHTML = "";
|
|
}
|
|
|
|
sendButton.onclick = function () {
|
|
if (!socket || socket.readyState != WebSocket.OPEN) {
|
|
alert("socket not connected");
|
|
}
|
|
var data = sendMessage.value;
|
|
socket.send(data);
|
|
//document.getElementById("sendMessage").value = "";
|
|
commsLog.innerHTML += '<tr>' +
|
|
'<td class="commslog-client">Client</td>' +
|
|
'<td class="commslog-server">Server</td>' +
|
|
'<td class="commslog-data">' + data + '</td>'
|
|
'</tr>';
|
|
}
|
|
|
|
connectButton.onclick = function () {
|
|
stateLabel.innerHTML = "Connecting";
|
|
socket = new WebSocket(connectionUrl.value);
|
|
socket.onopen = function (event) {
|
|
updateState();
|
|
commsLog.innerHTML += '<tr>' +
|
|
'<td colspan="3" class="commslog-data">Connection opened</td>' +
|
|
'</tr>';
|
|
};
|
|
socket.onclose = function (event) {
|
|
updateState();
|
|
commsLog.innerHTML += '<tr>' +
|
|
'<td colspan="3" class="commslog-data">Connection closed. Code: ' + event.code + '. Reason: ' + event.reason + '</td>' +
|
|
'</tr>';
|
|
};
|
|
socket.onerror = updateState;
|
|
socket.onmessage = function (event) {
|
|
commsLog.innerHTML += '<tr>' +
|
|
'<td class="commslog-server">Server</td>' +
|
|
'<td class="commslog-client">Client</td>' +
|
|
'<td class="commslog-data">' + event.data + '</td>'
|
|
'</tr>';
|
|
};
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |