//Logo Image
作者:馬鴻祥(2005-01-14);推薦:吳昌暉、徐業良(2005-01-17);最近更新:徐業良(2005-02-27)

PIC_SERVER教材(5)—靜態WWW/HTTP伺服器

PIC_SERVER是一套應用於PIC18Fxxx系列單晶片,低價位、泛用型之「韌體TCP/IP乙太網路驅動程式(firmware TCP/IP Ethernet BIOS driver)」,藉此在嵌入式單晶片系統中實現靜∕動態WWW伺服器、網際網路遠端監控等遠距雙向傳輸數據的功能。本文介紹PIC_SERVER如何實現靜態WWW/HTTP伺服器的功能。

1.     PIC_SERVER的通訊協議架構簡述

1PIC_SERVER的韌體TCP/IP堆疊概念圖,由該圖可大略得知各級層間的關係。HTTP server是基於TCP/IP通訊協議的應用軟體,PIC_SERVERTCP server是精簡版的TCP serverHTTP server則是“精簡加強版”,二者均與標準的HTTPTCP有所差異,異同之處請參閱「PIC_SERVER Quick Guide.pdf」【吳昌暉,http://pic-proto.mech.yzu.edu.tw】第3PIC_SERVERHTTP serverTCP server、以及TCP client均可與Winsock軟體正常通訊。

1. PIC_SERVER韌體TCP/IP堆疊概念圖

2.     靜態WWW/HTTP伺服器架構

如前所述,HTTP server是基於TCP/IP通訊協議的應用軟體,一次只服務一個客戶,PIC_SERVER在任何一瞬間最多只有一個客戶,但仍可以服務無限多的客戶(multi-user),以PIC_SERVERHTTP傳輸速率約40 kB/sec而言,每處理一次HTTP服務約需20~50msec,因此若要服務N個遠端用戶,假設每個用戶每隔T秒連線一次,保守建議

HTTP client透過網頁瀏覽器(如IENetscape)或用商用軟體如VisualBasicWinsock撰寫的TCP client,均可以向HTTP server提出請求以索取檔案。目前PIC_SERVERHTTP server僅提供GET method”的服務,也就是說只允許clientPIC_SERVER提出索取檔案的請求,但亦可利用HTTP雙向傳輸協議,順便傳送資訊給HTTP serverHTTP「請求-服務」的架構如圖2所示,幾種標準格式如表1所示。

2. 靜態WWW/HTTP之架構圖

1. PIC_SERVER可支援的三種標準HTTP「請求-服務」格式

HTTP client IE等瀏覽器)

HTTP server

請求

http://140.138.40.58

服務

傳送index.htm

http://140.138.40.58/any_file.htm

server端有any_file.htm則傳送給Client,否則仍傳送index.htm

http://140.138.40.58/any_file.htm?pas=xxxx?cmd=yyyy

依請求檔案名稱,核對密碼後,送出Client所要的檔案

3.     範例程式說明

在圖2靜態WWW/HTTP架構圖中,所需要的程式包括:

l          HTTP client端程式(用IENetscape等網頁瀏覽器即可)

