如何使用HTTP服務(wù)器搭建本地Web網(wǎng)站

最近在學習 ETH 模塊，ETH 模塊具有 HTTP 服務(wù)的功能，我將在本帖中探討如何使用 HTTP 服務(wù)搭建一個本地 Web網(wǎng)站，并分享一些我所獲得的經(jīng)驗。

1. HTTP介紹：

HTTP是超文本傳輸協(xié)議（HypertextTransfer Protocol）的縮寫，它是用于傳輸超文本（如 HTML）數(shù)據(jù)的應(yīng)用層協(xié)議。HTTP是萬維網(wǎng)上數(shù)據(jù)通信的基礎(chǔ)，它被用于在Web瀏覽器和Web服務(wù)器之間傳輸信息。

HTTP是一個無狀態(tài)協(xié)議，這意味著每個單獨的請求都是獨立的，服務(wù)器不會在多個請求之間保留任何數(shù)據(jù)。每個HTTP請求從客戶端（例如Web瀏覽器）發(fā)送到服務(wù)器，然后服務(wù)器返回一個響應(yīng)。這種請求-響應(yīng)模型使得客戶端可以從服務(wù)器獲取各種信息，如網(wǎng)頁、圖像、視頻等。

HTTP通常使用TCP作為其傳輸層協(xié)議，通過使用標準端口號80進行通信（HTTPS使用端口號443）。近年來，隨著對安全性的需求增加，基于HTTP的加密版本HTTPS也變得越來越普遍，它通過使用SSL/TLS協(xié)議來加密數(shù)據(jù)傳輸，確保數(shù)據(jù)的機密性和完整性。

HTTP服務(wù)特點：

HTTP服務(wù)具有以下幾個主要特點：

1. 無連接：HTTP是一種無連接的協(xié)議，即每個請求和響應(yīng)之間都是獨立的，服務(wù)器不會保留關(guān)于客戶端的任何狀態(tài)信息。這種無連接的特性使得服務(wù)器能夠更有效地處理大量的并發(fā)請求。

2. 無狀態(tài)：HTTP是一種無狀態(tài)的協(xié)議，即服務(wù)器不會在請求之間保留任何狀態(tài)信息。每個請求都是獨立的，服務(wù)器不會記住之前的請求信息。這種設(shè)計簡化了服務(wù)器的管理和維護，但也意味著服務(wù)器無法跟蹤客戶端的狀態(tài)，需要使用其他機制來實現(xiàn)狀態(tài)管理，如使用Cookies或Session。

3. 簡單靈活：HTTP的設(shè)計簡單且靈活，易于實現(xiàn)和使用。它使用文本格式的請求和響應(yīng)消息，易于調(diào)試和理解。同時，HTTP也支持多種不同的請求方法（如GET、POST、PUT、DELETE等），以及多種不同的內(nèi)容類型（如文本、圖像、音頻、視頻等），使得其適用于各種不同的應(yīng)用場景。

4. 基于請求-響應(yīng)模型：HTTP是基于請求-響應(yīng)模型的協(xié)議，即客戶端發(fā)送一個請求給服務(wù)器，服務(wù)器處理請求并返回一個響應(yīng)給客戶端。這種模型使得客戶端能夠從服務(wù)器獲取各種信息，如網(wǎng)頁、圖像、視頻等。

5. 支持多媒體內(nèi)容：HTTP不僅可以傳輸文本數(shù)據(jù)（如HTML），還可以傳輸圖像、視頻、音頻等多媒體內(nèi)容。這使得互聯(lián)網(wǎng)上的各種資源可以通過HTTP服務(wù)進行傳輸和訪問。

6. 基于TCP協(xié)議：HTTP通常使用TCP作為其傳輸層協(xié)議，通過使用標準端口號80進行通信（HTTPS使用端口號443）。TCP協(xié)議提供了可靠的數(shù)據(jù)傳輸機制，確保數(shù)據(jù)的可靠性和完整性。

綜上所述，HTTP服務(wù)具有無連接、無狀態(tài)、簡單靈活等特點，適用于各種不同的應(yīng)用場景，是互聯(lián)網(wǎng)上數(shù)據(jù)通信的基礎(chǔ)。

