7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-09-22

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

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

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

1.png

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

の流れになります。

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

#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
こんな感じで、ルーターに接続し、その際のIPアドレスが取得できます。

###メモ

WiFiServer server(80);

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

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

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

を参考にしました。

<!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コードに関して、まとめて送ることは難しいようです。一行ずつ送ります。"を'に変換して送りました。

#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();
    
  }
}
server.begin();

を忘れないようにしてください。これがないとページが存在しないことになります。

client.println("");

で送れるようです。

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

3.png

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

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

を参考にしました。

#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

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

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

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

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

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?