基于BOA的異步環(huán)境參數(shù)監(jiān)測(cè)及氣象預(yù)報(bào)系統(tǒng)設(shè)計(jì)

傅玥 郭航宇 李解 譚海洋

摘 ?要：為了讓操作者可以通過瀏覽器維護(hù)和管理監(jiān)測(cè)點(diǎn)，方便其查看監(jiān)測(cè)數(shù)據(jù)，設(shè)計(jì)利用BOA服務(wù)器搭建嵌入式Web控制器、傳輸層選擇有三次握手和超時(shí)重傳機(jī)制的TCP并包含了針對(duì)數(shù)據(jù)發(fā)送的防丟失措施。采用AJAX技術(shù)實(shí)現(xiàn)環(huán)境參數(shù)異步傳輸，以JSON格式作為數(shù)據(jù)交互格式，用CGI實(shí)現(xiàn)客戶端與服務(wù)器端的請(qǐng)求和響應(yīng)，Shell腳本實(shí)現(xiàn)CGI程序動(dòng)態(tài)訪問、自動(dòng)更新環(huán)境參數(shù)。

關(guān)鍵詞：嵌入式Web服務(wù)器;BOA;CGI;AJAX數(shù)據(jù)通信;JSON

中圖分類號(hào)：TP274;S828 ? ? 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2096-4706（2020）13-0077-05

Abstract：In order to enable the operator to maintain and manage the monitoring points through the browser，so as to facilitate the operator to view the monitoring data，the BOA server is used to build the embedded Web controller，the TCP with three handshakes and timeout retransmission mechanism is selected in the transport layer，and the anti-loss measures for data transmission are included. AJAX technology is used to realize asynchronous transmission of environment parameters. JSON format is used as data exchange format. CGI is used to realize client-side and server-side request and response. Shell script is used to realize CGI program dynamic access and automatic update of environment parameters.

Keywords：embedded Web server;BOA;CGI;AJAX data communication;JSON

0 ?引 ?言

該系統(tǒng)設(shè)計(jì)通過BOA源碼官網(wǎng)下載BOA源碼，在Ubuntu下搭建嵌入式BOA服務(wù)器，代碼打通用戶級(jí)與內(nèi)核級(jí)之間數(shù)據(jù)傳遞問題，方便用戶通過瀏覽器實(shí)時(shí)獲取當(dāng)前環(huán)境氣象狀況，功能上分為兩個(gè)板塊。第一板塊利用jQuery的子集Cheerio進(jìn)行對(duì)天氣網(wǎng)氣象DOM的爬取，實(shí)際運(yùn)行的時(shí)候使用SuperAgent實(shí)時(shí)抓取網(wǎng)頁(yè);第二板塊需串口接收外部集成傳感器捕獲的數(shù)據(jù)，用戶點(diǎn)擊“獲取數(shù)據(jù)”按鈕觸發(fā)傳感器采集當(dāng)前環(huán)境參數(shù)，采集的數(shù)據(jù)通過外部程序執(zhí)行通道CGI（通用網(wǎng)關(guān)接口）返回至瀏覽器界面。BOA服務(wù)器將傳感器檢測(cè)的環(huán)境參數(shù)傳給CGI，被編譯的CGI可執(zhí)行程序自動(dòng)調(diào)用append（）將新數(shù)據(jù)追加到文檔末尾，經(jīng)BOA服務(wù)器送回瀏覽器顯示;AJAX數(shù)據(jù)異步傳輸實(shí)現(xiàn)動(dòng)態(tài)和靜態(tài)網(wǎng)頁(yè)的分離效果，服務(wù)器與瀏覽器只交換更新的數(shù)據(jù)即每次更新的環(huán)境參數(shù)，HTML格式的靜態(tài)網(wǎng)頁(yè)保持不變。該設(shè)計(jì)方法大幅降低網(wǎng)絡(luò)流量、提升運(yùn)行速度，數(shù)據(jù)記錄基于Echarts生成歷史溫度曲線統(tǒng)計(jì)和濕度曲線統(tǒng)計(jì)。

1 ?Ubuntu安裝C語(yǔ)言編譯環(huán)境

在LINUX嵌入式系統(tǒng)平臺(tái)VMware Workstation中安裝Ubuntu，Ubuntu版本建議：18.04LTS或20.04LTS（安裝最小系統(tǒng)即可）。

（1）最小系統(tǒng)沒有C語(yǔ)言編譯環(huán)境，需要另外安裝，建議安裝軟件有GCC、Make、Vim工具。

$ sudo apt install gcc make vim-nox

