NodeMCU: Utiliser son esp8266 comme serveur web

Dans cet article, nous allons voir comment créer un serveur web basique via nodeMCU. Ce serveur web aura pour objectif de servir de pont entre notre navigateur web et la liaison serie de l'esp. Les messages envoyés dans le navigateur seront écrits sur la liaison serie, et inversement. L'esp devra aussi heberger l'application cliente du navigateur, afin que notre systeme puisse fonctionner sans wifi ou au sein d'un portail captif (wifi sans acces à internet).

Si vous n'avez jamais manipulé NodeMCU, je vous suggere de lire en premier mon article sur la prise en main de NodeMCU afin d'avoir les bases d'upload de programme.

La partie Serveur web

Si vous avez suivi ce précédent article, votre ESP est connecté à votre réseau wifi, mais ne fait rien du tout. Nous allons lui ajouter un serveur web qui servira les fichiers depuis sa mémoire flash.

Pour rendre cette tache simple, j'ai developpé cette librairie. Cette librairie va transformer votre ESP à la fois en serveur de fichier mais aussi en serveur websocket.

La librairie est disponible ici (fichier à charger sur votre ESP en tant que websocket.lua)

Il ne reste plus qu'a lancer le programme! Dans ESPLorer, créez un fichier main.lua.

Grace à cette librairie, le code devient trivial:

-- Load library
dofile("websocket.lua")

-- Create file and websocket server on 80
websocket.createServer(80, function (socket)
  -- Called when a client connected to websocket
  print("WEBSOCK:NEW_CLIENT")

  -- On message from socket
  function socket.onmessage(payload, opcode)
    -- Getting message from socket, send to uart
    if opcode == 1 then
      print("WEBSOCK:"..payload)
    end

    -- Leaving message, clear up everything
    if opcode == 8 then
      socket.close()
      uart.on("data")
      print("WEBSOCK:LOST_CLIENT")
    end
  end

  -- Getting data from uart, send to socket
  uart.on("data", "\n", function(data)
    socket.send(data)
  end, 0)
end)

print("WEBSOCK:STARTED")

Chargez un fichier html sur votre ESP et essayez de le charger dans votre navigateur. Et voila! Votre ESP est capable d'heberger un mini site web! Il ne reste plus qu'a creer l'application coté navigateur.

La partie navigateur: Websocket

Dans le monde du web, tout fonctionne sur le principe de requete/reponse. Un navigateur requete un contenu a un serveur, qui va ensuite lui repondre ce contenu. Impossible d'envoyer a partir du serveur un contenu sans que le client l'ai au préalable demandé.

Pour que nos messages arrivent en temps reel au navigateur, nous allons utiliser les websockets. Le navigateur ouvre une connection vers le serveur et la laisse ouverte indéfinimoent. Cela permet au deux parties d'échanger des messages en direct. Cette technologie nécéssite un navigateur recent et à jour.

L'ouverture d'un Websocket en Javascript est ultra simple:

// Create a websocket connection
var socket = new WebSocket(`ws://L'IP DE VOTRE ESP`)

// On message received, parse it and log in console
socket.onmessage = function (event) {
      var reader = new FileReader()

      reader.addEventListener('loadend', (e) => {
        var dataAsText = e.srcElement.result.trim()
        console.log("Message reçu:", dataAsText)
      })

      reader.readAsText(event.data)
}

// Every two seconds we send a counter to the ESP
var counter = 0
this.setTimeout(function(){
  socket.send(counter++)
}, 2000)

Aller plus loin

Maintenant que notre ESP est capable de servir un site web, et de communiquer en temps réel, on peux developper un vrai site web pour commander votre projet arduino à distance !