LWIP1.4.1的HTTP服務(wù)介紹

lwIP（lightweight IP）是一個輕量級的開源TCP/IP協(xié)議棧，用于嵌入式系統(tǒng)和小型設(shè)備。lwIP1.4.1版本中包含了一個簡單的HTTP服務(wù)器，可以用于在嵌入式設(shè)備上搭建基本的Web服務(wù)器。

lwIP1.4.1版本的HTTP服務(wù)器具有以下特點：

1.輕量級：lwIP是一個輕量級的TCP/IP協(xié)議棧，適用于資源受限的嵌入式系統(tǒng)和小型設(shè)備。其HTTP服務(wù)器也是精簡設(shè)計，適合在資源有限的環(huán)境下運行。

2.基于C語言：lwIP的HTTP服務(wù)器是用C語言編寫的，易于移植和集成到各種嵌入式系統(tǒng)中。

3.支持基本功能：lwIP的HTTP服務(wù)器支持基本的HTTP功能，如處理GET請求、發(fā)送靜態(tài)內(nèi)容（如HTML頁面、圖像等）、處理簡單的動態(tài)內(nèi)容等。

4.定制化：雖然lwIP的HTTP服務(wù)器功能相對簡單，但可以根據(jù)需要進行定制和擴展，以滿足特定應(yīng)用場景的需求。

5.適用性：lwIP的HTTP服務(wù)器適用于嵌入式設(shè)備上需要提供簡單Web服務(wù)的場景，如遠程監(jiān)控、配置管理、固件升級等。

總的來說，lwIP1.4.1版本的HTTP服務(wù)器是一個簡單而實用的工具，適合在資源受限的嵌入式系統(tǒng)中搭建基本的Web服務(wù)器功能。

2. 本地 Web 服務(wù)器搭建的步驟

1.新建工程，移植lwip庫，并包含其所需要的組件。

2.準備一些html文件，用于界面顯示和控制。

3. 使用makefsdata將html 文件轉(zhuǎn)化為c語言數(shù)組形式。（附件含 makefsdata工具）

首先打開makefsdata目錄，新建fs文件夾。

把準備好的文件復(fù)制到fs文件夾中。

退回上一級目錄，即makefsdata根目錄下，打開cmd，輸入“makefsdata“，即可把fs文件夾中的html文件轉(zhuǎn)化為fsdata.c文件，該文件包含了其轉(zhuǎn)化后的c語言數(shù)組。

生成的 fsdata.c 文件，就是我們需要的源文件。

這樣我們的基礎(chǔ)文件數(shù)據(jù)就準備好了。

4. 編寫httpd_cgi_ssi.c文件

HTTP的SSI和CGI介紹：

當涉及到 Web 服務(wù)器上的動態(tài)內(nèi)容處理時，兩種常見的方法是Server Side Includes (SSI) 和 Common GatewayInterface(CGI)。

### 1. Server Side Includes (SSI):

SSI 是一種簡單的動態(tài)內(nèi)容生成技術(shù)，它允許在 HTML 頁面中嵌入動態(tài)內(nèi)容。SSI 在 HTML 文件中通過特殊的標簽實現(xiàn)，服務(wù)器在響應(yīng)客戶端請求時動態(tài)地處理這些標簽。

#### 如何使用SSI：

- SSI 標簽通常以 結(jié)束。

- 常見的SSI指令包括：

- #include：包含其他文件的內(nèi)容。

- #echo：輸出環(huán)境變量或者其他值。

- #exec：執(zhí)行外部命令并將結(jié)果輸出。

- SSI 通常在服務(wù)器配置中啟用，并且需要指定哪些文件擴展名應(yīng)該被解析為SSI。

#### 優(yōu)點：

- 簡單易用，無需編寫額外的代碼。

- 可以直接在 HTML 文件中嵌入動態(tài)內(nèi)容，方便快捷。

#### 缺點：

- 功能有限，主要用于簡單的動態(tài)內(nèi)容生成。

- 對服務(wù)器性能有一定影響，因為需要在每個請求中動態(tài)解析處理SSI標簽。

### 2. Common Gateway Interface (CGI):

