You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
154 lines
2.8 KiB
HTML
154 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>WebSocket example</title>
|
|
<meta charset="utf-8" />
|
|
<style type="text/css">
|
|
|
|
body {
|
|
width: 800px;
|
|
margin: auto;
|
|
}
|
|
|
|
header {
|
|
font-size: 36pt;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-bottom: 1em;
|
|
color: #541F14;
|
|
}
|
|
|
|
section.proto {
|
|
float: left;
|
|
/*background-color: #f8f8f8;*/
|
|
}
|
|
|
|
section#json {
|
|
width: 380px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
section#raw {
|
|
width: 380px;
|
|
padding-left: 16px;
|
|
border-left: 4px solid #626266;
|
|
}
|
|
|
|
div.desc {
|
|
margin: 0px;
|
|
}
|
|
pre.sent, pre.received {
|
|
margin-top: 0px;
|
|
border-radius: 4px;
|
|
padding: 5px;
|
|
}
|
|
pre.sent {
|
|
border: 1px solid #938172;
|
|
background-color: white;
|
|
}
|
|
pre.received {
|
|
border: 1px solid #CC9E61;
|
|
text-align: right;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<header>Webdis with HTML5 WebSockets</header>
|
|
|
|
<section class="proto" id="json">
|
|
<h3>JSON</h3>
|
|
<div class="log" id="json-log">
|
|
Connecting...
|
|
</div>
|
|
</section>
|
|
<section class="proto" id="raw">
|
|
<h3>Raw</h3>
|
|
<div class="log" id="raw-log">
|
|
Connecting...
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
$ = function(id) {return document.getElementById(id);};
|
|
var host = "127.0.0.1";
|
|
var port = 7379;
|
|
|
|
function log(id, dir, msg) {
|
|
|
|
var desc = document.createElement("div");
|
|
desc.setAttribute("class", "desc");
|
|
desc.innerHTML = dir;
|
|
$(id).appendChild(desc);
|
|
|
|
var e = document.createElement("pre");
|
|
e.setAttribute("class", dir);
|
|
e.innerHTML = msg;
|
|
$(id).appendChild(e);
|
|
}
|
|
|
|
function testJSON() {
|
|
|
|
if(typeof(WebSocket) == 'function')
|
|
f = WebSocket;
|
|
if(typeof(MozWebSocket) == 'function')
|
|
f = MozWebSocket;
|
|
|
|
var jsonSocket = new f("ws://"+host+":"+port+"/.json");
|
|
var self = this;
|
|
|
|
send = function(j) {
|
|
var json = JSON.stringify(j);
|
|
jsonSocket.send(json);
|
|
log("json-log", "sent", json);
|
|
};
|
|
|
|
jsonSocket.onopen = function() {
|
|
$("json-log").innerHTML = "";
|
|
self.send(["SET", "hello", "world"]);
|
|
self.send(["GET", "hello"]);
|
|
};
|
|
|
|
jsonSocket.onmessage = function(messageEvent) {
|
|
log("json-log", "received", messageEvent.data);
|
|
};
|
|
}
|
|
|
|
function testRAW() {
|
|
|
|
if(typeof(WebSocket) == 'function')
|
|
f = WebSocket;
|
|
if(typeof(MozWebSocket) == 'function')
|
|
f = MozWebSocket;
|
|
|
|
var rawSocket = new f("ws://"+host+":"+port+"/.raw");
|
|
var self = this;
|
|
|
|
sendRaw = function(raw) {
|
|
rawSocket.send(raw);
|
|
log("raw-log", "sent", raw);
|
|
};
|
|
|
|
rawSocket.onopen = function() {
|
|
$("raw-log").innerHTML = "";
|
|
self.sendRaw("*3\r\n$3\r\nSET\r\n$5\r\nhello\r\n$5\r\nworld\r\n");
|
|
self.sendRaw("*2\r\n$3\r\nGET\r\n$5\r\nhello\r\n");
|
|
};
|
|
|
|
rawSocket.onmessage = function(messageEvent) {
|
|
log("raw-log", "received", messageEvent.data);
|
|
};
|
|
}
|
|
|
|
addEventListener("DOMContentLoaded", function(){
|
|
testJSON();
|
|
testRAW();
|
|
}, null);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|