3-2.Webサーバ機能

2019年6月15日

電気回路と電子工作

Webサーバ機能を提供する電子工作ですが、スケッチのみの変更で機能を提供できるため、回路と配線は3-1と同じものを利用して工作します。
また、WebサーバはHTTPサーバのことを指しています。HTTPはWebサイトで利用されるプログラム言語のひとつですがWebサーバとHTTPサーバは同じものとして記述しています。

スケッチ(制御ソフトウェア)

Webサーバ機能を提供するスケッチを以下に示します。

Wi-Fiに関する説明は3-1で実施していますので、環境に合わせて設定など変更をして下さい。
今回は主にWebサーバに関するところを説明していきます。
①でWi-Fiライブラリに加えWebサーバに関するライブラリも宣言し読み込んでいます。利用できるWebサーバのライブラリはいくつかありますが、SPIFFSのファイルを送信できることなど多くの機能を利用できることから「ESPAsyncWebServer」というWebサーバのライブラリを利用します。本サーバを利用するため「#include 」で宣言しています。
(ESPAsyncWebServerライブラリのインストール方法は一番下に説明しています。)
④AsyncWebServerの変数Webserverを定義をします。この定義により「webserver」でWebサーバの処理を扱うことができます。また、()内の「80」はポート番号です。サーバ側のポート番号を定義し標準値通りの「80」に設定しています。
⑬で受け付けるパスを定義しWebサーバを起動します。今回アクセスするURLは以下のように定義でき、パスを任意に設定することでアクセスするURLを設定できます。 

通常、パスはサーバー内の処理やファイルを識別するために表しています。
例えば「http://192.168.1.123/abc」で受け付ける場合は「webServer.on ( “/abc”, 処理関数 );」と記載します。今回は「http://192.168.1.123」もしくは「http://192.168.1.123/」で受け付けるため「webServer.on ( “/”, 処理関数 );」と記載しています。
Webサーバへの要求処理(Webアクセス)があった場合に⑬で設定した内部処理(⑭)を実行します。
アクセス処理を設定したため、⑮でWebサーバを開始しています。

スケッチを書き込み起動後に、パソコンWebブラウザで「http://192.168.1.123」にアクセスした場合は以下のように表示されます。

今回は最小限に必要なテキスト”Hello World!”のみ設定しています。
通常、webサイトはHTMLと呼ばれるタグを用いて、html,head,bodyなどの基本構造に従って定義していきますが、今回はWebサーバの工作を目的にしているため表示は最小限で動作させています。

《ESPAsyncWebServerインストール》

①以下の2つのサイトにアクセスしダウンロードします。
(1)ESPAsyncWebServer
(2)AsyncTCP

②ダウンロードしたZipファイル(2つ)をダブルクリックし解凍します。
③解凍したフォルダ(2つ)をArduinoフォルダ(スケッチブックの保存場所)の「libraries」フォルダにそのまま移動して下さい。
【Arduinoフォルダ(スケッチブックの保存場所)】
ArduinoIDEの「ファイル」から「環境設定」を選択し「スケッチブックの保存場所」を確認できます(下図参照)