CGI 是一種更為靈活和強大的動態(tài)內(nèi)容生成技術(shù)。它允許服務(wù)器調(diào)用外部程序來處理客戶端請求，并生成動態(tài)內(nèi)容。CGI程序可以用任何編程語言編寫，只要能夠通過標準輸入和輸出與 Web 服務(wù)器通信即可。

#### 如何使用CGI：

- CGI 程序通常位于 Web 服務(wù)器的特定目錄中（如`cgi-bin` 目錄）。

- 當服務(wù)器收到客戶端請求時，會調(diào)用相應(yīng)的 CGI 程序來處理請求，并將結(jié)果返回給客戶端。

- CGI 程序通過環(huán)境變量獲取客戶端請求信息，并通過標準輸出返回動態(tài)生成的內(nèi)容。

#### 優(yōu)點：

- 靈活多樣，可以使用各種編程語言編寫CGI 程序。

- 可以處理復(fù)雜的動態(tài)內(nèi)容生成需求，如表單處理、數(shù)據(jù)庫查詢等。

#### 缺點：

- 比較復(fù)雜，需要編寫額外的程序。

- 對服務(wù)器性能影響較大，每個 CGI請求都需要啟動一個新的進程來處理。

綜上所述，SSI 適用于簡單的動態(tài)內(nèi)容生成需求，而CGI 則更適合處理復(fù)雜的動態(tài)內(nèi)容生成任務(wù)。選擇哪種方法取決于具體的需求和服務(wù)器環(huán)境。

在了解這些之后，我們看看下面編寫的httpd_cgi_ssi.c文件源碼。

#include"lwip/debug.h"

#include"httpd.h"

#include"lwip/tcp.h"

#include"fs.h"

#include"main.h"

#include"Board.h"

#include

#include

tSSIHandlerADC_Page_SSI_Handler;

uint32_tADC_not_configured=1;

/* wewill use character "t" as tag for CGI */

charconst* TAGCHAR="t";

charconst** TAGS=&TAGCHAR;

/*CGI handler for LED control */

constchar * LEDS_CGI_Handler(int iIndex, int iNumParams, char *pcParam[], char*pcValue[]);

/*Html request for "/leds.cgi" will start LEDS_CGI_Handler */

consttCGI LEDS_CGI={"/leds.cgi", LEDS_CGI_Handler};

/*Cgi call table, only one CGI used */

tCGICGI_TAB[1];

/**

*[url=home.php?mod=space&uid=247401]@brief[/url] Configures the ADC.

* @paramNone

* @retval None

*/

staticvoid ADC_Configuration(void)

{

ADC_Config_TadcConfig;

ADC_CommonConfig_TadcCommonConfig;

GPIO_Config_TgpioConfig;

RCM_EnableAPB2PeriphClock(RCM_APB2_PERIPH_ADC3);

RCM_EnableAHB1PeriphClock(RCM_AHB1_PERIPH_GPIOF);

gpioConfig.pin= GPIO_PIN_9;

gpioConfig.mode= GPIO_MODE_AN;

gpioConfig.pupd= GPIO_PUPD_NOPULL;

GPIO_Config(GPIOF,&gpioConfig);

ADC_CommonConfigStructInit(&adcCommonConfig);

adcCommonConfig.mode= ADC_MODE_INDEPENDENT;

adcCommonConfig.prescaler= ADC_PRESCALER_DIV6;

adcCommonConfig.accessMode= ADC_ACCESS_MODE_DISABLED;

adcCommonConfig.twoSampling= ADC_TWO_SAMPLING_5CYCLES;

ADC_CommonConfig(&adcCommonConfig);

ADC_ConfigStructInit(&adcConfig);

adcConfig.resolution= ADC_RESOLUTION_12BIT;

adcConfig.scanConvMode= DISABLE;

adcConfig.continuousConvMode= ENABLE;

adcConfig.extTrigEdge= ADC_EXT_TRIG_EDGE_NONE;

adcConfig.dataAlign= ADC_DATA_ALIGN_RIGHT;

adcConfig.nbrOfChannel= 1;

ADC_Config(ADC3,&adcConfig);

ADC_ConfigRegularChannel(ADC3,ADC_CHANNEL_7,1,ADC_SAMPLETIME_56CYCLES);

ADC_Enable(ADC3);

/*ADC3 regular Software Start Conv */

ADC_SoftwareStartConv(ADC3);

}

/**

* [url=home.php?mod=space&uid=247401]@brief[/url] ADC_Handler : SSI handler for ADC page

*/

u16_tADC_Handler(int iIndex, char *pcInsert, int iInsertLen)

{

/* We have only one SSI handler iIndex = 0 */

if (iIndex ==0)

{

charDigit1=0, Digit2=0, Digit3=0, Digit4=0;

uint32_tADCVal = 0;

/* configure ADC if not yet configured */

if (ADC_not_configured ==1)

{

ADC_Configuration();

ADC_not_configured=0;

}

/* get ADC conversion value */

ADCVal = ADC_ReadConversionValue(ADC3);

/* convert to Voltage, step = 0.8 mV */

ADCVal = (uint32_t)(ADCVal * 0.8);

printf("ADC Value: %d ",ADCVal);

/* get digits to display */

Digit1= ADCVal/1000;

Digit2= (ADCVal-(Digit1*1000))/100 ;

Digit3=(ADCVal-((Digit1*1000)+(Digit2*100)))/10;

Digit4= ADCVal -((Digit1*1000)+(Digit2*100)+(Digit3*10));

/* prepare data to be inserted in html */

*pcInsert= (char)(Digit1+0x30);

*(pcInsert + 1) = (char)(Digit2+0x30);

*(pcInsert + 2) = (char)(Digit3+0x30);

*(pcInsert + 3) = (char)(Digit4+0x30);

/* 4characters need to be inserted in html*/

return4;

}

return 0;

}

/**

*[url=home.php?mod=space&uid=247401]@brief[/url] CGI handler for LEDs control

*/

constchar * LEDS_CGI_Handler(int iIndex, int iNumParams, char *pcParam[], char*pcValue[])

{

uint32_t i=0;

/* We have only one SSI handler iIndex = 0 */

if (iIndex==0)

{

/*All leds off */

APM_TINY_LEDOff(LED2);

APM_TINY_LEDOff(LED3);

/*Check cgi parameter : example GET /leds.cgi?led=2&led=4 */

for(i=0; i

{

/* check parameter "led" */

if (strcmp(pcParam[i] ,"led")==0)

{

/*switch led2 ON if 2 */

if(strcmp(pcValue[i],"2") ==0)

APM_TINY_LEDOn(LED2);

/*switch led3 ON if 3 */

elseif(strcmp(pcValue[i], "3") ==0)

APM_TINY_LEDOn(LED3);

}

}

}

/* uri to send after cgi call*/

return "/APM32F407LED.html";

}

/**

* Initialize SSI handlers

*/

voidhttpd_ssi_init(void)

{

/* configure SSI handlers (ADC page SSI) */

http_set_ssi_handler(ADC_Handler, (char const**)TAGS, 1);

}

/**

* Initialize CGI handlers

*/

voidhttpd_cgi_init(void)

{

/* configure CGI handlers (LEDs control CGI)*/

CGI_TAB[0] = LEDS_CGI;

http_set_cgi_handlers(CGI_TAB, 1);

}

這段代碼是一個基于lwIP（LightweightIP）的HTTP服務(wù)器的實現(xiàn)，它允許通過網(wǎng)頁控制單片機上的LED，并且能夠?qū)崟r獲取ADC（模數(shù)轉(zhuǎn)換器）的值并顯示在網(wǎng)頁上。讓我們逐個分析每個函數(shù)及其功能：

- ADC_Configuration():

- 這個函數(shù)配置了微控制器的ADC模塊，使其準備好進行模擬信號的數(shù)字化轉(zhuǎn)換。

- 配置了ADC3通道7，并啟動了ADC轉(zhuǎn)換。

-ADC_Handler():

- 這個函數(shù)是SSI（Server Side Include）的處理函數(shù)，用于處理ADC頁面的SSI標簽。

- 它讀取ADC轉(zhuǎn)換的值，將其轉(zhuǎn)換為電壓值，并將其插入到HTML頁面的指定位置。

