【零知ESP8266教程】进阶篇2 http WEB服务器示例

roc2 · 发表于 2019-12-10 11:06:46

爱科技、爱创意、爱折腾、爱极致，我们都是技术控

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 roc2 于 2019-12-10 11:08 编辑

1、概述
HTTP web server作为ESP8266的一个常用功能，在这里使用零知开源平台进行该示例的演示。
2、软件和硬件
①硬件我们本次使用零知-ESP8266;
②软件使用零知开发工具（持续更新中），自带示例：

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

/**********************************************************
* 文件: x.ino by 零知实验室([url]www.lingzhilab.com[/url])
* -^^- 零知开源，让电子制作变得更简单！ -^^-
* 时间: 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）上述步骤成功后，我们现在打开浏览器，打开网址： 3.1.png

可以看到如下信息：

[STM] 【零知ESP8266教程】进阶篇2 http WEB服务器示例

爱科技、爱创意、爱折腾、爱极致，我们都是技术控

打赏

相关帖子

账号		自动登录	找回密码
密码			立即注册