191 lines
6.5 KiB
HTML
191 lines
6.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>WebSocket demo</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="menu">
|
||
|
|
<input type="text" id="input">
|
||
|
|
<button id="button">submit</button>
|
||
|
|
<br>
|
||
|
|
<button id="editbutton">edit this page</button>
|
||
|
|
<button id="send">send</button>
|
||
|
|
<button id="root">return to the root page</button>
|
||
|
|
<br>
|
||
|
|
<input type="text" id="username">
|
||
|
|
<input type="password" id="password">
|
||
|
|
<button id="login">login!</button>
|
||
|
|
<p id="loginstatus">not logged in!</p>
|
||
|
|
<hr>
|
||
|
|
</div>
|
||
|
|
<div id="content">
|
||
|
|
</div>
|
||
|
|
<div id="edit">
|
||
|
|
<p id="editpage"></p>
|
||
|
|
<textarea id="editbox"></textarea>
|
||
|
|
</div>
|
||
|
|
<style>
|
||
|
|
#edit {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
#content {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
function isAlphaNumeric(str) {
|
||
|
|
var code, i, len;
|
||
|
|
|
||
|
|
for (i = 0, len = str.length; i < len; i++) {
|
||
|
|
code = str.charCodeAt(i);
|
||
|
|
if (!(code > 47 && code < 58) && // numeric (0-9)
|
||
|
|
!(code > 64 && code < 91) && // upper alpha (A-Z)
|
||
|
|
!(code > 96 && code < 123)) { // lower alpha (a-z)
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
|
||
|
|
function getCommand(str) {
|
||
|
|
var ret = [];
|
||
|
|
for(var i = 0; i < str.length; i++) {
|
||
|
|
if(!isAlphaNumeric(str[i])) ret.push(str[i]);
|
||
|
|
else if(i == 0 && isAlphaNumeric(str[i])) return '';
|
||
|
|
else break;
|
||
|
|
}
|
||
|
|
|
||
|
|
return [ret.join(''), i];
|
||
|
|
};
|
||
|
|
|
||
|
|
var ws = new WebSocket("ws://192.168.1.30:8765/"),
|
||
|
|
messages = document.createElement('ul'),
|
||
|
|
editbutton = document.getElementById("editbutton"),
|
||
|
|
editdiv = document.getElementById("edit"),
|
||
|
|
textarea = document.getElementById("editbox"),
|
||
|
|
username = document.getElementById("username"),
|
||
|
|
password = document.getElementById("password"),
|
||
|
|
login = document.getElementById("login"),
|
||
|
|
loginstatus = document.getElementById("loginstatus"),
|
||
|
|
root = document.getElementById("root"),
|
||
|
|
currentpage = '',
|
||
|
|
editsend = document.getElementById("send"),
|
||
|
|
header = true;
|
||
|
|
buffer = [];
|
||
|
|
ws.onmessage = function (event) {
|
||
|
|
var commanddata = getCommand(event.data);
|
||
|
|
var preserve = false;
|
||
|
|
var link = false;
|
||
|
|
|
||
|
|
if(header) {
|
||
|
|
header = false;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(event.data === "auth succeed") {
|
||
|
|
loginstatus.innerHTML = "logged in";
|
||
|
|
load("test.for");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
buffer.push(event.data);
|
||
|
|
|
||
|
|
switch(commanddata[0]) {
|
||
|
|
case '#':
|
||
|
|
var elem = document.createElement('h1');
|
||
|
|
break;
|
||
|
|
case '##':
|
||
|
|
var elem = document.createElement('h2');
|
||
|
|
break;
|
||
|
|
case '###':
|
||
|
|
var elem = document.createElement('h3');
|
||
|
|
break;
|
||
|
|
case '####':
|
||
|
|
var elem = document.createElement('h4');
|
||
|
|
break;
|
||
|
|
case '#####':
|
||
|
|
var elem = document.createElement('h5');
|
||
|
|
break;
|
||
|
|
case '######':
|
||
|
|
var elem = document.createElement('h6');
|
||
|
|
break;
|
||
|
|
case '[[':
|
||
|
|
var elem = document.createElement('a');
|
||
|
|
link = true;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
var elem = document.createElement('p');
|
||
|
|
preserve = true;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
var body = document.getElementById('content');
|
||
|
|
if(!preserve && !link) {
|
||
|
|
elem.innerHTML = event.data.slice(commanddata[1]);
|
||
|
|
} else if(link) {
|
||
|
|
var tmp = event.data.slice(commanddata[1]).split(']]')[0];
|
||
|
|
var splitted = tmp.split(':');
|
||
|
|
|
||
|
|
elem.innerHTML = splitted[0];
|
||
|
|
elem.href = "javascript:load(\'" + splitted[1] + "\');";
|
||
|
|
link = false;
|
||
|
|
} else {
|
||
|
|
elem.innerHTML = event.data;
|
||
|
|
}
|
||
|
|
body.appendChild(elem);
|
||
|
|
};
|
||
|
|
|
||
|
|
document.body.appendChild(messages);
|
||
|
|
|
||
|
|
ws.onopen = function(event) {
|
||
|
|
ws.send("get test.for");
|
||
|
|
currentpage = "test.for";
|
||
|
|
};
|
||
|
|
|
||
|
|
var button = document.getElementById("button"),
|
||
|
|
text = document.getElementById("input");
|
||
|
|
|
||
|
|
function load(page) {
|
||
|
|
var body = document.getElementById('content');
|
||
|
|
body.innerHTML = '';
|
||
|
|
input.value = page;
|
||
|
|
header = true;
|
||
|
|
ws.send("get " + page);
|
||
|
|
currentpage = page;
|
||
|
|
buffer = [];
|
||
|
|
};
|
||
|
|
|
||
|
|
button.onclick = function(event) {
|
||
|
|
load(text.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
editbutton.onclick = function(event) {
|
||
|
|
editdiv.style.display = 'block';
|
||
|
|
var body = document.getElementById('content');
|
||
|
|
body.style.display = 'none';
|
||
|
|
for(var i = 0; i < buffer.length; i++) {
|
||
|
|
textarea.value += buffer[i] + '\n';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
send.onclick = function(event) {
|
||
|
|
ws.send("put " + currentpage);
|
||
|
|
ws.send(textarea.value);
|
||
|
|
editdiv.style.display = 'none';
|
||
|
|
var body = document.getElementById('content');
|
||
|
|
body.style.display = 'block';
|
||
|
|
load(currentpage);
|
||
|
|
};
|
||
|
|
|
||
|
|
login.onclick = function(event) {
|
||
|
|
ws.send("auth " + username.value + " " + password.value);
|
||
|
|
}
|
||
|
|
|
||
|
|
root.onclick = function(event) {
|
||
|
|
load("test.for");
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|