ESP8266 – Acessando Web Server NodeMCU com Ajax

Neste tutorial vamos criar um web server com NodeMCU (ESP8266)  e acessá-lo a partir de uma  aplicação WEB (HTML5Bootstrap + Ajax) hospedada em um servidor na rede local.

Na Internet encontramos vários exemplos de como criar um web server com NodeMCU. No entanto, na maioria dos casos, a página HTML é gerada pelo próprio microcontrolador.
Neste post, vamos mostrar como criar um web server ESP8266 e acessá-lo de uma página hospedada em um servidor externo (Apache ou IIS) pela rede local.

Essa abordagem oferece muitas vantagens:

  • Economizamos a memória do ESP, pois a página WEB ficará em um servidor mais robusto.
  • Nossa aplicação WEB fica mais sofisticada, pois podemos agregar todos os recursos disponíveis ao ambiente que estamos utilizando como MVC, Banco de Dados, frameworks, etc.

O projeto com NodeMCU

Para variar,  o nosso experimento consiste em ligar/desligar um LED do ESP8266 via Wifi através de uma página hospedada em um servidor Apache.

Ok, eu sei que você está cansado de ver aplicações acendedoras de LED, mas este exemplo pode ser facilmente adaptado para qualquer outro tipo de dispositivo que quiser, como relés, motores, sensores, etc.

Vejamos uma imagem da aplicação em execução:

Acessando NodeMCU web server com Ajax
Acessando NodeMCU web server com Ajax

Recursos necessários

Para realizar essa experiência vamos precisar dos seguintes componentes:

Lado do Microcontrolador:

Lado do servidor:

  • Servidor WEB (Apache, NGINX, IIS, etc.). Sugiro o uWamp, servidor Apache/PHP/MySQL
  • Bootstrap  para a apresentação. No nosso caso, vamos acessar via CDN.

Criando Web Server ESP8266

Para programar a NodeMCU, vamos usar a própria linguagem e IDE do Arduino. Caso não esteja familiarizado com essa técnica, veja aqui um tutorial.

Nosso sketch vai realizar as seguintes operações:

  1. Conectar-se à rede wi-fi local;
  2. Criar um web server
  3. Aguardar as requisições de um cliente externo;
  4. Se a requisição contiver o parâmetro ONOFF, ligar o LED interno da placa;
  5. Gerar em HTML uma resposta padrão à requisição
  6. Voltar ao passo 3

Veja abaixo o código-fonte comentado:

Criando a página WEB com Ajax

Nossa página web será formatada com Bootstrap e apresentará um botão que, quando clicado, irá disparar uma requisição Ajax.
A requisição Ajax vai chamar o endereço do nosso servidor NodeMCU passando o parâmetro para ligar/desligar o LED.

Código-fonte:

Executando a aplicação:

Para executar a aplicação faça o seguinte:

  1. Copie o arquivo HTML para a pasta do seu servidor web. No meu caso é a pasta www.
  2. Suba o servidor Apache
  3. Suba o servidor do NodeMCU
  4. No browser, digite o endereço da nossa página html. No meu caso: http://localhost:8080/nodemcu_php.html

Conclusão

Isso é tudo. No próximo artigo veremos como enviar dados de sensores pelo ESP8266 para um banco de dados MySQL através de uma aplicação PHP.

Até lá!

Referências

https://hackaday.io/project/5150-arduino-ide-for-esp8266-quickstart-guide

http://www.instructables.com/id/Quick-Start-to-Nodemcu-ESP8266-on-Arduino-IDE/

