ESP32 WEB SERVER
2025.08.09
今回はマイコンボードESP32を使って小型WEBサーバを作ってみました。
画像を取扱う都合上、PSRAMを実装しているESP32-S2を使用しています。
コンテンツはmicroSDカードに保存してあります。
右側にあるQWIIC拡張アダプタは関係ありません。
●ファイル構成(検証用)
ファイル構成はApache WEBサーバなどでの一般的な配置にしています。
microSDカードのルートにhtmlディレクトリを作り、
それをWEBサーバのドキュメントルート(www-root)にしています
<www-root>
┣<css>
┃ ┗ style.css
┣<images>
┃ ┗ flower.jpg
┣ example.html
┗ favicon.ico
ESP32 WEBサーバのローカルIPアドレスは、192.168.11.66に設定しています
ここからはHTTPプロトコルに基づいた処理の流れの解説です。
パソコンなどでブラウザを起動して、コンテンツにアクセスします
http://192.168.11.66/example.html
ESP32側で受信したブラウザからのリクエストは下記のようになります
GET /example.html HTTP/1.1
Host: 192.168.11.66
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,ja;q=0.8
ブラウザからのリクエスト取得方法は色々ありますが、HTTPプロトコルを把握したい場合は、client.read()が便利です
unsigned char *pt;
pt = inbuf;
while(1) {
if(client80.available()) {
*pt = client80.read();
pt++;
} else {
break;
}
}
*pt = 0x0;
for (pt=inbuf;*pt;pt++) Serial1.write(*pt);
GET に続くファイル名に基づいて、microSDカードからHTMLファイル(example.html)を読込み、
レスポンスヘッダーに続けて出力します。ヘッダーの改行コードは \r\n です。
HTTP/1.1 200 OK
Content-Length: 911
Content-Type: text/html
Accept-Charset: UTF-8
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>ゆっくりラズパイ活用講座</title>
<meta name="keywords" content="ゆっくりラズパイ活用講座">
<meta name="description" content="ESP32 WEB SERVER">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="/css/style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<link href="/favicon.ico" rel="shortcuticon" type="image/x-icon">
</head>
<body onload="displayImage()">
<div id="imageContainer"></div>
<script>
function displayImage() {
const img = document.createElement('img');
img.src = '/images/flower.jpg';
img.alt = 'FLOWER';
document.getElementById('imageContainer').appendChild(img);
}
</script>
Hello world
</body>
</html>
ブラウザ側がこのHTMLファイルを初めて読み込んだ際には、サーバに対してファビコンの送信を要求される場合があります。
ファビコン(favicon)とは、ウェブサイトのブラウザタブやブックマークなどに表示される小さなアイコンのことです。
GET /favicon.ico HTTP/1.1
Host: 192.168.11.66
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
Referer: http://192.168.11.66/example_01.html
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,ja;q=0.8
この場合は、レスポンスヘッダーに続けてファビコン画像を出力します
HTTP/1.1 200 OK
Content-Length: 906
Content-Type: image/x-icon
┏━━━━━━━━━━━━━━┓
┃ FAVICON バイナリ・データ ┃
┗━━━━━━━━━━━━━━┛
次に、スタイルシートを要求されます
GET /css/style.css HTTP/1.1
Host: 192.168.11.66
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Accept: text/css,*/*;q=0.1
Referer: http://192.168.11.66/example_05.html
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,ja;q=0.8
スタイルシートを出力します
HTTP/1.1 200 OK
Content-Length: 1511
Content-Type: image/css
┏━━━━━━━━━━━━━━━━━━┓
┃ スタイルシート テキスト・データ ┃
┗━━━━━━━━━━━━━━━━━━┛
画像を要求されます
GET /images/flower.jpg HTTP/1.1
Host: 192.168.11.66
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
Referer: http://192.168.11.66/example_05.html
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,ja;q=0.8
画像データを出力します
HTTP/1.1 200 OK
Content-Length: 19322
Content-Type: image/jpeg
┏━━━━━━━━━━━━━┓
┃ 画像 バイナリ・データ ┃
┗━━━━━━━━━━━━━┛
画像などのサイズの大きい素材をブラウザ側に送信するときに、
SDカードから読込んだ画像ファイルを1バイトずつ送信していると時間が掛かります。
そのため、画像情報をメモリ上に読込み、一括送信します
if (file.size()<=OUTPUT_BUF_SIZE) {
if (file.read(outbuf,file.size())==file.size()) {
if (client80.write(outbuf, file.size())==file.size()) result = true;
}
}
ブラウザ側では受信データをもとに画面に表示されていきます
補足：画像取得に関して
HTML内の画像取得部分を見てください。
BODYタグで示される内容が読み込まれた時点で、JavaScriptが呼び出され、サーバ側からの画像ファイル送信を要求しています。
<body onload="displayImage()">
<div id="imageContainer"></div>
<script>
function displayImage() {
const img = document.createElement('img');
img.src = '/images/flower.jpg';
img.alt = 'FLOWER';
document.getElementById('imageContainer').appendChild(img);
}
</script>
Hello world
</body>
この部分には、下記のような記述も考えられます
<body>
<img src="/images/flower.jpg" width="280" height="280">
Hello world
</body>
このように記述した場合、当方の環境では画像をうまく取得できないこともありました
サーバ側ソースコード
microSDカードモジュールとのSPI接続ピン番号、WIFI接続情報は、動作環境に合わせて変更してください。
また、完成したソースコードではないので、適時修正してください。
#include <WiFi.h>
#include <Wire.h>
#include <SPI.h>
#include <SD.h>
#define SECRET_SSID "************"
#define SECRET_PASS "************"
const uint8_t PRIMARY_DNS[4] = {192,168,11,1};
const uint8_t GATEWAY[4] = {192,168,11,1};
const uint8_t SUBNETMASK[4] = {255,255,255,0};
const uint8_t LOCAL_IP[4] = {192,168,11,66};
#define SPI_MISO MISO
#define SPI_MOSI MOSI
#define SPI_SCK SCK
#define SPI_SD_CS A3
SPIClass SDSPI(HSPI);
#define SDSPEED 40000000
#define HTTP_PORT (80)
WiFiServer server80(HTTP_PORT);
WiFiClient client80;
#define TYPE_HTML 0x01
#define TYPE_JPEG 0x02
#define TYPE_GIF 0x04
#define TYPE_PNG 0x08
#define TYPE_CSS 0x10
#define TYPE_ICO 0x20
#define TYPE_JS 0x40
#define INPUT_BUF_SIZE 4096
#define OUTPUT_BUF_SIZE 524288
#define FILE_NAME_SIZE 64
unsigned char inbuf[INPUT_BUF_SIZE];
unsigned char *outbuf;
char filename[FILE_NAME_SIZE];
boolean server_enable;
long elapsed;
void setup()
{
if (!WiFi.config(LOCAL_IP, GATEWAY, SUBNETMASK, PRIMARY_DNS)) while(1);
WiFi.mode(WIFI_STA);
WiFi.begin(SECRET_SSID, SECRET_PASS);
while (1) {
if (WiFi.status() == WL_CONNECTED) {
server80.begin();
SDSPI.begin(SPI_SCK, SPI_MISO, SPI_MOSI, -1);
pinMode(SPI_SD_CS, OUTPUT);
while(!SD.begin(SPI_SD_CS, SDSPI,SDSPEED)) delay(100);
break;
}
delay(500);
}
server_enable = true;
outbuf = (unsigned char*)malloc(OUTPUT_BUF_SIZE);
if (!outbuf) while(1);
}
boolean availableHTTP()
{
if(!client80) { // Client not exist
client80 = server80.available();
if(client80) {
if (!client80.connected()) return false;
}
} else if (!client80.connected()) {
client80.stop();
client80 = server80.available();
if(client80) {
if (!client80.connected()) return false;
}
}
return client80.available();
}
void notFound(unsigned char ctype)
{
client80.print("HTTP/1.1 404 Not Found\r\n");
if (ctype==TYPE_HTML) {
client80.print("Content-Type: text/html\r\n");
client80.print("Accept-Charset: UTF-8\r\n");
client80.print("\r\n");
client80.print("<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\r\n");
client80.print("<html><head>\r\n");
client80.print("<title>404 Not Found</title>\r\n");
client80.print("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\r\n");
client80.print("</head><body>該当するページはありません</body></html>\r\n");
} else {
client80.print("\r\n");
}
}
int getRequest(char *fname)
{
unsigned char ch;
unsigned char *pt;
int len = 0;
pt = inbuf;
while(1) {
if(client80.available()) {
*pt = client80.read();
pt++;
} else {
break;
}
}
*pt = 0x0;
pt = inbuf;
while (*pt) {
switch (*pt) {
case 'G':
if (memcmp(pt,"GET ",4)==0) {
pt+=4;
for (len=0; (*pt!=' ')&&(len<(FILE_NAME_SIZE-1));len++,pt++) *(fname+len) = *pt;
*(fname+len) = 0x0;
return len;
}
break;
}
while ((*pt!=0x0a)&&(*pt!=0x0)) pt++;
}
return len;
}
boolean putHTML(char *fname)
{
char line[64];
char path[64];
unsigned char *html_data = 0x0;
boolean result = false;
sprintf(path,"/html%s",fname);
File file = SD.open(path);
if (file) {
client80.print("HTTP/1.1 200 OK\r\n");
sprintf(line,"Content-Length: %d\r\n",file.size());
client80.print(line);
client80.print("Content-Type: text/html\r\n");
client80.print("Accept-Charset: UTF-8\r\n");
client80.print("\r\n");
if (file.size()<=OUTPUT_BUF_SIZE) {
if (file.read(outbuf,file.size())==file.size()) {
if (client80.write(outbuf, file.size())==file.size()) result = true;
}
}
}
client80.print("\r\n");
if (file) file.close();
return result;
}
boolean putImage(char *fname, unsigned char ctype)
{
char path[64];
char line[64];
unsigned char *img_data = 0x0;
boolean result = false;
sprintf(path,"/html%s",fname);
File file = SD.open(path);
if (file) {
client80.print("HTTP/1.1 200 OK\r\n");
sprintf(line,"Content-Length: %d\r\n",file.size());
client80.print(line);
switch (ctype) {
case TYPE_JPEG:
client80.print("Content-Type: image/jpeg\r\n\r\n");
break;
case TYPE_GIF:
client80.print("Content-Type: image/gif\r\n\r\n");
break;
case TYPE_PNG:
client80.print("Content-Type: image/png\r\n\r\n");
break;
case TYPE_CSS:
client80.print("Content-Type: text/css\r\n");
client80.print("Accept-Charset: UTF-8\r\n\r\n");
break;
case TYPE_ICO:
client80.print("Content-Type: image/x-icon\r\n\r\n");
break;
case TYPE_JS:
client80.print("Content-Type: text/javascript\r\n\r\n");
break;
}
if (file.size()<=OUTPUT_BUF_SIZE) {
if (file.read(outbuf,file.size())==file.size()) {
if (client80.write(outbuf, file.size())==file.size()) result = true;
}
}
}
if (file) file.close();
return result;
}
void loop()
{
int filesize;
if (availableHTTP()) {
filesize = getRequest((char*)&filename);
if (filesize > 0) {
char *pt = filename;
while ((*pt!='.')&&(*pt!=0x0)) pt++;
if (memcmp(pt,".html",5)==0) {
if (!putHTML(filename)) notFound(TYPE_HTML);
} else if (memcmp(pt,".css",4)==0) {
if (!putImage(filename, TYPE_CSS)) notFound(TYPE_CSS);
} else if (memcmp(pt,".jpg",4)==0) {
if (!putImage(filename, TYPE_JPEG)) notFound(TYPE_JPEG);
} else if (memcmp(pt,".gif",4)==0) {
if (!putImage(filename, TYPE_GIF)) notFound(TYPE_GIF);
} else if (memcmp(pt,".png",4)==0) {
if (!putImage(filename, TYPE_PNG)) notFound(TYPE_PNG);
} else if (memcmp(pt,".ico",4)==0) {
if (!putImage(filename, TYPE_ICO)) notFound(TYPE_ICO);
} else if (memcmp(pt,".js",3)==0) {
if (!putImage(filename, TYPE_JS )) notFound(TYPE_JS);
} else {
notFound(TYPE_HTML);
}
}
}
}
ネット環境により、ブラウザにコンテンツの一部が取り込まれない状況が発生します。
上記はサンプルプログラムで、ブラッシュアップが必要です。
参考程度にみてください。
応用するとこんな学習サイトを作ることも可能です
スクリプトによりサーバ側からJSON形式の教材データをダウンロードして使用しています。
メイン画面をタップすることで答えと解説が表示しています
|
Raspberry Pi（ラズベリー パイ）は、ARMプロセッサを搭載したシングルボードコンピュータ。イギリスのラズベリーパイ財団によって開発されている。
たいていのことは100日あれば、うまくいく。長田英知著
「時間がなくて、なかなか自分のやりたいことができない」
「一念発起して何かを始めても、いつも三日坊主で終わってしまう」
「色んなことを先延ばしにしたまま、時間だけが過ぎていく」
そこで本書では、そんな著者が独自に開発した、
まったく新しい目標達成メソッド「100日デザイン」について、
その知識と技術を、余すところなくご紹介します。
まんがで納得ナポレオン・ヒル 思考は現実化する
OLとして雑務をこなす日々に飽き足らず、科学者だった父が残した薬品を商品化すべく、起業を決意した内山麻由(27)。彼女はセミナーで知り合った謎の女性からサポートを得ながら、彼女と二人三脚でナポレオン・ヒルの成功哲学を実践し、さまざまな問題を乗り越えていく。
ヒル博士の<ゴールデンルール>に従い、仕事に、恋に全力疾走する彼女の、成功への物語。
今日は人生最悪で最高の日 １秒で世界を変えるたったひとつの方法 ひすいこたろう著
偉人の伝記を読むと、最悪な日は、不幸な日ではなく、新しい自分が始まる日であることがわかります。最悪な出来事は、自分の人生が、想像を超えて面白くなる兆しなのです。偉人伝を読むことで、このときの不幸があったおかげで、未来にこういう幸せがくるのかと、人生を俯瞰する視線が立ち上がるのです。
ご飯は私を裏切らない heisoku著
辛い現実から目を背けて食べるご飯は、いつも美味しく幸せを届けてくれる。
29歳、中卒、恋人いない歴イコール年齢。バイト以外の職歴もなく、短期バイトを転々とする日々。ぐるぐると思索に耽るけど、ご飯を食べると幸せになれる。奇才の新鋭・heisokuが贈るリアル労働グルメ物語!
【最新版Gemini 3に対応！】できるGemini (できるシリーズ)
Geminiを「最強の知的生産パートナー」として使いこなすための、実践的なノウハウを凝縮した一冊です。
基本的な操作方法から、具体的なビジネスシーンでの活用、日々の業務を自動化するGoogle Workspaceとの連携、さらには自分だけのオリジナルAIを作成する方法まで余すところなく解説します。
Rustプログラミング完全ガイド 他言語との比較で違いが分かる!
Rustの各手法や考え方を幅広く解説！
500以上のサンプルを掲載。実行結果も確認。
全24章の包括的なチュートリアル。
ポチらせる文章術
販売サイト・ネット広告・メルマガ・ブログ・ホームページ・SNS…
全WEB媒体で効果バツグン!
カリスマコピーライターが教える「見てもらう」「買ってもらう」「共感してもらう」すべてに効くネット文章術
小型で便利な Type-C アダプター USB C オス - USB3.1 オスアダプター
Type-C端子のマイコンボードをこのアダプタを介して直接Raspberry Piに挿すことができます。ケーブルなしで便利なツールです。
Divoom Ditoo Pro ワイヤレススピーカー
15W高音質重低音/青軸キーボード/Bluetooth5.3/ピクセルアート 専用アプリ/USB接続/microSDカード
電源供給USBケーブル スリム 【5本セット】
USB電源ケーブル 5V DC電源供給ケーブル スリム 【5本セット】 電源供給 バッテリー 修理 自作 DIY 電子工作 (100cm)
|
