#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <WebSocketsServer.h>
#include <Hash.h>
#include <FS.h>
#include <DHT.h>

const char* ssid = "nombredered";
const char* password = "password";

WebSocketsServer webSocket = WebSocketsServer(81);
ESP8266WebServer server(80);

String datos= "0 0 0 0 0 0 0 0 0";

int SENSOR = 2;

DHT dht (SENSOR, DHT11);

int pines[]={16,5,4,0,2,12,14,15,13,3};
double temp=temp,hum=hum;
void prender(String dat)
{
  String x="";
  int y;
  for(int i=0;i<dat.length();i++){
    //Serial.printf("Pin: %d - Datos-> %dn", pines[i],(uint8_t)dat.charAt(i)-48);
    y=(int)dat.charAt(i)-48;
    x+=y;
    x+=" ";
    digitalWrite(pines[i],(int)dat.charAt(i)-48);
  }
  //Leer dato de temperatura y humedad y guardar en variables, ejemplo temp y hum;
  // Se concatena los valores 9 valores de lamparas y dos datos ->>>>0 0 0 0 0 0 0 0 0 24.5 28.4<<<-
   x+=temp;
   x+=" ";
   x+=hum;
   webSocket.broadcastTXT(x);
}

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t lenght) {
  Serial.printf("webSocketEvent(%d, %d, ...)rn", num, type);
  switch(type) {
    case WStype_DISCONNECTED:
    {
      Serial.printf("Usuario #%u - Desconectado!n", num);
      break;
    }
    case WStype_CONNECTED:
    {
      IPAddress ip = webSocket.remoteIP(num);
      Serial.printf("Conexión establecida desde la IP: %d.%d.%d.%d Nombre: %s url: %un", ip[0], ip[1], ip[2], ip[3], payload, num);
      prender(datos);
      break;
     }
     case WStype_TEXT:
     {
      datos="";
      for (int i = 0; i < lenght; i++)
      {
        datos.concat((char)payload[i]);
      }
      prender(datos);
      break;
    }
}
}

void setup()
{
  pinMode(pines[0], OUTPUT);
  pinMode(pines[1], OUTPUT);
  pinMode(pines[2], OUTPUT);
  pinMode(pines[3], OUTPUT);
  pinMode(pines[4], OUTPUT);
  pinMode(pines[5], OUTPUT);
  pinMode(pines[6], OUTPUT);
  pinMode(pines[7], OUTPUT);
  pinMode(pines[8], OUTPUT);
  pinMode(pines[9], INPUT);

  Serial.begin(115200);
  dht.begin();
  Serial.println();
 // enviaIR.begin();
  WiFi.begin(ssid, password);
  Serial.println("Conectando con el modem infinitum");
  while (WiFi.status() != WL_CONNECTED) {
  delay(500);
  Serial.print(".");
  }
  server.onNotFound([](){
    if(!handleFileRead(server.uri()))
      server.send(404, "text/plain", "Archivo no encontradonn");
  });

  IPAddress myIP = WiFi.localIP();
  Serial.println("");
  Serial.print("Direccion IP: ");
  Serial.println(myIP);

  SPIFFS.begin();

  webSocket.begin();
  webSocket.onEvent(webSocketEvent);

    server.onNotFound([](){
    if(!handleFileRead(server.uri()))
      server.send(404, "text/plain", "FileNotFound");
  });
  server.begin();
  Serial.println("SERVIDOR WEB INICIADO");
}

String getContentType(String filename)
{
  if(server.hasArg("download")) return "application/octet-stream";
  else if(filename.endsWith(".htm")) return "text/html";
  else if(filename.endsWith(".html")) return "text/html";
  else if(filename.endsWith(".css")) return "text/css";
  else if(filename.endsWith(".js")) return "application/javascript";
  else if(filename.endsWith(".png")) return "image/png";
  else if(filename.endsWith(".gif")) return "image/gif";
  else if(filename.endsWith(".jpg")) return "image/jpeg";
  else if(filename.endsWith(".ico")) return "image/x-icon";
  else if(filename.endsWith(".xml")) return "text/xml";
  else if(filename.endsWith(".pdf")) return "application/x-pdf";
  else if(filename.endsWith(".zip")) return "application/x-zip";
  else if(filename.endsWith(".gz")) return "application/x-gzip";
  return "text/plain";
}

