diff options
author | Jesse Luehrs <doy@tozt.net> | 2014-09-23 20:29:31 -0400 |
---|---|---|
committer | Jesse Luehrs <doy@tozt.net> | 2014-09-23 20:29:31 -0400 |
commit | 18cbe913dc4ccde27aa518713d2f4f3376f9dba9 (patch) | |
tree | 2fb1be8e4e8c76fe8644eb1f01f9c682f09ea7c1 /termcast_server/index.html | |
parent | 1525c33ba5fceeb5558b98c9f6e197d28aaa8770 (diff) | |
download | python-termcast-server-18cbe913dc4ccde27aa518713d2f4f3376f9dba9.tar.gz python-termcast-server-18cbe913dc4ccde27aa518713d2f4f3376f9dba9.zip |
basic structure of the websockets communication
Diffstat (limited to 'termcast_server/index.html')
-rw-r--r-- | termcast_server/index.html | 45 |
1 files changed, 38 insertions, 7 deletions
diff --git a/termcast_server/index.html b/termcast_server/index.html index e7cd8dd..74c1d3e 100644 --- a/termcast_server/index.html +++ b/termcast_server/index.html @@ -1,21 +1,52 @@ <!DOCTYPE html> <html> <head> + <style> +.menu { + display: none; +} + +.term { + display: none; +} + </style> <script> var url = location.origin.replace(/^http/, 'ws') + "/-/"; -var socket = new WebSocket(url); +socket = new WebSocket(url); socket.onopen = function (e) { - // XXX + socket.send(JSON.stringify({"type": "request_streamer_list"})); }; socket.onmessage = function (e) { - // XXX -}; -socket.onclose = function (e) { - // XXX + console.log(e.data); + var data = JSON.parse(e.data); + var type = data.type; + + if (type == "streamer_list") { + document.querySelector('.term').style.setProperty('display', 'none'); + var menudiv = document.querySelector('.menu'); + var menu = '<ul>'; + data.streamers.forEach(function (streamer) { + menu += '<li><a href="#" onclick=' + "'socket.send(JSON.stringify({\"type\": \"start_watching\", \"who\": \"" + streamer.id + "\"}))'" + '>' + streamer.name + '</a></li>'; + }); + menu += '</ul>'; + menudiv.innerHTML = menu; + menudiv.style.setProperty('display', 'block'); + } + else if (type == "update_screen") { + document.querySelector('.menu').style.setProperty('display', 'none'); + var termdiv = document.querySelector('.term'); + // XXX + termdiv.innerHTML = "<h1>It's a terminal</h1>"; + termdiv.style.setProperty('display', 'block'); + } + else if (type == "streamer_disconnect") { + socket.send(JSON.stringify({"type": "request_streamer_list"})); + } }; </script> </head> <body> - <h1>Hello World</h1> + <div class="menu"></div> + <div class="term"></div> </body> </html> |