35 comentários sobre “ESP8266 – Acessando Web Server NodeMCU com Ajax”

  1. Cara estava com a mesma ideia e tava me matando a dias, muito obrigado, isto vai me ajudar muito, eu gostaria de saber c vc fez o post sobre mandar dados do esp para um banco de dados, também to com a mesma ideia, c vc puder explicar toda a parte do lado banco de dados e php e também do lado do nodemcu desde já agradeço muito!!!

    1. Olá Vidal!
      Estou preparando um tutorial sobre envio de dados para o esp.
      Os sensores que vou usar são de temperatura, corrente e tensão e o banco é o mysql.Logo, logo estará aqui no blog…

      1. Me esclarece uma duvida?? eu sou fraco em html e nunca usei ajax, eu ja tenho uma pagina q sofri muito pra criar e nela pra ligar o rele eu chamo a pagina usando um popup so q tem o incomodo de aparecer o popup!! com o seu metodo :

        function OnOff() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open(“GET”, “http://192.168.0.31/LED=ONOFF”);
        xmlhttp.send();
        }

        ele faz igual o popup abre uma pagina e mostra ,ou nao so manda a requisição sem mostrar a pagina?? caso nao mostre, como eu faria pra incorporar seu codigo na minha pagina ela eh .php ,
        mais uma vez te agradeço pela atenção!!

        1. Olá Vidal,
          Esse código não chama outra página. Ele executa o comando e permanece na mesma página.
          Para incorporar na sua página, use JavaScript.
          Por exemplo, coloque um botão na sua página e capture o o evento onclick chamando essa função.
          No código tem o exemplo de como fazer isso.
          Abraço,
          José Cintra

      2. Boa tarde José.
        Parabéns pelos seus artigos/projetos.
        Você fez o artigo referido “envio de dados para o esp”?

        1. Olá Leomar!
          Pretendo escrever uma série de artigos sobre o NodeMCU. Mas só posso publicar quando estiverem bem testados.
          Agora em Janeiro devem sair mais alguns tutoriais…

  2. Bom dia… cara showw isso… fizemos isso na empresa pra abrir a porta…
    Estou brincando agora com o sensor de tensão pra saber se a lampada está acesa ou não… pois estou fazendo ligação paralela…
    Ai me surgiu uma dúvida, como eu faço pra “mandar” pra minha pagina web que a lâmpada está acesa?
    NO caso do meu teste ele altera um json, o nodemcu le esse json e ve se está ON ou OFF…
    Queria fazer exibir na web se a lâmpada está acesa ou apagada, porem não estou sabendo como fazer o nodemcu mandar pro meu servidor esse status…
    Estava pensando em passar um get para meu servidor externo e nele receber o get e salvar o parâmetro no json assim vou saber…

    O que sugere ???

    Vlwww

    1. Olá Rafael, Estou fazendo a mesma coisa que você, mas ainda não concluí o projeto.
      No meu caso é monitorar um ar condicionado, mas estou usando uma lâmpada na fase de testes.
      Acho que você está no caminho certo.
      Assim que tiver progredido no projeto, te envio mais detalhes

      1. Entrei para fazer a mesma pergunta do Rafael…
        O que pensei não usar o .json e sim um banco de dados mesmo…
        EX: crio uma tabela de Aparelhos
        dentro dela tenho
        LampadaSala
        LampadaCozinha
        Lampada…qlqcoisa (ou aparelho)….

        Tenho tbm o sensor de tensão que o Rafael disse e já está funcionando me dizendo …. 0 = apagada e 1 = acesa
        mais no meu mysql teria os campos
        Status / Acao /
        tipo dai quero pelo NodeMCU fazer assim
        mando o status atual
        0 é igual a Acao ? se for mantem o que ta feito
        se não vc altera e execulta
        a acao seria tbm 1 e 0 onde 0 é apagar e 1 acender
        o nodeMCU ficaria lendo em um while somente o campo ACAO e fazendo o que ta nele …
        será esse o caminho ?
        mais não sei como mandar esses dados

          1. perfeito …. conseguiu fazer… tive que parar e não consigo usar uma logica =/

  3. Olá José!
    Meu caro, encontrei o seu blog procurando exatamente o que será o teu proximo artigo, acho. Mas de antemão gostaria de saber se tu me indicaria algum outro artigo que me ajudasse, tenho que enviar dados do para o NodeMCU, os dados estam no banco de dados e foram informados pelo usuario.
    Desde já agradeço

  4. boa tarde José!
    compilei o codigo no mcu, ja esta com um ip na rede.
    abre a pagina de exemplo,
    criei a pagina em html no meu note com wamp,
    alterei o codigo na parte do ip na função do get,
    mas ele nao funcionou, o que poderia ser?

    abraço

    1. Lucas, poderia me passar mais detalhes? Ocorreu algum erro? Tentou digitar o endereço do servidor do Node direto no browser?

      1. se eu entro no endereço do nodemcu ele aparece a msg configurada no código…porém se eu entro na página que criei e clico no botão chamando a função onoff como descrito nas instruções ele não faz nada…não altera o Led…
        e parece que depois que eu clico no botão do php…o webserver do mcu para de responder no navegador…mas continua pingando

      2. ja tinha escrito parece que nao publicou…
        quando acesso o link do node ele fala que o servidor de exemplo esta ok, quando eu acesso a minha pagina php, ele nao faz nada..lembrando que alterei o codigo da pagina no lugar do IP, e mesmo assim ele nao reage ao comando Onoff

        1. Olá lucas!
          A sua página PHP está rodando no computador num servidor no localhost. Você precisa testar se esse servidor está no ar e o php funcionando. Outra coisa que precisa verificar qual é o pino do led interno, pois varia de modelo para modelo. Outra causa de erro é o Javascript.Se estiver uma vírgula faltando, não vai funcionar.
          Você precisa testar separadamente. Faça pequenos programas específicos para esses testes.
          Qualquer coisa fala aí…

          1. como eu faço para fazer este procedimento acionando qualquer outra porta do ESP?
            no arduino tem uma linha para declarar quem é quem ex;
            // PROGRAMAÇÃO PADRÃO DO SISTEMA
            const int rele1 = 22; // Rele 1 PA0
            const int rele2 = 23; // Rele 2 PA1

            no ESP não faz assim?

            obrigado
            abraço

  5. Olá, minha placa ESP8266 NodeMCU não cabe na minha protoboard de 830 furos. Fica no limite dos furos de barramento, não sobrando espaço para trabalhar. Eu posso usar uma protoboard de 1660 furos, colocando a ESP8266 NodeMCU no meio da protoboard e usando os barramentos externos para alimentar? Estou iniciando agora na eletrônica e desde já agradeço pela atenção.

    1. Ola Eliel.
      Deve ser a NodeMCU V3.
      Eu tenho uma dessas também. Não tem jeito. Ela não é “Breadboard Friendly”.
      Eu deixo ela fora da protoboard e ligo os fios VCC e GND dela na protoboard nos barramentos laterais.

    2. eu comprei um adaptador …
      para ela não ficar jogada …
      não passo o link aqui pq vai que o josé pensa que é propaganda
      rsrsrsrs
      mais se quiser te passo onde comprei

  6. José Cintra, muito obrigado pela grande ajuda, este post foi o mais direto e objetivo, obrigado.

    Você conseguiu fazer o projeto de gravar os status no banco mysql, pois estou querendo aprender a desenvolver isto também?

    Fico no aguardo

  7. NOTA 10! Me salvou de um embrólio há umas boas semanas sem solução..Que Deus o conserve com esse espírito colaborador. Obrigado!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *