私の入門記録であって、入門者向け解説サイトではありません。

Wi-Fi と WEBサーバー

  • 投稿日:
  • Category:

次に、Wi-Fi ルーターとの接続、及びWebサーバー機能を試す。引き続き、以下ページのサンプルで検証を行なってみた。
FPGAで遊んでみる

手順としては、

  1. スケッチ例→WiFi→SimpleWiFiServer を選択
  2. ソースの ssid、password 部分を自ルーターに合わせる
  3. 確認用 LED出力ピンを前回使用の外部回路に合わせる
  4. 書き込みを行ない、シリアルモニタで IPアドレスを確認
  5. 任意のブラウザで URLにアクセスし動作確認
といった流れになる。

[ スケッチ:Esp32_SimpleWiFiServer ]

#include <WiFi.h>
const char *ssid = "********";
const char *password = "********";
int led_pin=33;
NetworkServer server(80);
void setup() {
  Serial.begin(115200);
  pinMode(led_pin, OUTPUT);  // set the LED pin mode
  delay(10);
  // We start by connecting to a WiFi network
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}
void loop() {
  NetworkClient client = server.accept();  // listen for incoming clients
  if (client) {                     // if you get a client,
    Serial.println("New Client.");  // print a message out the serial port
    String currentLine = "";        // make a String to hold incoming data from the client
    while (client.connected()) {    // loop while the client's connected
      if (client.available()) {     // if there's bytes to read from the client,
        char c = client.read();     // read a byte, then
        Serial.write(c);            // print it out the serial monitor
        if (c == '\n') {            // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();
            client.print("<html lang=\"ja\">");
            client.print("<head>");
            client.print("<meta charset=\"UTF-8\">");
            client.print("</head><body>");
            // the content of the HTTP response follows the header:
            client.print("<h1>Wi-Fi経由のLED点灯</h1>");
            client.print("Click <a href=\"/H\">here</a> to turn the LED on pin 33 on.<br>");
            client.print("Click <a href=\"/L\">here</a> to turn the LED on pin 33 off.<br>");
            client.print("</body>");
            client.print("</html>");
            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;
          } else {  // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
        // Check to see if the client request was "GET /H" or "GET /L":
        if (currentLine.endsWith("GET /H")) {
          digitalWrite(led_pin, HIGH);  // GET /H turns the LED on
        }
        if (currentLine.endsWith("GET /L")) {
          digitalWrite(led_pin, LOW);  // GET /L turns the LED off
        }
      }
    }
    // close the connection:
    client.stop();
    Serial.println("Client Disconnected.");
  }
}

表示されたページ上で上側のリンクをクリックすると LEDオン、下側のリンクをクリックすると LEDオフとなる。以下、動作状況をムービーにて。

動画でブラウザのタブ部分を観察すると分かるが、リンクをクリックするとページが遷移して URL末尾が /H、又は /L の画面へジャンプし、LEDが反応する。出来ればこれを画面遷移せずにやりたいが、非同期の Webサーバーを構築出来る ESP32ライブラリがあるようなので、次はそれを実験してみたい。