ESP32をwifiに接続してデータの送受信をする

#概要
タイトル通り、ESP32をwifiに接続してデータの送受信をしたいと思います。
Arduino　IDE環境で行います（IDFとかマルチタスクとかもやりたい）。

普通に関数を指定したら、wifiを通してPCにデータを送りたいのですが、
その方法は見つからなかったです。

ESP32を**HTMLデータ**を返すサーバーとし、PC側からサーバーのIPアドレスを用いて接続するとHTMLデータが得られるという流れです。
直接数値を受け渡す方法が知りたいですが見つけられませんでした

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405484/d96eeb65-d9b6-91aa-43d1-134007bceaee.png)


1. ESP32はルーターに接続
2. ESP32で作られたサーバーのIPアドレスを知る
3. PCはIPアドレスにWebブラウザを通して接続する（Webブラウザ以外の接続ができれば、HTMLデータ以外での送受信ができるはず）

の流れになります。

#ルーターに接続し、IPアドレスを取得する

```C
#include <WiFi.h>

const char *ssid="dadfgas";          //  *** 書き換え必要 ***
const char *password="asdgdageragfs";    //  *** 書き換え必要（8文字以上）***

WiFiServer server(80);

void setup() {
  
  Serial.begin(250000);
  
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.println("connecting");
  }
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop() {
}
```
このプログラムを実行すると

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405484/2c0e2721-b327-4f8c-c0c1-d840c7fed9f7.png)
こんな感じで、ルーターに接続し、その際のIPアドレスが取得できます。

###メモ

```C
WiFiServer server(80);
```
はポート80を使用するという意味らしい。ポート80はWebサーバ（HTMLデータ送受信）として使用するという意味のようである。

https://ascii.jp/elem/000/000/458/458706/

#何者かが接続したらHTMLデータを送る
次に、ESP32サーバーに接続するデバイスがあれば、そのデバイスにHTMLデータを送り付けるプログラムを作ります。
予備知識として、HTTPはHTMLデータを送受信する通信手順（プロトコル）を指します。

https://www.nic.ad.jp/ja/basics/terms/http.html

次のようなHTMLコードをESP32サーバーからPCに送ってみます。

https://techacademy.jp/magazine/4808

を参考にしました。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの書き方</title>
  </head>
  <body>
    <h1>HTMLの書き方</h1>
    <p>はじめてのHTMLを作りました</p>
  </body>
</html>
```

---------
ESP32プログラム
HTMLコードに関して、まとめて送ることは難しいようです。一行ずつ送ります。"を'に変換して送りました。

```C++
#include <WiFi.h>

const char *ssid="asdfada";          //  *** 書き換え必要 ***
const char *password="sagasfgfsads";    //  *** 書き換え必要（8文字以上）***

WiFiServer server(80);

void setup() {
  
  Serial.begin(250000);
  
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.println("connecting");
  }
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop() {
  WiFiClient client = server.available(); 
  if (client) {                  //接続PCが存在
    while (client.connected()) { // PCがつながっている間、以下をループ
      client.println("<!DOCTYPE html><html lang='ja'>;");
      client.println("<head><meta charset='UTF-8'>");
      client.println("<title>HTMLの書き方</title>");
      client.println("</head><body><h1>HTMLの書き方</h1>");
      client.println(" <p>はじめてのHTMLを作りました</p> </body></html>");
      Serial.println("client connected");
      delay(1000);
    }
    client.stop();
    
  }
}
```

```C++
server.begin();
```
を忘れないようにしてください。これがないとページが存在しないことになります。

```C++
client.println("");
```
で送れるようです。

###結果
Chromeの検索ボックスにIPアドレスを入力（コピペ）すれば接続できます。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405484/75a3569f-f307-e46d-0806-1c0148cedf46.png)

ずっと、1秒ごとにHTMLデータが追加されるという結果になっています。
よってどんどん、Webサイトなのに自動で変化していきます！
これなら、リアルタイムでデータを表示ができそうです！
左の画面はChromeならF12で出せます。

#データロガーにする
HTMLデータとして、数値を送信し。どの程度の速度で数値を送信できるか確認してみます。文字コードで送るので、非常に効率は悪いですが。
検証のためにRTCより現在時刻を取得し、どれだけ遅れているか試します。

https://www.autumn-color.com/archives/839

を参考にしました。

```C++
#include <WiFi.h>

const char *ssid = "sadag";        //  *** 書き換え必要 ***
const char *password = "sadfasd";  //  *** 書き換え必要（8文字以上）***

WiFiServer server(80);

void setup() {

  Serial.begin(250000);

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.println("connecting");
  }
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop() {
  WiFiClient client = server.available();
  if (client) {                  //接続PCが存在
    client.println("<!DOCTYPE html><html lang='ja'>;");
    client.println("<head><meta charset='UTF-8'>");
    client.println("<title>HTMLの書き方</title>");
    client.println("</head><body><h1>HTMLの書き方</h1>");
    client.println(" <p>はじめてのHTMLを作りました</p> </body></html>");
    while (client.connected()) { // PCがつながっている間、以下をループ
      client.println("<!DOCTYPE html><html lang='ja'>;");
      client.println(" <body><p>");
      time_t t;
      struct tm *tm;
      t = time(NULL);
      tm = localtime(&t);
      client.print(tm->tm_min);
      client.print(" ");
      client.print(tm->tm_sec);
      client.println("</p> </body></html>");
      Serial.println("client connected");
      //delay(1000);
    }
    client.stop();

  }


}
```

###結果
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405484/66c3bb51-d01a-7cac-c441-d48fcd25565a.png)

めっちゃ大量に送ってくれます。1秒に20個ぐらい送ってます。

ただ、コロン；が無駄に付与されていて使い勝手は悪そうです。

何とかして、HTMLデータでなく、生データでの通信方法を探したいと思います。


#参考にしたサイト
https://www.musen-module.com/experiment-column/esp32-experiment/