l          PIC_SERVER端網頁程式(範例程式:ex_0a\index.htm

l          PIC_SERVERC程式(範例程式:ex_0_web_server.c

在軟體專案開發的過程中,釐清客戶需求之後,接下來要先做的是人機介面的設計,在此就是網頁的設計,然後再設法滿足人機介面中所需要的資訊數據需求,也就是開發PIC_SERVERC程式。以下將依序說明PIC_SERVER端所需的網頁程式和PIC_SERVER端所需的C程式。HTML網頁程式撰寫語法,請自行參閱坊間眾多網頁製作書籍,此處僅介紹PIC_SERVER之入口網頁index.htm之建立以及網頁「轉向」方式。

3.1 PIC_SERVER端網頁程式的設計與製作

本範例中希望當HTTP client在網頁瀏覽器中鍵入PIC_SERVER的網址(如http://140.138.40.158),並按下ENTER鍵之後,瀏覽器軟體的視窗中呈現如圖3所示的畫面與資訊。這是一個很簡單的靜態網頁畫面,顯示“Welcome to PIC_SERVER”這段文字的index.htm網頁檔案僅22 bytes加上HTTP header(標籤)之後也僅66 bytes

3. 用戶端畫面

HTTP clientPIC_SERVER索取檔案時,由於傳輸上的限制(PIC_SERVER沒有切割封包分段傳送的功能),每個檔案的大小加上HTTP header不能超過1460 byte。因此HTML檔案過大時,就必須切割成數個小檔案,或是讓大型伺服器分擔PIC_SERVER的工作,PIC_SERVERHTTP伺服器只負責動態的(dynamic)檔案,如CGIEGI檔等具關鍵性,或牽涉安全性的重要檔案,讓client去大型伺服器抓靜態的(static)大檔案(如圖檔)及固定的程式檔(如JAVA等),不必放在PIC_SERVER裡。

例如希望HTTP client在網頁瀏覽器中鍵入PIC_SERVER的網址,並按下ENTER鍵之後,顯示如圖4元智大學的標誌,可由PIC_SERVER上的index.html轉向到元智大學標誌圖檔(http://www.yzu.edu.tw/images/main/top-main-01.jpg),僅需以下數行網頁語法就能實現,原本34,618 bytes檔案大小的圖,只需149 bytes網頁檔案(含HTTP header)便能呈現:

1            <HTML>

2            <FRAMESET>

3            <FRAME src=http://www.yzu.edu.tw/images/main/top-main-01.jpg>

4            </FRAMESET>

5            </HTML>

4. PIC_SERVER轉向後的圖片

PC硬碟編輯完成index.htm網頁程式,檢視其執行效果無誤之後,接下來就可以把網頁檔案寫入PIC_SERVER的唯讀記憶體。首先是封包的動作,編輯一個MS-DOS批次檔make_ex_0_webpage.bat(如圖5),執行後將資料夾ex_0a裡面所有的網頁檔案製作目錄並打包成為一個ROM檔案,產生EX_0A.ROMEX_0A.TXT檔案。ROM檔是寫入唯讀記憶體的檔案格式,而TXT檔的檔案資訊(如圖6)是告知程式人員每個封包檔案大小與總檔案大小,以檢查個別的網頁檔是否超過1460 byte之限制若使用FrontPage之類的軟體製做網頁,在必要時應用人工刪除冗長多餘的HTML指令,或設法將一個大的網頁檔案分割成數個小檔案,以免單一檔案超過1460 byte的限制!

5. MS-DOS批次檔內容

6. TXT檔內容

接下來即可將封包完成的ROM檔燒錄至PIC_SERVEREEPROM (24LC512)上,燒錄流程請參閱上篇教材「PIC_SERVER教材(2)—周邊軟體安裝與基本操作」

3.2 PIC_SERVER端的C程式

完成網頁製作之後,本節將介紹PIC_SERVER端的C程式。以PIC_SERVER範例程式ex_0_web_server.c(如圖7)為例,5~21行是主程式的部分,其中第7~12行指令說明如下:

7      int32 time_old                   定義time_old這個變數的資料型式

8      pic_SERVER_init()           系統初始化,設定I/O腳位配置及系統時鐘

9      disp_myIPMAC()            RS232終端機顯示IP以及螃蟹卡卡號的函式

10       beep(x, y)                 蜂鳴器聲音設定,x為音頻,y為持續發聲時間

11       lcd_init()                           初始化LCD顯示面版

12       lcd_dispIP()                     LCD顯示網路組態設定之IP

主程式第13行起有一個無窮迴圈while(1)while(true),不斷的呼叫執行韌體乙太網路驅動程式(Firmware Ethernet BIOS) bios_EtherNetHandler(),檢查網路卡是否有收到遠端client的請求,並依據遠端client的要求,將適當的檔案從24LC512裡面讀出,再送交網卡傳送給遠端的client。韌體乙太網路驅動程式bios_EtherNetHandler()除上述功能之外,還會依據遠端客戶請求的檔案名稱,視需要呼叫由軟體開發者撰寫的回呼函數(如程式中第22~28行,但本範例中程式都沒有用到,只有一堆空殼)。要注意的是,若網路環境十分繁忙嘈雜,則每秒鐘至少要執行bios_EtherNetHandler() 50次以上,才不至於漏接遠端客戶送來的請求。

此外在此無窮迴圈中存在一個if迴圈(程式16~19行),包含了系統時間的更新與「系統健康指示燈(SYSLED)」的閃爍。當靜態的系統時間變數time_old不等於(運算子“!=”表示“不等於”)動態的系統時鐘time.sec,則更新系統時間變數並閃爍系統指示燈一次。系統時鐘部分將於下篇教材「PIC_SERVER教材(4)—動態WWW/HTTP伺服器之系統時鐘」中作詳細介紹。本範例程式中相關指令的原始碼在目錄C:\YZ_PIC\Samples\Library_5.00底下,可用Win-XP的搜尋功能找到相關的檔案。其他的C語言指令,用CCS編譯器的線上輔助HELPèindex功能查閱即可。

7. 範例程式ex_0_web_server.c

完成PIC_SERVER端所需的C程式之後,接下來進行編譯和燒錄的工作,便可檢視程式執行結果。編譯和燒錄的流程亦請請參閱上篇教材「PIC_SERVER教材(2)—周邊軟體安裝與基本操作」

【實驗】

為設計小組取一個很酷的名字,設計一個很炫的logo,然後在PIC_SERVER上架個設計小組網頁,介紹一下你們的設計小組。網頁中應包含設計小組名字、logo、和小組組員相片,並利用本文所提及的「轉向」方法呈現相關圖檔。完成後下週在課堂上現場展示。