example/static/index.html (133 lines of code) (raw):
<!doctype html>
<html>
<head>
<title>Example</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; width: 100%; }
form input, form textarea { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
div#formrow { position:fixed; bottom: 0; width: 100%}
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body >
<div id="formrow">
<button id="connect" style="border-style: solid; border-width: medium; border-color: black; width: 50%; background: rgb(130, 224, 255); padding: 10px;">Connect</button>
<button id="disconnect" style="border-style: solid; border-width: medium; border-color: black;float:right;width: 50%; background: rgb(130, 224, 255); padding: 10px;">Disconnect</button>
<button id="cleanrepo" style="width: 100%; background: rgb(130, 224, 255); border: none; padding: 10px;">Clean Repository</button>
<form id="patch" action="">
<textarea id="m1" autocomplete="off" style="width:90%; margin-right:2px" rows="40"></textarea>
<button style="vertical-align:top">Send PATCH</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var socket = null;
var correlation_id = 0;
var show_pongs = true;
var msg2 = {
code: "EVENT",
namespace: "/files",
event: "PATCH",
payload: {
diff: 'whatever'
}
};
var heartbeat_interval = null, missed_heartbeats = 0;
function on_open() {
if (heartbeat_interval === null) {
missed_heartbeats = 0;
heartbeat_interval = setInterval(function() {
try {
missed_heartbeats++;
if (missed_heartbeats >= 3)
throw new Error("Too many missed heartbeats.");
ping()
} catch(e) {
clearInterval(heartbeat_interval);
heartbeat_interval = null;
if (socket !== null) {
socket.close();
}
}
}, 5000);
}
}
function emit(msg) {
if (!socket || socket.readyState == -1){
return;
}
msg.correlation_id = ++correlation_id;
socket.send(JSON.stringify(msg))
}
function ping(){
var ping = { code: "PING" };
emit(ping)
}
function connect(repository) {
var connectFilesMsg = {
code: "CONNECT",
namespace: repository,
};
emit(connectFilesMsg)
}
function event(event, namespace, payload) {
var msg = {
code: "EVENT",
namespace: namespace,
event: event,
payload: payload
};
emit(msg)
}
$('#connect').click(function(){
socket = new WebSocket("ws://localhost:3000", ["webfilesync.gitlab.com"])
socket.onopen = function(evt) {
console.log("Opened Connection");
connect("/files")
connect("/repository")
on_open();
}
socket.onclose = function(evt) {
console.log("Closed Connection")
console.log(evt)
socket = null;
}
socket.onmessage = function(evt) {
data = JSON.parse(evt.data)
if (data.code === "PONG") {
if (show_pongs) {
console.log("RESPONSE: " + evt.data);
console.log(data.code)
}
// reset the counter
missed_heartbeats = 0;
} else {
console.log("RESPONSE: " + evt.data);
console.log(data.code)
}
}
socket.onerror = function(evt) {
console.log("ERROR: " + evt.data);
}
})
$('#disconnect').click(function(){
if (socket != null && socket.readyState == WebSocket.OPEN) {
// Websocket code for normal closure https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent#Status_codes
socket.close(1000);
}
});
$('form#patch').submit(function(){
event('PATCH', '/files', {"diff": $('form#patch textarea#m1').val(), "delete_files": ["LICENSE"]})
return false;
});
$('button#cleanrepo').click(function(){
event('DELETE', '/repository')
});
</script>
</body>
</html>