mirror of
https://github.com/pvvx/RTL00_WEB.git
synced 2024-12-26 07:45:17 +00:00
116 lines
3 KiB
HTML
116 lines
3 KiB
HTML
<!DOCTYPE html>
|
|
<html><head>
|
|
<meta charset="charset=windows-1251" />
|
|
<link href="ws2.css" rel="stylesheet" type="text/css" />
|
|
<title>WebSocket Test</title></head>
|
|
<body><h2>WebSocket Test</h2>
|
|
<form name="publish">
|
|
<input type="button" id="OpCl" value="Open">
|
|
<input type="text" name="message" value="hellomsg">
|
|
<input type="submit" id="SndM" value="Send" disabled="1"><br>
|
|
</form>
|
|
<div id="console-div">
|
|
Log messages
|
|
<div id="consoleLog"></div>
|
|
<button id="clear">Clear Log</button>
|
|
</div></body>
|
|
<script language="javascript" type="text/javascript">
|
|
var $ = function(id){return document.getElementById(id);}
|
|
var wsUri = "ws://"+window.location.host.toString()+"/web.cgi";
|
|
var ws, wstt, wsopen = 0;
|
|
$("OpCl").onclick = function() {
|
|
if(wsopen) {
|
|
ws.close();
|
|
$("OpCl").value = "Open";
|
|
}
|
|
else {
|
|
ws = new WebSocket(wsUri);
|
|
log("CONNECT: " + ws.url);
|
|
ws.onopen = function(evt) {
|
|
$("OpCl").value = "Close";
|
|
$("SndM").disabled = false;
|
|
log("CONNECTED");
|
|
wstt = setTimeout(wsping, 2500);
|
|
};
|
|
ws.onclose = function(evt) {
|
|
log("CLOSED: ("+evt.code+") "+evt.reason);
|
|
clearTimeout(wstt);
|
|
wsopen = 0;
|
|
$("SndM").disabled = true;
|
|
};
|
|
ws.onerror = function(event) {
|
|
logError("ERROR (" + event.data +", "+ event.code +", "+ event.reason + ")");
|
|
wsopen = 0;
|
|
$("SndM").disabled = true;
|
|
};
|
|
// îáðàáîò÷èê âõîäÿùèõ ñîîáùåíèé
|
|
ws.onmessage = function(evt) {
|
|
var data = evt.data;
|
|
if (typeof(data) == "string") {
|
|
//text
|
|
if(data != "ws:pong") logResponse("RECEIVED TEXT: " + data);
|
|
}
|
|
else if (data.byteLength) {
|
|
//arraybuffer
|
|
var u = new Uint8Array(data);
|
|
var bytes = [];
|
|
for (var i=0; i<u.byteLength; i++) {
|
|
bytes.push(u[i]);
|
|
}
|
|
logResponse("RECEIVED ARRAY BUFFER: " + bytes);
|
|
}
|
|
else if (data.size) {
|
|
//blob
|
|
var cb = function(result) {
|
|
logResponse("RECEIVED BLOB: " + result);
|
|
};
|
|
}
|
|
else {
|
|
logResponse("RECEIVED UNKNOWN TYPE: " + data);
|
|
}
|
|
clearTimeout(wstt);
|
|
wstt = setTimeout(wsping, 2500);
|
|
}
|
|
wsopen = 1;
|
|
}
|
|
}
|
|
function wsping() {ws.send("ws:ping"); wstt = setTimeout(wsping, 2500);}
|
|
var consoleLog = $("consoleLog");
|
|
$("clear").onclick = function() {
|
|
while (consoleLog.childNodes.length > 0) {
|
|
consoleLog.removeChild(consoleLog.lastChild);
|
|
}
|
|
}
|
|
var log = function(message) {
|
|
var pre = document.createElement("pre");
|
|
pre.style.wordWrap = "break-word";
|
|
pre.innerHTML = message;
|
|
consoleLog.appendChild(pre);
|
|
consoleLog.scrollTop = consoleLog.scrollHeight;
|
|
while (consoleLog.childNodes.length > 25) {
|
|
consoleLog.removeChild(consoleLog.firstChild);
|
|
}
|
|
}
|
|
var logResponse = function(msg) {
|
|
log("<span style='color:blue'>"+msg+"</span>");
|
|
}
|
|
var logSend = function(msg) {
|
|
log("<span style='color:green'>"+msg+"</span>");
|
|
}
|
|
var logError = function(msg) {
|
|
log("<span style='color:red'>"+msg+"</span>");
|
|
}
|
|
document.forms.publish.onsubmit = function() {
|
|
clearTimeout(wstt);
|
|
try {
|
|
var text = this.message.value;
|
|
logSend("SEND TEXT: "+text);
|
|
ws.send(text);
|
|
} catch (e) {
|
|
logError("EXCEPTION: "+e);
|
|
}
|
|
wstt = setTimeout(wsping, 2500);
|
|
return false;
|
|
}
|
|
</script>
|
|
</html>
|