-
-
Save kawasaki2013/85ac85fc3c23b18fb6148592a8ecfdd1 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment