Linux学习系列十五:WebServer使用

1.引言

Server一般有两种含义,一种是表示硬件,通常是指那些具有较高计算能力,能够提供给多个用户使用的计算机。另外一种含义是表示软件程序,这种程序主要用来对外提供某些服务,比如邮件服务、数据库服务、域名服务、网页服务等。

本篇介绍的是软件层面的Server,WebServer是指能够供 Web 服务的 Server,它的主要功能是提供网上信息浏览服务。嵌入式WebServer,是在嵌入式系统上运行的,可以通过浏览器去访问,对硬件要求会低一点。我们常用的家用路由器,就是一个典型的应用,通过Web界面直接进行访问和配置设备,非常便利。

嵌入式WebServer有很多中,比如BOA、shttpd、lighttpd、goahead、appweb和apache等。本篇以thttpd为例,来进行介绍。

2.环境介绍

2.1.硬件

1) 网上的一个第三方做的NUC972开发板:

Linux学习系列十五:WebServer使用

有兴趣购买的朋友,可以去他们的淘宝店购买:

https://s.click.taobao.com/X8mza8w

2.2.软件

1) Uboot继续使用之前文章用的,无须改动。

2) Kernel在上一篇基础上,无须改动。

3) Rootfs在上一篇用Buildroot生成的基础上,需要做一定的改动,用来生成thttpd。

3.Buildroot配置

Buildroot里需要做一定的配置,用来支持thttpd,只需要把Target packages- Networking applications中的thttpd选中即可

Linux学习系列十五:WebServer使用

之后保存,编译即可。我们只需要用到下面两个文件

/output/target/usr/sbin/thttpd

/output/build/thttpd-2.25b/contrib/redhat-rpm/thttpd.conf

我们只需要将上述生成的thttpd直接放到板子的/usr/sbin目录里(注意要修改它的可执行权限)即可,将thttpd.conf放到/etc目录中。

4.thttpd基础功能

4.1 显示静态界面

开启thttpd服务器可以使用配置文件的方式,或者直接跟运行选项。我们以配置文件为例。

使用配置文件的方式如下:

使用 vi 打开 thttpd.conf 文件,并进行修改,我们将chroot注释掉,同时将“user=httpd”改为“user=root”

dir=/home/httpd/html#chrootuser=root# default = nobodylogfile=/var/log/thttpd.logpidfile=/var/run/thttpd.pid# This section _documents_ defaults in effect# port=80# nosymlink# default = !chroot# novhost# nocgipat# nothrottles# host=0.0.0.0# charset=iso-8859-1

注意上述dir=/home/httpd/html 这个目录是用来存放html文件的,所以我们需要新建这三个目录

# cd /

# mkdir /home /home/httpd /home/httpd/html

切换到 /home/httpd/html 目录下,并新建一个 index.html 文件,为什么名字叫index,我也不清楚,猜测是webserver程序里指定的,因为我试了换成其他的名字是无法正常工作的。

# cd /home/httpd/html

# vi index.html

内容为:

<h1>Hello TopSemic Friends!</h1>

保存,退出。

之后启动thttpd

# thttpd -D -C /etc/thttpd.conf &

最后就可以在访问了,在浏览器中输入192.168.0.100,显示如下:

Linux学习系列十五:WebServer使用

index.html 中的内容简单介绍下,

<h1> …. </h1>,表示标题,<h1> 定义最大的标题。<h6> 定义最小的标题。

Html文件中的<h1> 含义可以参考:https://www.w3school.com.cn/tags/tag_hn.asp

http://www.acme.com/software/thttpd/thttpd_man.html   参数具体含义可以在这里查询。

4.2 CGI示例

CGI是实现web交互的一个比较早的,支持任何语言。依赖于web服务器使用。整体上的结构如图所示:

Linux学习系列十五:WebServer使用

CGI(公用网关接口)规定了Web服务器调用其他可执行程序(CGI程序)的接口协议标准。Web服务器通过调用CGI程序实现和Web浏览器的交互,也就是CGI程序接受Web浏览器发送给Web服务器的信息进行处理,将响应结果再回送给Web服务器及Web浏览器。CGI程序一般完成Web网页中表单(Form)数据的处理、数据库查询和实现与传统应用系统的集成等工作。CGI程序可以用任何程序设计语言编写,如Shell脚本语言、Perl、Fortran、Pascal、C语言等。但是用C语言编写的CGI程序具有执行速度快、安全性高(因为C语言程序是编译执行且不可被修改)等特点。

CGI接口标准包括标准输入、环境变量、标准输出三部分。

CGI文件并不要求是以.cgi或.CGI为后缀的文件,只要生成它的.c文件按照下面的格式来就行了。例如test.c

#include <stdio.h>#include <string.h>int main(int argc, char *argv[]){printf("Content-type:text/html\n\n");printf("<html>\n");printf("<head><title>An html page from a cgi</title></head>\n");printf("<body>\n");printf("<h1>TopSemic CGI Example</h1>\n");printf("</body>\n ");printf("</html>\n");   fflush(stdout);return 0;}

它是以printf(“Content-type:text/html “);开始,这是必须的。然后前后分别以printf(“<html> “);和printf(“</html> “);作为开始和结束,中间可嵌入我们自己处理的代码。

然后arm-linux-gcc test.c -o test.cgi就行了,如果编出来的test没有可执行权限,需要执行chmod +x test.cgi,然后将此文件放到服务器的根目录,如前面例子所示的/home/httpd/html/目录。

另外需要在上面的配置文件基础上,加上一句cgipat=test.cgi,重启启动thttpd。

