分享科技與遊戲 by HKGoldenMr.A: 使用 ESP8266 向伺服器發出 HTTP 請求

2022-08-31

使用 ESP8266 向伺服器發出 HTTP 請求

之前曾經借用 Arduino IOT Cloud 製作遙距控制的網頁伺服器
但免費版的 Arduino IOT Cloud 的功能及自訂化不多
如果更多自訂化功能便需要向 Arduino IOT Cloud 購買完整功能
支持 Arduino 是不錯的選擇，但如果需要降低成本又具備自訂化功能，仍然是有方法

線路原型
接駁線路
編寫程式碼
編寫網頁
總結

最簡單的方法就自建網頁伺服器或註冊免費網頁伺服器
使用 ESP8266 的 HTTP請求功能，讓 ESP8266 根據回應內容，控制引腳訊號

線路原型

使用 (共陽)七段顯示器簡單測試

接駁線路

實際接駁線路

編寫程式碼

#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
 
WiFiClient wifiClient = WiFiClient();
 
const byte VCC = 16;
const byte GND[] = {2, 10, 9, 3, 1, 0, 4, 5};
 
// place your WiFi SSID
char* ssid = "";
// place your WiFi Password
char* password = "";
// place your HTTP Server URL
char* url = "";
 
void setup() {
    pinMode(VCC, OUTPUT);
    digitalWrite(VCC, HIGH);
    for (byte i = 0; i < sizeof(GND) / sizeof(byte); i++) {
        pinMode(GND[i], OUTPUT);
        digitalWrite(GND[i], HIGH);
    }
    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        digitalWrite(16, !digitalRead(16));
    }
    digitalWrite(16, HIGH);
}
 
void loop() {
    if (WiFi.status() == WL_CONNECTED) {
        String response = httpGETRequest(url);
        byte data = response.charAt(0);
        for (byte i = 0; i < sizeof(GND) / sizeof(byte); i++) {
            digitalWrite(GND[i], (data & (1 << i)) == 0);
        }
    }
    delay(1000);
}
 
String httpGETRequest(char* serverPath) {
    HTTPClient httpClient = HTTPClient();
    httpClient.begin(wifiClient, serverPath);
    int httpResponseCode = httpClient.GET();
    String response = "";
    if (httpResponseCode > 0) {
        response = httpClient.getString();
    }
    httpClient.end();
    return response;
}

ESP8266 除了能成為臨時伺服器，回應 HTTP請求，亦可以發送 HTTP請求到其他伺服器
根據獲取的回應，執行特定操作

編寫網頁

<?php
header("Content-Type: image/svg+xml; charset=UTF-8");
$file = "data.txt";
if (!file_exists($file)) {
    file_put_contents($file, pack("C", 0));
}
if (isset($_POST["data"])) {
    file_put_contents($file, pack("C", $_POST["data"]));
    die();
}
?>
<svg width="1000" height="1400" version="1.1" viewBox="0 0 50000 70000" xmlns="http://www.w3.org/2000/svg">
    <script>
function updateData(data) {
    data = "data=" + data;
    var xhr = new XMLHttpRequest();
    xhr.open("POST", window.location.href, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(data);
}
 
window.addEventListener("load", function() {
    var segments = [
        document.getElementById("a"),
        document.getElementById("b"),
        document.getElementById("c"),
        document.getElementById("d"),
        document.getElementById("e"),
        document.getElementById("f"),
        document.getElementById("g"),
        document.getElementById("p")
    ];
    window.setInterval(function() {
        var xhr = new XMLHttpRequest();
        xhr.responseType = "arraybuffer";
        xhr.open("GET", "<?php echo $file; ?>", true);
        xhr.addEventListener("readystatechange", function() {
            if (this.readyState == XMLHttpRequest.DONE &amp;&amp; this.status == 200) {
                var data = new Uint8Array(this.response);
                for (var i in segments) {
                    var j = 1 &lt;&lt; i;
                    segments[i].setAttribute("fill", "#" + (((data &amp; j) > 0) ? "FF0000" : "444444"));
                    segments[i].setAttribute("onclick", "updateData(" + (data ^ j) + ");");
                }
            }
        });
        xhr.send();
    }, 1000);
});
    </script>
    <rect width="50000" height="70000" fill="#000000"/>
    <polygon id="a" points="41776,10248 38792,14716 19424,14716 16447,10247 17935,08759 40284,08759"/>
    <polygon id="b" points="43264,11735 44753,14717 41775,31109 38792,34085 35815,31109 38792,16206"/>
    <polygon id="c" points="38792,35576 40284,38553 37305,54945 34324,57925 31345,54945 34324,40046"/>
    <polygon id="d" points="07505,59410 10486,54945 29857,54945 32835,59414 31345,60902 08995,60902"/>
    <polygon id="e" points="07505,38554 10486,35576 13464,38554 10486,53453 06013,57924 04526,54945"/>
    <polygon id="f" points="17936,14717 14955,29619 10486,34085 08995,31108 11976,14716 14955,11734"/>
    <polygon id="g" points="34325,31108 37305,34084 34325,37063 14955,37063 11975,34084 14955,31108"/>
    <circle id="p" cx="41137" cy="57921" r="03138"/>
</svg>