bool handleFileRead(String path)
{
  #ifdef DEBUG
    Serial.println("handleFileRead: " + path);
  #endif
  if(path.endsWith("/")) path += "index.html";
  if(SPIFFS.exists(path)){
    File file = SPIFFS.open(path, "r");
    size_t sent = server.streamFile(file, getContentType(path));
    file.close();
    return true;
  }
  return false;
}

void loop() {
  webSocket.loop();
  server.handleClient();
}

<input type="checkbox" onclick="enviar()" id="lampara">
                    <label for="lampara" id="StatusLampara">LAMPARA</label>
                </div>
                <div class="Baño">
                    <input type="checkbox" onclick="enviar()" id="baño">
                    <label for="baño" id="StatusBaño">BAÑO</label>

                    <input type="checkbox" onclick="enviar()" id="tocador">
                    <label for="tocador" id="StatusTocador">TOCADOR</label>
                </div>
                <div class="accesorios">
                    <h3>CONTROL DE ACCESORIOS</h3>
                    <div class="Calefactor">
                        <input type="checkbox" onclick="enviar()" id="calefactor">
                        <label for="calefactor" id="StatusCalefactor">CALEFACTOR</label>
                    </div>
                    <div class="Puerta">
                        <input type="checkbox" onclick="enviar()" id="puerta">
                        <label for="puerta" id="StatusPuerta">PUERTA</label>
                    </div>
                    <div class="Ventilador">
                        <input type="checkbox" onclick="enviar()" id="ventilador">
                        <label for="ventilador" id="StatusVentilador">VENTILADOR</label>
                    </div>
                </div>
                <div class="temperatura">
                    <div class="temp">
                        <h3>TEMPERATURA</h3>
                        <label id="temperatura">24°C</label>
                    </div>
                    <div class="humed">
                        <h3>HUMEDAD</h3>
                        <label id="humedad">28 %</label>
                    </div>
                </div>
             </div>
            <hr>
            <h4>TECNOLOGIA Y HOGAR</h4>
            <P>Gracias a la tecnología cada uno de nuestros artefactos eléctricos y electrónicos, en la actualidad los podemos controlar de manera inalámbrica, ya sea por <strong>"Control remoto, Bluetooth, Wifi"</strong>, y hoy lo podemos hacer via internet; Gracias al <strong>"Internet de las cosas(IOT)"</strong>, y una tecnología muy indispensable, como lo es <strong>"WebSocket"</strong>.</P>
            <footer>Diseñado por Michel Bernales &copy 2018 ¡Todos los derechos son para uso personal.!</footer>
        </div>
        <script type="text/javascript" src="javascript/index.js"></script>
    </body>
</html>


