132 lines
3.8 KiB
HTML
132 lines
3.8 KiB
HTML
|
<!--
|
||
|
|
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: 12px;
|
||
|
|
line-height: 13px;
|
||
|
|
color: #AAA;
|
||
|
|
}
|
||
|
|
|
||
|
|
#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 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");
|
||
|
|
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");
|
||
|
|
};
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
addMessage(msg);
|
||
|
|
};
|
||
|
|
ge("input_el").onkeydown = function(e){
|
||
|
|
stb();
|
||
|
|
if(e.keyCode == 13 && ge("input_el").value != ""){
|
||
|
|
ws.send(ge("input_el").value);
|
||
|
|
ge("input_el").value = "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
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();
|
||
|
|
}
|
||
|
|
</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>
|