基于BOA的異步環境參數監測及氣象預報系統設計

傅玥 郭航宇 李解 譚海洋

摘 ?要：為了讓操作者可以通過瀏覽器維護和管理監測點，方便其查看監測數據，設計利用BOA服務器搭建嵌入式Web控制器、傳輸層選擇有三次握手和超時重傳機制的TCP并包含了針對數據發送的防丟失措施。采用AJAX技術實現環境參數異步傳輸，以JSON格式作為數據交互格式，用CGI實現客戶端與服務器端的請求和響應，Shell腳本實現CGI程序動態訪問、自動更新環境參數。

關鍵詞：嵌入式Web服務器;BOA;CGI;AJAX數據通信;JSON

中圖分類號：TP274;S828 ? ? 文獻標識碼：A 文章編號：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 ?引 ?言

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

1 ?Ubuntu安裝C語言編譯環境

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

（1）最小系統沒有C語言編譯環境，需要另外安裝，建議安裝軟件有GCC、Make、Vim工具。

$ sudo apt install gcc make vim-nox

（2）為了方便后期向虛擬機傳送文件和操作LINUX系統，安裝SSHD服務。

$ sudo apt install openssh-server

（3）若需要在開發板上進行Web服務的搭建，還需要安裝對應開發板的交叉編譯器環境，同時配置系統環境變量和交叉編譯器所依賴的庫。

$ sudo apt install lib32ncurses5 lib32z1

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

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

（6）如果需要開發板，配置好串口、虛擬機雙網卡（可選）環境。

2 ?BOA軟件服務的移植

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

嵌入式Web服務器BOA移植步驟：

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

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

源代碼如下：

#include

#include

#include

#include

#include

#include

#include

#include

/*

* TCP初始化服務器模型代碼

* */

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！＼n"）;

return -1;

}

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

//接收有沒有新的連接請求，從listen_fd描述符對應的空間來取出客戶端連接

while（1）{

new_fd = accept（listen_fd， NULL， NULL）;

if （new_fd == -1） {

perror（"accept"）;

return -1;

}

printf（"have a new connection！＼n"）;

// 接收新客戶端發來的請求

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

buf[ret] = 0;

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

// 響應客戶端的請求

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

// getchar（）;

close（new_fd）;

}

close（listen_fd）;

return 0;

}

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

3 ?boa.conf的配置

需要核對boa.conf（BOA服務配置文件）里寫到的目錄是否實際存在，程序根據配置文件里的目錄創建文件，如果系統中不存在這些目錄就會報錯。如果虛擬機上沒有變量后面的路徑信息目錄值，就需要單獨創建。mkdir web_prj/sources在web_prj目錄下創建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服務器包解壓到上級目錄web_prj下。cd boa-0.94.13/進入boa-0.94.13，源代碼中沒有Makefile，接下來需要配置生成Makefile。

（1）根據目標機器特性配置configure腳本，./configure執行腳本我們就可以看到Makefile的出現。

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

（3）在Vim compat.h修改配置文件，打開后處于普通模式。這時按i鍵進入插入編輯模式，按a鍵進入追加編輯模式，編輯模式中按Esc又變成普通模式。其中兩行添加指針傳遞值“foo->”修改后#define TIMEZONE_OFFSET（foo） foo->tm_gmtoff、#define TIMEZONE（foo） foo->tm_zone執行Make，stripboa剔除符號表壓縮后大小只有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 ?瀏覽器訪問路徑原理和服務配置文件的對應關系

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

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

5 ?BOA服務下Shell腳本實現CGI程序動態訪問

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

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

6 ?基于jQuery的AJAX請求JSON格式數據

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

7 ?環境參數監測的代碼實現

前面介紹了服務器搭建、動態網頁加載和數據實時獲取更新的關鍵操作后，下面結合程序具體介紹系統在瀏覽器前端的顯示方法。由于Ubuntu不支持數據庫，串口外接溫濕度傳感器獲取到的數據將保存在服務器下的指定文件中，前端溫濕度顯示是利用AJAX請求JSON格式數據，對服務器下文件進行數據查詢。Shell腳本編寫的CGI程序實現自動刷新當前獲取的數據，整個過程沒有訪問數據庫。第一板塊編寫一個讀取該配置文件的接口類Zone.java獲取操作系統時區，利用jQuery的子集Cheerio對數值預報氣象要素所在路徑（天氣網）的氣象報告和預測進行DOM的爬取。部分代碼如下：

TimeZone.getDefault（）;

// 獲取任意指定區域的時區

String[] zoneIDs=TimeZone.getAvailableIDs（）;

for（String zoneID： zoneIDs） {

TimeZone.getTimeZone（zoneID）;

}

引入Cheerio：

var cheerio=require（'cheerio'），

$=cheerio.load（'

...

DOM獲取天氣網氣象數據：

var cheerio=require（'cheerio'），

$=cheerio.load（'