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>
 |