-
-
Save ricaun/366088002b08c98bb06873dd1d13f38f to your computer and use it in GitHub Desktop.
FSWebServer - Example Index Page
This file contains 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
<!-- | |
FSWebServer - Example Index Page | |
Copyright (c) 2015 Hristo Gochkov. All rights reserved. | |
This file is part of the ESP8266WebServer library for Arduino environment. | |
This library is free software; you can redistribute it and/or | |
modify it under the terms of the GNU Lesser General Public | |
License as published by the Free Software Foundation; either | |
version 2.1 of the License, or (at your option) any later version. | |
This library is distributed in the hope that it will be useful, | |
but WITHOUT ANY WARRANTY; without even the implied warranty of | |
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU | |
Lesser General Public License for more details. | |
You should have received a copy of the GNU Lesser General Public | |
License along with this library; if not, write to the Free Software | |
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA | |
--> | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
<title>WebSocketTester</title> | |
<style type="text/css" media="screen"> | |
body { | |
margin:0; | |
padding:0; | |
background-color: black; | |
} | |
#dbg, #input_div, #input_el { | |
font-family: monaco; | |
font-size: 16px; | |
line-height: 16px; | |
color: #FAA; | |
} | |
#dbg, #input_div { | |
margin:0; | |
padding:0; | |
padding-left:4px; | |
} | |
#input_el { | |
width:98%; | |
background-color: rgba(0,0,0,0); | |
border: 0px; | |
} | |
#input_el:focus { | |
outline: none; | |
} | |
</style> | |
<script type="text/javascript"> | |
var lastinput = ""; | |
var ws = null; | |
function ge(s){ return document.getElementById(s);} | |
function ce(s){ return document.createElement(s);} | |
function stb(){ window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); } | |
function sendBlob(str){ | |
var buf = new Uint8Array(str.length); | |
for (var i = 0; i < str.length; ++i) buf[i] = str.charCodeAt(i); | |
ws.send(buf); | |
} | |
function addMessage(m){ | |
var msg = ce("div"); | |
m = "<"+ new Date().toLocaleTimeString() + "> " + m; | |
msg.innerText = m; | |
ge("dbg").appendChild(msg); | |
stb(); | |
} | |
function startSocket(){ | |
ws = new WebSocket('ws://'+document.location.host+'/ws',['arduino']); | |
ws.binaryType = "arraybuffer"; | |
ws.onopen = function(e){ | |
addMessage("Connected"); | |
}; | |
ws.onclose = function(e){ | |
addMessage("Disconnected"); | |
setTimeout("startSocket()", 3000); | |
}; | |
ws.onerror = function(e){ | |
console.log("ws error", e); | |
addMessage("Error"); | |
}; | |
ws.onmessage = function(e){ | |
var msg = ""; | |
if(e.data instanceof ArrayBuffer){ | |
msg += "BIN:"; | |
var bytes = new Uint8Array(e.data); | |
for (var i = 0; i < bytes.length; i++) { | |
msg += String.fromCharCode(bytes[i]); | |
} | |
} else { | |
//msg += "TXT:"+e.data; | |
msg += e.data; | |
} | |
addMessage(msg); | |
}; | |
ge("input_el").onkeydown = function(e){ | |
stb(); | |
if(e.keyCode == 13 && ge("input_el").value != ""){ | |
ws.send(ge("input_el").value); | |
lastinput = ge("input_el").value; | |
ge("input_el").value = ""; | |
} | |
else if(e.keyCode == 13 && ge("input_el").value == ""){ | |
ge("input_el").value = lastinput; | |
} | |
} | |
} | |
function endSocket(){ | |
ws.onclose = function () {}; // disable onclose handler first | |
ws.close(); | |
} | |
function startEvents(){ | |
var es = new EventSource('/events'); | |
es.onopen = function(e) { | |
addMessage("Events Opened"); | |
}; | |
es.onerror = function(e) { | |
if (e.target.readyState != EventSource.OPEN) { | |
addMessage("Events Closed"); | |
} | |
}; | |
es.onmessage = function(e) { | |
addMessage("Event: " + e.data); | |
}; | |
es.addEventListener('ota', function(e) { | |
addMessage("Event[ota]: " + e.data); | |
}, false); | |
} | |
function onBodyLoad(){ | |
startSocket(); | |
//startEvents(); | |
} | |
window.onbeforeunload = function() { | |
endSocket(); | |
}; | |
</script> | |
</head> | |
<body id="body" onload="onBodyLoad()"> | |
<pre id="dbg"></pre> | |
<div id="input_div"> | |
$<input type="text" value="" id="input_el"> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment