2022年7月27日水曜日

ESP8266とESP32で、WIFIのWEBサーバ構築

今日はESP8266とESP32のWIFI機能を勉強しましょう。

ESP8266とESP32両方もWIFI機能が付きます。同じWIFIを接続している時、相互でデータ通信ができます。それに、PCや携帯とも通信できます。

今回は下記のようなWIFIネットを作ります。

・ESP8266:WiFiルーターです。ESP32、PC、携帯はすべて該当WiFiにつながる。
・ESP32:Webサーバーです。PC、携帯のブラウザーはこのサーバーへHttpアクセスできる。

■APモード
アクセスポイントモード(AP)はブリッジモードとも呼ばれ、Wi-Fiルーターを無線LANの親機として利用する機能です。 パソコンやスマートフォンなどを無線で接続したい時に切り替えるモードと考えると違いが分かりやすいでしょう。

下記のプログラムで、楽々作れます。

#include <ESP8266WiFi.h>
const char *ssid = "phoenix";  // WIFI名
const char *password = "12345678"; // パスワード
void setup() {
  Serial.begin(115200);
  WiFi.softAP(ssid, password);  // APモード
  Serial.print("Access Point: ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.softAPIP());
}
void loop() {
}

 ソースをESP8266にアップロードすると、「phoenix」とのWiFiが見えます。

 ※原因はわかりませんが、何回で試して、該当WiFiが見つかれません。結局はあったから、よかった。

ソースでのパスワードを入力して、つながれます。
PCを該当Wifiを接続すると、「Cmd」ウインドウで「Ping」コマンドを検証して、
順調接続しました。

■Webサーバー
WiFiライブラリを利用して、簡単なWebサーバーが構築できます。
プログラムは下記ようになります。
#include <WiFiMulti.h>

WiFiServer server(80);
WiFiClient WSclient;

WiFiMulti wifiMulti;

const char *html = "HTTP/1.1 200 OK\r\n"
  "Content-type:text/html\r\n"
  "Connection:close\r\n"    
  "\r\n"    //1行空行
  "<!DOCTYPE html>\n"
  "<html lang='ja'>\n"
  "<head>\n"
  "<meta charset='UTF-8'>\n"
  "<meta name='viewport' content='width=device-width'>\n"
  "<title>Phoenix-WebServer</title>\n"
  "</head>\n"
  "<body>\n"
  "Hello World!\n"
  "</body>\n"
  "</html>\n";

bool wifi_connect(){
  wifiMulti.addAP("phoenix", "12345678");  // Wifiに接続

  Serial.println(F("Connecting Wifi..."));
  if(wifiMulti.run() == WL_CONNECTED) {
    Serial.println(F("--- WiFi connected ---"));
    Serial.print(F("SSID: "));
    Serial.println( WiFi.SSID() );

    Serial.print(F("IP Address: "));
    Serial.println( WiFi.localIP() );

    Serial.print(F("signal strength (RSSI): "));
    Serial.print( WiFi.RSSI() );    // 信号レベル
    Serial.println(F("dBm"));

    return true;
  } else {
    return false;
  }
}

void printHTML(WiFiClient &client){
    Serial.println("sendHTML ...");
    client.print(html);
    Serial.println("sendHTML Done");    
}

void Ini_HTTP_Response(void){
  String req;
  
  WiFiClient client = server.available();        // サーバーに対して外部から接続があるかどうかを監視
  if(!client) return;  // クライアントからのアクセス要求があり、接続が確立し、読み取りが出来る状態になるとtrue

  while(client.connected()){                    // クライアントが接続状態の間
    if(!client.available()) break;              // 読み取り可能バイトが無いなら終了
    Serial.println(F("----Client Receive----"));    
    req = client.readStringUntil('\n');          // 1行読み込み

    if(req.indexOf("GET / HTTP") != -1){        // ブラウザからリクエストを受信したらこの文字列を検知する
      while(req.indexOf("\r") != 0){   // ブラウザからのリクエストで空行(\r\nが先頭になる)まで読み込む
        req = client.readStringUntil('\n');      // \nまで読み込むが\n自身は文字列に含まれず、捨てられる
        Serial.println(req);
        if(req.indexOf("websocket") != -1){
          Serial.println(F("\nPrint WS HandShake---"));
          return;
        }
      }
      delay(10);                                // 10ms待ってレスポンスをブラウザに送信
      Serial.println(F("\nPrint HTML-----------"));
      printHTML(client);                        // レスポンス(HTML)を返す
      Serial.println(F("\nPrint HTML end-------"));
    } else{                                        // その他のリクエスト(faviconなど)全部読み飛ばす
      Serial.println(F("*** Anather Request ***"));
      Serial.print(req);
      while(client.available()){
        Serial.write(client.read());            // ブラウザからデータが送られている間読み込む
      }
    }
  }
}

void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
  if(wifi_connect()){ 
    server.begin();      // クライアントの接続待ち状態にする
  }
}

void loop() {
  // put your main code here, to run repeatedly:
  Ini_HTTP_Response();
}

■検証

まずはPCです。シリアルモニタで出力されたIPアドレスを入力してみます。

出きった!!!
携帯も同じで試します。
OK!!



0 件のコメント:

コメントを投稿

シンプルロボットカーセットの使い方

■ マイコン :ESP3266-CH340  シンプルの案として、マイコンは安いESP8266-CH340開発ボードを選びました。該当マイコンもWIFI機能があります。  ドライバーダウンロード場所:    https://sparks.gogo.co.nz/ch340.html...