處理GET請求
#include <ESP8266WiFi.h> // 提供Wi-Fi功能的程式庫
#include <ESP8266WebServer.h> // 提供網站伺服器功能的程式庫
#define LED_PIN 2
const char ssid[] = "你的WiFi網路SSID";
const char pass[] = "你的WiFi密碼";
ESP8266WebServer server(80); // 宣告網站伺服器物件與埠號
// 定義處理首頁請求的自訂函式
void rootRouter() {
server.send(200, "text/html", "Hello from <b>ESP8266</b>!");
}
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, pass);
/*
* 若要指定IP位址，請自行在此加入WiFi.config()敘述。
WiFi.config(IPAddress(192,168,1,50), // IP位址
IPAddress(192,168,1,1), // 閘道（gateway）位址
IPAddress(255,255,255,0)); // 網路遮罩（netmask）
*/
while (WiFi.status() != WL_CONNECTED) {
delay(500); // 等待WiFi連線
Serial.print(".");
}
Serial.println("");
Serial.print("WiFi connected, IP: ");
Serial.println(WiFi.localIP()); // 顯示ESP8266裝置的IP位址
server.on("/index.html", rootRouter); // 處理首頁連結請求的事件
server.on("/", rootRouter);
// 處理GET或POST請求
server.on("/sw", []() {
String state=server.arg("led");
if (state == "on") {
digitalWrite(LED_PIN, LOW);
} else if (state == "off") {
digitalWrite(LED_PIN, HIGH);
}
server.send(200, "text/html", "LED is <b>" + state+"</b>.");
});
server.onNotFound([](){ // 處理「找不到指定路徑」的事件
server.send(404, "text/plain", "File NOT found!");
});
server.begin();
Serial.println("HTTP server started.");
}
void loop() {
server.handleClient(); // 處理用戶連線
}
ESP8266 主程式碼
#include <ESP8266WiFi.h> // 提供Wi-Fi功能的程式庫
#include <ESP8266WebServer.h> // 提供網站伺服器功能的程式庫
#include <ESP8266mDNS.h>
#include "index.h"
const byte LED_PIN = 2;
const byte PWM_PIN = 0;
const char ssid[] = "你的WiFi網路SSID";
const char pass[] = "你的WiFi密碼";
ESP8266WebServer server(80); // 宣告網站伺服器物件與埠號
// 定義處理首頁請求的自訂函式
void rootRouter() {
server.send (200, "text/html", PAGE_INDEX );
}
void setup() {
pinMode(LED_PIN, OUTPUT);
Serial.begin(115200);
WiFi.begin(ssid, pass);
/*
* 若要指定IP位址，請自行在此加入WiFi.config()敘述。
WiFi.config(IPAddress(192,168,1,50), // IP位址
IPAddress(192,168,1,1), // 閘道（gateway）位址
IPAddress(255,255,255,0)); // 網路遮罩（netmask）
*/
while (WiFi.status() != WL_CONNECTED) {
delay(500); // 等待WiFi連線
Serial.print(".");
}
Serial.println("");
Serial.print("WiFi connected, IP: ");
Serial.println(WiFi.localIP()); // 顯示ESP8266裝置的IP位址
if (!MDNS.begin("jarvis")) {
Serial.println("Error setting up MDNS responder!");
while(1) {
delay(1000);
}
}
Serial.println("mDNS responder started");
server.on ( "/", rootRouter);
server.on ( "/index.html", rootRouter);
server.on ("/sw", []() {
String state = server.arg("led");
if (state == "ON") {
digitalWrite(LED_PIN, HIGH);
} else if (state == "OFF") {
digitalWrite(LED_PIN, LOW);
}
Serial.print("LED_PIN: ");
Serial.println(state);
});
server.on ("/pwm", []() {
String pwm = server.arg("led");
int val = pwm.toInt();
analogWrite(PWM_PIN, val);
Serial.print("PWM: ");
Serial.println(val);
});
server.onNotFound([](){ // 處理「找不到指定路徑」的事件
server.send(404, "text/plain", "File NOT found!");
});
server.begin();
Serial.println("HTTP server started.");
MDNS.setInstanceName("Cubie's ESP8266");
MDNS.addService("http", "tcp", 80);
}
void loop() {
server.handleClient(); // 處理用戶連線
}
index.h
const char PAGE_INDEX[] PROGMEM = R"=====(
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP8266物聯網</title>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
font-family: "微軟正黑體", "黑體-繁", sans-serif;
}
#slider {
width: 300px;
margin: 15px;
}
</style>
</head>
<body>
<h1>燈光控制器</h1>
LED亮度：
<div id="slider"></div>
LED開關：
<div id="LED_SW">
<input type="radio" id="LED_ON" class="SW" value="ON" name="SW"><label for="LED_ON"> 開 </label>
<input type="radio" id="LED_OFF" class="SW" checked="checked" value="OFF" name="SW"><label for="LED_OFF"> 關 </label>
</div>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
var light = 127;
$(function() {
$( "#LED_SW" ).buttonset();
$(".SW").change(function(evt) {
var state = $(this).val();
$.post("/sw", {led:state});
});
$( "#slider" ).slider({
orientation: "horizontal",
range: "max",
max: 255,
value: 127,
change: function(){
var val = $(this).slider("value");
$.post("/pwm", {led:val});
}
});
});
</script>
</body>
</html>
)=====";