|
|
@@ -0,0 +1,164 @@ |
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
<title>WebSocket test</title> |
|
|
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> |
|
|
<style> |
|
|
body { |
|
|
padding-top: 50px; |
|
|
} |
|
|
.starter-template { |
|
|
padding: 40px 15px; |
|
|
text-align: center; |
|
|
} |
|
|
h2,h3{ |
|
|
display: inline; |
|
|
} |
|
|
.buy, .sell{ font-size:20px} |
|
|
.price{ margin:10px;} |
|
|
.float-left{float:left} |
|
|
.float-right{float:right} |
|
|
.ex{overflow: auto;} |
|
|
#rates,#fixer{float:left} |
|
|
</style> |
|
|
</head> |
|
|
<body onload="get_pairs()"> |
|
|
<nav class="navbar navbar-inverse navbar-fixed-top"> |
|
|
<div class="container"> |
|
|
<div class="navbar-header"> |
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> |
|
|
<span class="sr-only">Toggle navigation</span> |
|
|
<span class="icon-bar"></span> |
|
|
<span class="icon-bar"></span> |
|
|
<span class="icon-bar"></span> |
|
|
</button> |
|
|
<a class="navbar-brand" href="#">Kurzy</a> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</nav> |
|
|
<div class="container"> |
|
|
|
|
|
<div class="starter-template"> |
|
|
<h1>WebSockets</h1> |
|
|
<div id="base_block"></div> |
|
|
<div id="fixer"> |
|
|
<p>Podporovane páry. Ceny jsou za USD a berou se z Evropské centrální banky jednou denně okolo 4PM CET.</p> |
|
|
<ul id="rates"></ul> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
<script type="text/javascript"> |
|
|
|
|
|
var get_pairs = function(){ |
|
|
var request = new XMLHttpRequest(); |
|
|
request.open('GET', 'https://api.fixer.io/latest?base=USD', true); |
|
|
|
|
|
request.onload = function() { |
|
|
if (request.status >= 200 && request.status < 400) { |
|
|
// Success! |
|
|
var data = JSON.parse(request.responseText); |
|
|
console.log(data) |
|
|
var rates = document.getElementById('rates'); |
|
|
for(var key in data["rates"]) { |
|
|
var val = data["rates"][key] |
|
|
var el = document.createElement("li") |
|
|
el.innerHTML = val + " " + key |
|
|
rates.appendChild(el) |
|
|
} |
|
|
|
|
|
} else { |
|
|
// We reached our target server, but it returned an error |
|
|
|
|
|
} |
|
|
}; |
|
|
|
|
|
request.onerror = function() { |
|
|
// There was a connection error of some sort |
|
|
}; |
|
|
|
|
|
request.send(); |
|
|
|
|
|
} |
|
|
|
|
|
//start important |
|
|
var logger = document.getElementById('base_block'), |
|
|
Socket = window.MozWebSocket || window.WebSocket, |
|
|
protos = ['xmpp'] |
|
|
//host = location.origin.replace(/^http/, 'ws') |
|
|
host = 'ws://faye-websocket.herokuapp.com/' |
|
|
socket = new Socket(host, protos), |
|
|
index = 0; |
|
|
var log = function(text) { |
|
|
logger.innerHTML = text; |
|
|
}; |
|
|
|
|
|
|
|
|
socket.addEventListener('open', function() { |
|
|
//log('OPEN: ' + socket.protocol); |
|
|
console.log("open"+ socket.protocol); |
|
|
socket.send('Hello, world'); |
|
|
}); |
|
|
|
|
|
socket.onerror = function(event) { |
|
|
log('ERROR: ' + event.message); |
|
|
}; |
|
|
|
|
|
socket.onmessage = function(event) { |
|
|
h = JSON.parse( event.data ) |
|
|
//console.log(h); |
|
|
log_usd(h); |
|
|
setTimeout(function() { socket.send(++index + ' ' + event.data) }, 100); |
|
|
}; |
|
|
|
|
|
socket.onclose = function(event) { |
|
|
log('CLOSE: ' + event.code + ', ' + event.reason); |
|
|
}; |
|
|
//end important |
|
|
|
|
|
// html generation |
|
|
var log_usd = function(h) { |
|
|
for (var key in h) { |
|
|
var val = h[key]; |
|
|
generate_htmls(key) |
|
|
fill_values(key, val) |
|
|
} |
|
|
}; |
|
|
var fill_values = function(pair, h){ |
|
|
par_div = document.getElementById(pair); |
|
|
for (var key in h) { |
|
|
var val = h[key]; |
|
|
//console.log(par_div.getElementsByClassName(key).innerHTML) |
|
|
//console.log(val) |
|
|
var x = par_div.getElementsByClassName(key) |
|
|
// console.log(x[0], val) |
|
|
x[0].innerHTML = val.toFixed(2) + " " +pair; |
|
|
} |
|
|
//console.log(pair, value) |
|
|
} |
|
|
var generate_h2_with_class = function(cls){ |
|
|
var el = document.createElement("h2") |
|
|
el.className = cls |
|
|
//el.innerHTML = "test" |
|
|
return el |
|
|
} |
|
|
var generate_htmls = function(key){ |
|
|
if(document.getElementById(key) != null)return |
|
|
var base_block = document.getElementById('base_block'); |
|
|
var el = document.createElement("div") |
|
|
el.id = key |
|
|
el.appendChild(generate_h2_with_class("buy")) |
|
|
el.appendChild(generate_h2_with_class("price")) |
|
|
el.appendChild(generate_h2_with_class("sell")) |
|
|
base_block.appendChild(el); |
|
|
}; |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
adamplansky created this gist