ゆっくりラズパイ活用講座

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/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>

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 ┏━━━━━━━━━━━━━┓ ┃　画像バイナリ・データ　┃ ┗━━━━━━━━━━━━━┛

<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>

#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);
			}
		}
	}
}