（2）為了方便后期向虛擬機(jī)傳送文件和操作LINUX系統(tǒng)，安裝SSHD服務(wù)。

$ sudo apt install openssh-server

（3）若需要在開發(fā)板上進(jìn)行Web服務(wù)的搭建，還需要安裝對(duì)應(yīng)開發(fā)板的交叉編譯器環(huán)境，同時(shí)配置系統(tǒng)環(huán)境變量和交叉編譯器所依賴的庫(kù)。

$ sudo apt install lib32ncurses5 lib32z1

（4）在Windows中可以使用MobaXterm這類軟件配置SSH客戶端信息，并連接虛擬機(jī)的Ubuntu系統(tǒng)。

（5）選擇一款自己熟悉的編輯器，比如VS Code、Notepad++、CLion等。

（6）如果需要開發(fā)板，配置好串口、虛擬機(jī)雙網(wǎng)卡（可選）環(huán)境。

2 ?BOA軟件服務(wù)的移植

BOA服務(wù)器是一個(gè)小巧高效的Web服務(wù)器，是一個(gè)運(yùn)行于UNIX或LINUX下的、支持CGI的、適合于嵌入式系統(tǒng)的、單任務(wù)的HTTP服務(wù)器，源代碼開放、性能高[1]。運(yùn)行于客戶端的瀏覽器首先需與嵌入式Web服務(wù)器BOA端建立連接，打開一個(gè)套接字虛擬文件，此文件的建立標(biāo)志著SOCKET連接建立成功。然后客戶端瀏覽器通過套接字SOCKET以GET或者POST參數(shù)傳遞方式向Web服務(wù)器提交請(qǐng)求。Web瀏覽器提交請(qǐng)求后，通過HTTP協(xié)議傳送給Web服務(wù)器。Web服務(wù)器接到請(qǐng)求后，根據(jù)請(qǐng)求的不同進(jìn)行事務(wù)處理，返回HTML文件或者通過CGI調(diào)用外部應(yīng)用程序，返回處理結(jié)果。服務(wù)器通過CGI與外部應(yīng)用程序、腳本進(jìn)行交互;根據(jù)客戶端瀏覽器在請(qǐng)求時(shí)所采用的方法，服務(wù)器會(huì)搜集客戶所提供的信息，將部分信息發(fā)送給指定的CGI擴(kuò)展程序;CGI擴(kuò)展程序進(jìn)行信息處理并將結(jié)果返回給服務(wù)器，接著服務(wù)器對(duì)信息進(jìn)行分析，將結(jié)果發(fā)送回客戶端瀏覽器顯示[2]。

嵌入式Web服務(wù)器BOA移植步驟：

（1）官網(wǎng)下載好BOA源碼壓縮文件boa-0.94.13.tar.gz。

（2）編輯TCP Socket連接代碼文檔，MobaXterm軟件中創(chuàng)建tcp_base_server.c。

源代碼如下：

#include

#include

#include

#include

#include

#include

#include

#include

/*

* TCP初始化服務(wù)器模型代碼

* */

int init_socket（unsigned short port）{

int tcp_socket;

struct sockaddr_in self;

int ret;

tcp_socket = socket（AF_INET， SOCK_STREAM， 0）;

if （tcp_socket == -1） {

perror（"socket"）;

return -1;

}

// 綁定自己開放的IP和端口

memset（&self， 0， sizeof（self））;

self.sin_family = AF_INET;

self.sin_port = htons（port）;

self.sin_addr.s_addr = INADDR_ANY;

ret = bind（tcp_socket， （struct sockaddr *）&self， sizeof（self））;

if （ret == -1） {

perror（"bind"）;

return -1;

}

listen（tcp_socket， 5）;

return tcp_socket;

}

int main（）{

int listen_fd;

int new_fd;

char buf[1024];

int ret;

char *tmp = "Hello World";

listen_fd = init_socket（8181）;

if （listen_fd == -1）{

fprintf（stderr， "init socket error?。躰"）;

return -1;

}

printf（"listen...＼n"）;

//接收有沒有新的連接請(qǐng)求，從listen_fd描述符對(duì)應(yīng)的空間來取出客戶端連接

while（1）{

new_fd = accept（listen_fd， NULL， NULL）;

if （new_fd == -1） {

perror（"accept"）;

return -1;

}

printf（"have a new connection?。躰"）;

// 接收新客戶端發(fā)來的請(qǐng)求

ret = recv（new_fd， buf， sizeof（buf）-1， 0）;

buf[ret] = 0;

printf（"接收的內(nèi)容： %s＼n"， buf）;

// 響應(yīng)客戶端的請(qǐng)求

write（new_fd， tmp， strlen（tmp））;

// getchar（）;

close（new_fd）;

}

close（listen_fd）;

return 0;

}