dir=/home/httpd/html#chrootuser=root# default = nobodylogfile=/var/log/thttpd.logpidfile=/var/run/thttpd.pidcgipat=test.cgi

这样就可以在浏览器中访问了,格式为 IP/test.cgi,如”192.168.0.100/test.cgi”。访问这个文件的效果如下图所示

http://192.168.0.100/test.cgi

Linux学习系列十五:WebServer使用

备注:

如果无法访问,可能需要清除浏览器cookie/缓存

Linux学习系列十五:WebServer使用

4.3 CGI与按钮结合

前面介绍访问CGI文件可以通过[IP]/[CGI文件名]这种格式来实现,如果我们在主页(index.html)上点击某个按钮,它能从192.168.0.100跳转到192.168.0.100/test.cgi,即可把按钮与用C语言生成的CGI文件贯通起来。实现这一点的关键在于html中form表单中的action。如下例所示,

action="test"<html><head><title>Test Page</title></head><body style="margin-left:480px"><h1>Test Button</h1><form enctype="application/x-www-form-urlencoded" action="test.cgi" method="post"><input type="submit" value="Query"></form></body></html>

在此页面中,有一个名为Query的按键,点击下它,页面就会从192.168.50.10跳转到192.168.50.10/test.cgi,并在thttpd服务器的根目录找名为test的文件,查看它是否为cgi文件,如果是cgi文件,即执行它。

5.控制LED

我们要实现的功能是:

Linux学习系列十五:WebServer使用

点击ON按钮点亮LED,点击OFF按钮关闭LED,具体实现方法如下:

1) 建立index.html文件

<html><head><title>Test Page</title></head><body style="margin-left:480px"><h2>TopSemic LED Example</h2>        LED D3:<br><form enctype="application/x-www-form-urlencoded" action="led-on.cgi" method="post"><input type="submit" value="ON"></form><form enctype="application/x-www-form-urlencoded" action="led-off.cgi" method="post"><input type="submit" value="OFF"></form></body></html>

2)修改配置文件

cgipat=led-on.cgi|led-off.cgi

3) cgi文件

led-on.c,交叉编译生成led-on.cgi

#include <stdio.h>#include <stdio.h>#include <stdlib.h>// Operation of LED D2#define EXPORT_GPIO  "echo  37 > /sys/class/gpio/export"#define GPIO_OUTPUT  "echo  out > /sys/class/gpio/gpio37/direction"#define TURNON_LED  "echo  0 > /sys/class/gpio/gpio37/value"#define TURNOFF_LED "echo  1 > /sys/class/gpio/gpio37/value"
void InitLED(){system(EXPORT_GPIO);system(GPIO_OUTPUT);}
void TurnOnLED(){system(TURNON_LED);}
void TurnOffLED(){system(TURNOFF_LED);}
int main(void){printf("Content-type:text/html\n\n");printf("<html>\n");
    InitLED();    TurnOnLED();printf("</body>\n");printf("</html>\n");return 0;}

将上述main()函数里TurnOnLED()改为TurnOffLED()另存为led-off.c,交叉编译生成led-off.cgi. 注意一定要修改led-on.cgi和led-off.cgi的可执行权限。

4)重新启动thttpd,

这样就可以通过访问192.168.0.100控制LED灯亮灭了。

但是有个小问题,就是点击ON/OFF按钮时会进入到对应cgi界面,还得返回到主页面才能进行其他操作,这个目前还不知道怎么解决。

Linux学习系列十五:WebServer使用

Linux学习系列十五:WebServer使用

6.控制LED灯改进

针对上一节点击ON/OFF按钮时会进入到对应cgi界面,还得返回到主页面才能进行其他操作的问题,在文章发布后得到一个热心朋友的帮助,得到了解决。

只需要对index.html做下改进,

 <html>
<head>
<title>Test Page</title>
</head>
<script type="text/javascript">
function led_on() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "led-on.cgi");
xhr.send();
}
function led_off() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "led-off.cgi");
xhr.send();
}
</script>
<body style="margin-left:480px">
<h2>TopSemic LED Example</h2>
LED D3:<br>
<button type="button" onclick="led_on()">ON</button>
<button type="button" onclick="led_off()">OFF</button>
</body>
</html>

对上述代码做个解释:

前半段是在 HTML 页面中插入了一段 JavaScript,

<script type=”text/javascript”>

……

</script>

JavaScript中定义两个函数,JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 (),由函数执行的代码被放置在花括号中:{}

function name(参数 1, 参数 2, 参数 3) {

要执行的代码

}

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想,因为您能够:

–在不重新加载页面的情况下更新网页

–在页面已加载后从服务器请求数据

–在页面已加载后从服务器接收数据

–在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

XMLHttpRequest.open() 方法初始化一个请求。

XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求(默认为异步请求),则此方法会在请求发送后立即返回。

7.参考资料

1) https://blog.csdn.net/xygl2009/article/details/41971441

2) https://blog.csdn.net/sinat_28309919/article/details/77509781

3) https://blog.csdn.net/qq_695538007/article/details/9153187

8.结束语

本期相关的资料在https://github.com/TopSemic/NUC972_Linux   Lesson15中.

本篇为大家介绍了Linux下Webserver的使用,欢迎大家多交流,可以在网页下方留言讨论,或者发邮件:Topsemic@sina.com  ,微信公众号如下,欢迎关注:

Linux学习系列十五:WebServer使用

也可以加入微信群,与我们一起交流,加入方式是先添加下方联系人微信,备注原因后拉你入群

Linux学习系列十五:WebServer使用

0

发表评论