【零知ESP8266】HTTP WEB 服务器示例

只看该作者 · 2019-6-20 14:59

1、概述

HTTP web server作为ESP8266的一个常用功能，在这里使用零知开源平台进行该示例的演示。

2、软件和硬件

硬件使用零知-ESP8266；

软件使用零知开发工具，自带示例：

3、方法步骤

（1）先在零知开发工具中打开AdvancedWebServer示例，或者复制下面的代码到零知开发工具中：

复制

/**********************************************************

*    文件: x.ino      by 零知实验室

*    -^^- 零知开源，让电子制作变得更简单！ -^^-

*    时间: 2019/05/28 12:22

*    说明: 

************************************************************/

 

#include <ESP8266WiFi.h>

#include <WiFiClient.h>

#include <ESP8266WebServer.h>

#include <ESP8266mDNS.h>

 

#ifndef STASSID

#define STASSID "ssid"

#define STAPSK  "passwd"

#endif

 

const char *ssid = STASSID;

const char *password = STAPSK;

 

ESP8266WebServer server(80);

 

const int led = 13;

 

void handleRoot() {

  digitalWrite(led, 1);

  char temp[400];

  int sec = millis() / 1000;

  int min = sec / 60;

  int hr = min / 60;

 

  snprintf(temp, 400,

 

           "<html>\

  <head>\

    <meta http-equiv='refresh' content='5'/>\

    <title>ESP8266 Demo</title>\

    <style>\

      body { background-color: #cccccc; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }\

    </style>\

  </head>\

  <body>\

    <h1>Hello from ESP8266!</h1>\

    <p>Uptime: %02d:%02d:%02d</p>\

    <img src=\"/test.svg\" />\

  </body>\

</html>",

 

           hr, min % 60, sec % 60

          );

  server.send(200, "text/html", temp);

  digitalWrite(led, 0);

}

 

void handleNotFound() {

  digitalWrite(led, 1);

  String message = "File Not Found\n\n";

  message += "URI: ";

  message += server.uri();

  message += "\nMethod: ";

  message += (server.method() == HTTP_GET) ? "GET" : "POST";

  message += "\nArguments: ";

  message += server.args();

  message += "\n";

 

  for (uint8_t i = 0; i < server.args(); i++) {

    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";

  }

 

  server.send(404, "text/plain", message);

  digitalWrite(led, 0);

}

 

void setup(void) {

  pinMode(led, OUTPUT);

  digitalWrite(led, 0);

  Serial.begin(115200);

  WiFi.mode(WIFI_STA);

  WiFi.begin(ssid, password);

  Serial.println("");

 

  // Wait for connection

  while (WiFi.status() != WL_CONNECTED) {

    delay(500);

    Serial.print(".");

  }

 

  Serial.println("");

  Serial.print("Connected to ");

  Serial.println(ssid);

  Serial.print("IP address: ");

  Serial.println(WiFi.localIP());

 

  if (MDNS.begin("esp8266")) {

    Serial.println("MDNS responder started");

  }

 

  server.on("/", handleRoot);

  server.on("/test.svg", drawGraph);

  server.on("/inline", []() {

    server.send(200, "text/plain", "this works as well");

  });

  server.onNotFound(handleNotFound);

  server.begin();

  Serial.println("HTTP server started");

}

 

void loop(void) {

  server.handleClient();

  MDNS.update();

}

 

void drawGraph() {

  String out = "";

  char temp[100];

  out += "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"400\" height=\"150\">\n";

  out += "<rect width=\"400\" height=\"150\" fill=\"rgb(250, 230, 210)\" stroke-width=\"1\" stroke=\"rgb(0, 0, 0)\" />\n";

  out += "<g stroke=\"black\">\n";

  int y = rand() % 130;

  for (int x = 10; x < 390; x += 10) {

    int y2 = rand() % 130;

    sprintf(temp, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke-width=\"1\" />\n", x, 140 - y, x + 10, 140 - y2);

    out += temp;

    y = y2;

  }

  out += "</g>\n</svg>\n";

 

  server.send(200, "image/svg+xml", out);

}

（2）验证上述代码并上传到零知-ESP8266开发板；

（3）我们打开零知开发工具的串口调试窗口，可以看到如下信息：

（4）现在我们用ping工具测试下网络，得到如下信息：

（5）上述步骤成功后，我们现在打开浏览器，打开网址：http://esp8266.local，可以看到如下信息：

更多详细资料可到零知实验室官网免费获取。

【零知ESP8266】HTTP WEB 服务器示例

相关下载

相关帖子