目的:
WebServer クラスを使用した WEBサーバー処理を行う。以前作成した "POST受信" のスケッチを WebServer.h をインクルードして作り直す。
WebSerberクラス使用の概要 (変更点など):
WebSerberクラスを使用することによる変更点は以下の通り。- オブジェクトの生成
以前は WiFiServer で生成していたが、WevServer で生成する。 WebServer server(80) ; - ハンドル処理
WiFiServerでは loop 内で クライアントから受信した文字列を解析していた。
WebSerberクラスでは、クライアントからの要求に対する処理(ハンドル処理)関数を作成し、setup 内で server.on で呼び出す。
ハンドル処理はアクセスされた URL, GET や POST の種別毎 等に作成する。
server.on の書式は
server.on(<URL>,<GET/POST種別等>,ハンドル処理関数) ;
例 : server.on("/",HTTP_GET,handleROOT) ;
第2引数 (HTTP_GET等) は 省略可能。 - HTML 送信
WiFiServerでは、client.println 等で文字列を送信していたが、
WebSerberクラスでは server.send で 送信する。
server.send の書式は
server.send(<ステータスコード>,<タイプ>,<内容>)
例 : server.send(200,"text/html",htmlPage)
htmlPage : HTML内容(コンテンツ)
server.send は 各ハンドル処理がら呼び出す。 - loop()内処理
loop()関数内では
server.hanggleClient() ;
を記述するのみ。
スケッチ例
"POST受信" を変更した例を以下に示す。// +==========================================================================+
// | WiFi LED ON/OFF TEST ( GET / POST ) |
// +==========================================================================+
//
#include <WiFi.h> // WiFi 用
#include <NetworkClient.h>
#include <WebServer.h> // Wevサーバー 用
//
// ----------------------------------------------------------------------------
// 各種設定 --
// ----------------------------------------------------------------------------
const char* ssid = "xxxxxxxxxxxxxxx"; // WiFi AP SSID
const char* password = "xxxxxxxxxxxxx"; // WiFi AP パスワード
//
String html; // HTML 格納用
//
IPAddress ip(192, 168, 1, 32); // ESP32 IPアドレス
IPAddress gateway(192,168, 1, 1); // ゲートウェイアドレス
IPAddress subnet(255, 255, 255, 0); // サブネットマスク
IPAddress DNS(192, 168, 1, 90); // DNS アドレス
//
WebServer server(80); // オブジェクトの生成
//
// ----------------------------------------------------------------------------
// メイン HTML --
// ----------------------------------------------------------------------------
const char* htmlPage = R"rawliteral(
<!DOCTYPE html><html lang='ja'>
<head><meta charset='UTF-8'>
<style>input {margin:8px;width:100px;}
div {font-size:16pt;text-align:center;width:250px;border:solid 4px #93ff93;}
</style>
<title>Color LED Controller</title>
</head>
<body>
<div><p>LED ON/OFF</p>
<form method='get'>
<input type='submit' name='btn1' value='GET_ON' />
<input type='submit' name='btn1' value='GET_OFF' />
</form>
<form method='post'>
<input type='submit' name='btn2' value='POST_ON' />
<input type='submit' name='btn2' value='POST_OFF' />
</form>
</div>
</body>
</html>
)rawliteral";
//
// ----------------------------------------------------------------------------
// HTMLページ レスポンス処理 --
// ----------------------------------------------------------------------------
void handleGET() { // "get"を受信した場合の処理
String sdt ="---------------\n" ; //
for (uint8_t i = 0; i < server.args(); i++) { // 受信した name と value を
sdt += " " + server.argName(i) + ": " ; // 表示
sdt += server.arg(i) + "\n"; //
} //
sdt += "---------------" ; //
Serial.println(sdt) ; //
Serial.println("") ; //
if (server.arg("btn1") == "GET_ON") { // 受信した値を判定して
Serial.println(" led on "); // LED を ON/OF
digitalWrite(2, HIGH); // LED on
} else if (server.arg("btn1") == "GET_OFF") { //
Serial.println(" led off "); //
digitalWrite(2, LOW); // LED off
} //
server.send(200, "text/html", htmlPage); // メインHTML を送信
} //
void handlePOST() { //
String sdt ="---------------\n" ; //
for (uint8_t i = 0; i < server.args(); i++) { // 受信した name と value を
sdt += " " + server.argName(i) + ": " ; // 表示
sdt += server.arg(i) + "\n"; //
} //
sdt += "---------------" ; //
Serial.println(sdt) ; //
Serial.println("") ; //
if (server.arg("btn2") == "POST_ON") { // 受信した値を判定して
Serial.println(" led on "); // LED を ON/OFF
digitalWrite(2, HIGH); // LED on
} else if (server.arg("btn2") == "POST_OFF") { //
Serial.println(" led off "); //
digitalWrite(2, LOW); // LED off
} //
server.send(200, "text/html", htmlPage); // メインHTML を送信
} //
void handleNotFound() { //
String message = "File Not Found\n\n"; // 接続先のURLが 無い場合の
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) + ": " ; //
message += server.arg(i) + "\n" ; //
} //
server.send(404, "text/plain", message); // メッセージを WEB に送信
} //
//
// ----------------------------------------------------------------------------
// 初期設定 --
// ----------------------------------------------------------------------------
void setup() //
{ //
Serial.begin(115200); // シリアル出力開始
pinMode(2, OUTPUT); // LED 用 PIN 設定
//
WiFi.config(ip, gateway, subnet, DNS); // ESP32 WiFi 設定
delay(10); //
Serial.println(); // デバッグ用出力
Serial.print("Connecting to "); // :
Serial.println(ssid); // :
WiFi.begin(ssid, password); // WiFi 開始
//
while (WiFi.status() != WL_CONNECTED) { // WiFi 接続待ち
delay(500); //
Serial.print("."); //
} //
Serial.println(""); // デバッグ用出力
Serial.println("WiFi connected."); // 接続先の IP address を
Serial.println("IP address: "); // シリアルに出力
Serial.println(WiFi.localIP()); //
//
server.on("/", HTTP_GET ,handleGET) ; // GET の設定
server.on("/", HTTP_POST,handlePOST) ; // POST の設定
server.onNotFound(handleNotFound) ; // 存在しない URL の場合
server.begin(); // WiFi サーバ 開始
//
} //
//
// ----------------------------------------------------------------------------
// メインループ --
// ----------------------------------------------------------------------------
void loop(){ //
server.handleClient(); // クライアント処理
//
} //
スケッチの説明は、スケッチ内のコメントを参照。WebServer 使用 への変更に伴い、HTML の書き方も変更した。
文字列 (String) へ 格納する際、 R"rawliteral( と )rawliteral"; で囲む。
こうすることで、改行などのエスケープ文字を そのまま記述可能になる。
0 件のコメント:
コメントを投稿