mkdir -p web_prj/test創(chuàng)建web_prj目錄和子目錄test，將代碼文檔tcp_base_server.c移動(dòng)到test目錄下，執(zhí)行命令gcc -o tcpserver tcp_base_server.c進(jìn)行編譯，直接運(yùn)行TCPServer程序./tcpserver打印出監(jiān)聽描述符。Web服務(wù)器是應(yīng)用層，TCP服務(wù)器是指在傳輸層選擇了TCP（傳輸控制協(xié)議）。瀏覽器是客戶端，只要Web服務(wù)器在傳輸層采用了TCP協(xié)議來傳輸，我們就將這個(gè)Web服務(wù)器等效為TCP服務(wù)器。如果TCP服務(wù)器運(yùn)行成功，在操作系統(tǒng)上傳輸層上應(yīng)該體現(xiàn)出TCP的一個(gè)特性（端口號(hào)），這個(gè)特性屬于操作系統(tǒng)內(nèi)核，不能直接查看。TCPServer程序已經(jīng)在一個(gè)終端運(yùn)行，在第一個(gè)終端按Ctrl+C結(jié)束TCPServer程序運(yùn)行，在另一個(gè)終端用netstat -tan查看傳輸層狀態(tài)，如果顯示“tcp 0 0 0.0.0.0：8181 0.0.0.0：* LISTEN”說明8181端口開啟，相當(dāng)于在運(yùn)輸層TCP上烙下烙印，以保證BOA服務(wù)器后續(xù)的正常訪問。

3 ?boa.conf的配置

需要核對(duì)boa.conf（BOA服務(wù)配置文件）里寫到的目錄是否實(shí)際存在，程序根據(jù)配置文件里的目錄創(chuàng)建文件，如果系統(tǒng)中不存在這些目錄就會(huì)報(bào)錯(cuò)。如果虛擬機(jī)上沒有變量后面的路徑信息目錄值，就需要單獨(dú)創(chuàng)建。mkdir web_prj/sources在web_prj目錄下創(chuàng)建sourxes目錄，cp boa-0.94.13.tar.gz web_prj/sources/把boa-0.94.13.tar.gz拷到sources目錄下，tar-zxvf boa-0.94.13.tar.gz-C../將BOA服務(wù)器包解壓到上級(jí)目錄web_prj下。cd boa-0.94.13/進(jìn)入boa-0.94.13，源代碼中沒有Makefile，接下來需要配置生成Makefile。

（1）根據(jù)目標(biāo)機(jī)器特性配置configure腳本，./configure執(zhí)行腳本我們就可以看到Makefile的出現(xiàn)。

（2）用Vim Makefile修改Makefile使其支持目標(biāo)板的工具。修改完成按Esc，命令行下輸入“：wq！”保存退出。

（3）在Vim compat.h修改配置文件，打開后處于普通模式。這時(shí)按i鍵進(jìn)入插入編輯模式，按a鍵進(jìn)入追加編輯模式，編輯模式中按Esc又變成普通模式。其中兩行添加指針傳遞值“foo->”修改后#define TIMEZONE_OFFSET（foo） foo->tm_gmtoff、#define TIMEZONE（foo） foo->tm_zone執(zhí)行Make，stripboa剔除符號(hào)表壓縮后大小只有80 K。

～/web_prj/boa-0.94.13/src$ strip boa

～/web_prj/boa-0.94.13/src$ -lh boa

-rwxr-xr-x 1 fy fy 80K Jun 8 02：59 boa

4 ?瀏覽器訪問路徑原理和服務(wù)配置文件的對(duì)應(yīng)關(guān)系

HTTP請(qǐng)求有八種方法：GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT，GET和POST比較常用。Web瀏覽器把用戶的操作解析為標(biāo)準(zhǔn)數(shù)據(jù)流，將符合HTTP通信協(xié)議規(guī)范的客戶請(qǐng)求向服務(wù)器發(fā)出。服務(wù)器在接收到用戶從客戶機(jī)發(fā)送的相關(guān)請(qǐng)求后，一般是在后臺(tái)進(jìn)行查詢和運(yùn)算等工作，再將結(jié)果傳回用戶端Web瀏覽器進(jìn)行顯示[3]。一次完整的HTTP請(qǐng)求過程如下：用戶訪問網(wǎng)站需要在瀏覽器上輸入U(xiǎn)RL或者域名按下回車，每個(gè)網(wǎng)站對(duì)應(yīng)一個(gè)服務(wù)器進(jìn)程，它不斷地監(jiān)聽TCP端口;一旦監(jiān)聽到連接建立請(qǐng)求并建立了TCP連接，瀏覽器就向服務(wù)器發(fā)出瀏覽某個(gè)頁(yè)面的請(qǐng)求[4]，瀏覽器解析HTML代碼并請(qǐng)求代碼中的資源（如JS、CSS、圖片等），網(wǎng)頁(yè)訪問完畢后釋放TCP連接。如果使用輸入域名的方式，則在建立連接請(qǐng)求前還需域名解析步驟，將消息從PC端上傳到服務(wù)器上，需要用到IP協(xié)議、ARP協(xié)議和OSPF協(xié)議。