- 該函數(shù)返回要插入的字符數(shù)量。

-LEDS_CGI_Handler():

- 這個函數(shù)是CGI（Common Gateway Interface）的處理函數(shù)，用于處理LED控制的CGI請求。

- 它檢查CGI參數(shù)，根據(jù)參數(shù)設(shè)置LED的狀態(tài)（開或關(guān)）。

- 返回一個字符串，指示CGI調(diào)用完成后應(yīng)該跳轉(zhuǎn)的頁面。

- httpd_ssi_init():

- 這個函數(shù)初始化SSI處理程序，將ADC頁面的SSI處理函數(shù)注冊到HTTP服務(wù)器。

-httpd_cgi_init():

- 這個函數(shù)初始化CGI處理程序，將LED控制的CGI處理函數(shù)注冊到HTTP服務(wù)器。

總體來說，這段代碼實現(xiàn)了一個基本的HTTP服務(wù)器，可以通過網(wǎng)頁界面控制LED，并實時顯示ADC轉(zhuǎn)換的值。通過SSI和CGI，可以動態(tài)地生成網(wǎng)頁內(nèi)容，并實現(xiàn)與單片機硬件的交互。

5.編寫main函數(shù)

intmain(void)

{

charLCDDisplayBuf[100] = {0};

structip_addr DestIPaddr;

uint8_tflag = 0;

USART_Config_TusartConfig;

/*User config the different system Clock */

UserRCMClockConfig();

/*Configure SysTick */

ConfigSysTick();

/*Configure USART */

usartConfig.baudRate= 115200;

usartConfig.wordLength= USART_WORD_LEN_8B;

usartConfig.stopBits= USART_STOP_BIT_1;

usartConfig.parity= USART_PARITY_NONE ;

usartConfig.mode= USART_MODE_TX_RX;

usartConfig.hardwareFlow= USART_HARDWARE_FLOW_NONE;

APM_BOARD_COMInit(COM1,&usartConfig);

/*Configures LED2 and LED3 */

APM_BOARD_LEDInit(LED2);

APM_BOARD_LEDInit(LED3);

/*KEY init*/

APM_BOARD_PBInit(BUTTON_KEY1,BUTTON_MODE_GPIO);

APM_BOARD_PBInit(BUTTON_KEY2,BUTTON_MODE_GPIO);

printf("Thisis a Demo! ");

/*Configure ethernet (GPIOs, clocks, MAC, DMA) */

ConfigEthernet();

/*Initilaize the LwIP stack */

LwIP_Init();

httpd_init();

/*Use Com printf static IP address*/

sprintf(LCDDisplayBuf,"TINYboard Static IP address ");

printf("%s",LCDDisplayBuf);

sprintf(LCDDisplayBuf,"IP:%d.%d.%d.%d ",

IP_ADDR0,

IP_ADDR1,

IP_ADDR2,

IP_ADDR3);

printf("%s",LCDDisplayBuf);

sprintf(LCDDisplayBuf,"NETMASK:%d.%d.%d.%d ",

NETMASK_ADDR0,

NETMASK_ADDR1,

NETMASK_ADDR2,

NETMASK_ADDR3);

printf("%s",LCDDisplayBuf);

sprintf(LCDDisplayBuf,"Gateway:%d.%d.%d.%d ",

GW_ADDR0,

GW_ADDR1,

GW_ADDR2,

GW_ADDR3);

printf("%s",LCDDisplayBuf);

while(1)

{

/*check if any packet received */

if(ETH_CheckReceivedFrame())

{

/*process received ethernet packet */

LwIP_Pkt_Handle();

}

/*handle periodic timers for LwIP */

LwIP_Periodic_Handle(ETHTimer);

}

}

6.配置開發(fā)板靜態(tài)IP地址

3. 實驗現(xiàn)象：

1.用以太網(wǎng)接口線，連接開發(fā)板與PC端，打開瀏覽器，輸入開發(fā)板的IP地址，進入網(wǎng)頁端。

2.在網(wǎng)頁端點擊Led control，跳轉(zhuǎn)到led控制界面。

3.點擊ADC StatusBar，跳轉(zhuǎn)到ADC采集界面。