`body {
    display: flex;
    background: rgba(186, 186, 199,.6);
    margin: auto;
    justify-content: center;
    text-align: center;
    max-width: 600px;
    font-family: sans-serif;
}
h1{
    margin: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: #020972;
}
h3{
    color: #781123;
    font-weight: 600;
    margin-bottom: 2px;
}
.contenedor{
    width: 85%;
    background: #E4A5A0;
    padding: 3px;
}
hr{
    height: 5px;
}
.enlaces{
    width: 100%;
    margin-bottom: -14px;
    display: inline-block;
    flex-wrap: wrap;
    flex-flow:
}
a{
    transition: all .2s;
    float: right;
    width: 52px;
    margin-top: -4px;
    margin-right: 2px;
    height: auto;
    color: #050C5D;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 3px;
    padding: 8px;
}
a:hover{
    background: rgba(231, 58, 137,.7);
}
.wrap{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.accesorios{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 90%;
}
.accesorios h3{
    width: 100%;
    margin-bottom: 5px;
}
.temperatura{
    width: 77%;
    height: 85px;
    margin: auto;
    display: flex;
    justify-content: space-around;
}
.temperatura label{
    width: 75px;
    height: 53px;
    font-size: 24px;
    background: #FFBAE3;
    color: darkgreen;
    margin-top: -12px;
    padding: 0 2px;
    border-top-left-radius: 55%;
    border-top-right-radius: 55%;
}
.temperatura h3{
    font-size: 13px;
    margin-bottom: 20px;
}
.temp label{
    margin-left: 7px;
}
input{
    display: none;
}
label{
    display: inline-block;
    background: red;
    color: #FDE4E4;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    width: 80px;
    height: 60px;
    margin: 2px;
    font-size: 70%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
input[type="checkbox"] + label{
    background: red;
    color: #FDE4E4;
    transition: all .1s;
}
input[type="checkbox"]:checked + label{
    background: rgba(48, 242, 0,.9);
    color: black;
    transition: all .1s;
}

h4{
    color: #045508;
    text-decoration-line: underline;
    margin-top: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}
p{
    font-size: 11px;
    color: rgba(0, 0, 0,.7);
    justify-content: center;
    margin-bottom: -5px;
}
footer{
    font-size: 12px;
    font-weight: 600;
    margin-top: 25px;
}`

function start() {

Socket = new WebSocket('ws://' + window.location.hostname + ':81');
    Socket.onopen = () => {
            console.log('Conexión abierta al webSockets: ' + new Date());
        };
    Socket.onclose = function(evt) {
            console.log('Conexión cerrada con el webSockets');
        };
    Socket.onerror = evt => {
            console.log('Error al conectar con el webSockets', evt);
        };
    Socket.onmessage = evt => {

            x=evt.data;
            var datos = x.split(' ');
            checks=new Array();
            checks[0]=document.getElementById('comedor');
            checks[1]=document.getElementById('alacena');
            checks[2]=document.getElementById('dormitorio');
            checks[3]=document.getElementById('lampara');
            checks[4]=document.getElementById('baño');
            checks[5]=document.getElementById('tocador');
            checks[6]=document.getElementById('calefactor');
            checks[7]=document.getElementById('puerta');
            checks[8]=document.getElementById('ventilador');
            for (var i = 0; i < 9; i++) {
                console.log("Dato "+datos[i]);
                console.log("Comparación 1:"+(datos[i]==="1"));
                console.log("Comparación 2:"+(datos[i]=="1"));
                console.log("Comparación 3:"+(datos[i]==="0"));
                console.log("Comparación 4:"+(datos[i]=="0"));
                if(datos[i]==="1"){
                    checks[i].checked=true;
                }else if(datos[i]==="0"){
                    checks[i].checked=false;
                }
                //console.log("Dato "+i+"=>"+datos[i]+"

                Tipo=>"+typeof(datos[i])+" toString=>"+datos[i].toString());
            }

              document.getElementById("temperatura").innerHTML=datos[9]+"C";
                document.getElementById("humedad").innerHTML=datos[10]+"%";
        };
    }

    function enviar() {
        x="";
        d1=document.getElementById('comedor');
        d2=document.getElementById('alacena');
        d3=document.getElementById('dormitorio');
        d4=document.getElementById('lampara');
        d5=document.getElementById('baño');
        d6=document.getElementById('tocador');
        d7=document.getElementById('calefactor');
        d8=document.getElementById('puerta');
        d9=document.getElementById('ventilador');
        datos=[d1,d2,d3,d4,d5,d6,d7,d8,d9];
        for (var i = 0; i < datos.length; i++) {
            if(datos[i].checked==true){
                x+="1";
            }else{
                x+="0";
            }
        }
        //alert("Datos a enviar:"+x);
        Socket.send(x);
    }´