程序的一次編譯，能夠在多個(gè)不同的環(huán)境進(jìn)行運(yùn)行。BOA配置文件告訴BOA程序如何進(jìn)行工作，修改.config之前先備份cp boa.conf boa_bak.conf防止改錯(cuò)后無法恢復(fù)。在boa-0.94.13目錄下創(chuàng)建目錄sudo mkdir/etc/boa，再將boa.conf拷貝到/etc/boa目錄里面。sudo vim /etc/boa/boa.conf修改配置文件的用戶名User和用戶組Group為fy、錯(cuò)誤日志ErrorLog路徑為/home/fy/boa/error_log、訪問日志AccessLog路徑為/home/fy/boa/access_log、指定Web根目錄DocumentRoot路徑為/home/fy/web_prj/works/www、服務(wù)器使用alias指令配置虛擬目錄Alias /doc /usr/doc、修改CGI查詢目錄ScriptAlias/cgi-bin//home/fy/web_prj/works/cgi/，正確配置以保證瀏覽器成功訪問BOA服務(wù)器。如果BOA沒有綁定成功是因?yàn)槎丝谔?hào)80被占用，修改boa.conf文件配置的Port為8082后再次輸入netstat-tan查看傳輸層狀態(tài)“tcp 0 0 0.0.0.0：81820.0.0.0：* LISTEN”。非正常關(guān)閉Vim編輯器時(shí)會(huì)生成一個(gè).swp文件和.swo文件，移除.boa.conf.swp和.boa.conf.swo文件。cd /web_prj/boa-0.94.13/src后執(zhí)行sudo./boa開啟BOA服務(wù)器，sudocatboa/error_log方便查看BOA服務(wù)器報(bào)錯(cuò)。

5 ?BOA服務(wù)下Shell腳本實(shí)現(xiàn)CGI程序動(dòng)態(tài)訪問

CGI（通用網(wǎng)關(guān)接口）工作原理可以簡(jiǎn)單理解為Web服務(wù)器和程序動(dòng)態(tài)生成數(shù)據(jù)之間的一個(gè)執(zhí)行外部程序通道，保證瀏覽器與服務(wù)器之間更靈活地進(jìn)行交互。調(diào)用CGI腳本的信息交互方法有GET和POST兩種：GET一般用于獲取或者查詢資源信息，而POST一般用于更新資源信息;瀏覽器顯示的是動(dòng)態(tài)的數(shù)據(jù)信息，所以系統(tǒng)采用POST方法[5]。CGI程序可以用任何程序設(shè)計(jì)語(yǔ)言編寫，如Shell腳本語(yǔ)言、Perl、FORTRAN、Pascal、C語(yǔ)言等[6]。簡(jiǎn)單起見，本系統(tǒng)采用Shell腳本編寫的CGI程序動(dòng)態(tài)響應(yīng)用戶在Web上的操作。mkdir home/fy/www再靜態(tài)網(wǎng)頁(yè)代碼移植到www目錄，打開瀏覽器輸入包含完整IP和端口號(hào)的Shell絕對(duì)路徑“http：//192.168.117.136：8082/fy/index.html”訪問靜態(tài)頁(yè)面，訪問成功表明靜態(tài)文件測(cè)試通過。編寫一個(gè)CGI測(cè)試程序?yàn)楹罄m(xù)系統(tǒng)的搭建做準(zhǔn)備。sudo mkdir web_prj/cgi創(chuàng)建用來放置動(dòng)態(tài)網(wǎng)頁(yè)的CGI目錄，在CGI目錄下創(chuàng)建time文件，輸入chmod +x time給time文件增加可執(zhí)行權(quán)限。

HTTP請(qǐng)求是由請(qǐng)求行、請(qǐng)求頭部、空行和請(qǐng)求數(shù)據(jù)四部分組成。圖1為瀏覽器發(fā)出HTTP請(qǐng)求的完整格式，請(qǐng)求頭部的最后有一個(gè)空行表示請(qǐng)求頭部結(jié)束，后面連接請(qǐng)求正文。程序語(yǔ)言中“＼r”表示一個(gè)回車符，“＼n”表示一個(gè)換行符，“＼r＼n”代表另起一行保證HTTP請(qǐng)求完整的頭部信息，缺少會(huì)導(dǎo)致瀏覽器訪問網(wǎng)頁(yè)出現(xiàn)“502 Bad Gateway”錯(cuò)誤。CGI程序time中特別注意一行echo“Content-Type：text/html;charset=utf-8＼r＼n”。Shell編寫的CGI程序放在/cgi-bin/目錄下，動(dòng)態(tài)數(shù)據(jù)通過/cgi-bin/boa/home/fy/web_prj/works/cgi/路徑查詢獲取。

6 ?基于jQuery的AJAX請(qǐng)求JSON格式數(shù)據(jù)

針對(duì)AJAX采用XML作為數(shù)據(jù)載體存在標(biāo)簽大量冗余、基于DOM的解析復(fù)雜導(dǎo)致數(shù)據(jù)傳輸量大、服務(wù)器與客戶端解析效率低的問題，提出一種基于JSON的AJAX數(shù)據(jù)通信快速算法[7]。AJAX包含JavaScript、XMLHttpRequest、CSS等技術(shù)，是一種快速創(chuàng)建交互式動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)，適合輕量級(jí)數(shù)據(jù)交互頻繁的網(wǎng)頁(yè)。本設(shè)計(jì)利用Bootstrap框架搭建呈現(xiàn)當(dāng)前溫濕度的網(wǎng)頁(yè)，用戶第一次進(jìn)入網(wǎng)頁(yè)會(huì)發(fā)送瀏覽器請(qǐng)求，服務(wù)器接收到這個(gè)請(qǐng)求會(huì)返回一套內(nèi)容，響應(yīng)的內(nèi)容會(huì)被瀏覽器重新渲染。之后網(wǎng)頁(yè)每時(shí)每刻只有溫度、濕度值在變化，開發(fā)人員沒有必要因?yàn)檫@一小部分重構(gòu)頁(yè)面，而且頻繁刷新會(huì)導(dǎo)致網(wǎng)絡(luò)數(shù)據(jù)量太大。AJAX方法使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新，意味著后臺(tái)與服務(wù)器只進(jìn)行少量數(shù)據(jù)交換，可以頻繁更新少量數(shù)據(jù)而不重新加載整個(gè)網(wǎng)頁(yè)。未使用AJAX的傳統(tǒng)網(wǎng)頁(yè)每一次更新內(nèi)容必須重新加載整個(gè)網(wǎng)頁(yè)頁(yè)面。

7 ?環(huán)境參數(shù)監(jiān)測(cè)的代碼實(shí)現(xiàn)

前面介紹了服務(wù)器搭建、動(dòng)態(tài)網(wǎng)頁(yè)加載和數(shù)據(jù)實(shí)時(shí)獲取更新的關(guān)鍵操作后，下面結(jié)合程序具體介紹系統(tǒng)在瀏覽器前端的顯示方法。由于Ubuntu不支持?jǐn)?shù)據(jù)庫(kù)，串口外接溫濕度傳感器獲取到的數(shù)據(jù)將保存在服務(wù)器下的指定文件中，前端溫濕度顯示是利用AJAX請(qǐng)求JSON格式數(shù)據(jù)，對(duì)服務(wù)器下文件進(jìn)行數(shù)據(jù)查詢。Shell腳本編寫的CGI程序?qū)崿F(xiàn)自動(dòng)刷新當(dāng)前獲取的數(shù)據(jù)，整個(gè)過程沒有訪問數(shù)據(jù)庫(kù)。第一板塊編寫一個(gè)讀取該配置文件的接口類Zone.java獲取操作系統(tǒng)時(shí)區(qū)，利用jQuery的子集Cheerio對(duì)數(shù)值預(yù)報(bào)氣象要素所在路徑（天氣網(wǎng)）的氣象報(bào)告和預(yù)測(cè)進(jìn)行DOM的爬取。部分代碼如下：

TimeZone.getDefault（）;

// 獲取任意指定區(qū)域的時(shí)區(qū)

String[] zoneIDs=TimeZone.getAvailableIDs（）;

for（String zoneID： zoneIDs） {

TimeZone.getTimeZone（zoneID）;

}

引入Cheerio：

var cheerio=require（'cheerio'），

$=cheerio.load（'

...

DOM獲取天氣網(wǎng)氣象數(shù)據(jù)：

var cheerio=require（'cheerio'），

$=cheerio.load（'