嵌入式学习-网络高级-Day03

嵌入式学习-网络高级-Day03

基于webserver的工业数据采集

HTTP协议

http简介

http特点

http协议格式

客户端请求数据格式

请求行：

请求头部

空行：

请求体

服务器响应数据格式

webserver源码分析

postman的使用

整体流程分析

任务

html

html简介

html标签

标签格式

标签的分类

常用标签

1）标题标签：h1-h6

2）段落标签：p

3）换行标签：br

4）块标签：div

5）其他补充标签

6）表单标签：input

基于webserver的工业数据采集

HTTP协议

http简介

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写，是用于Web Browser（浏览器）到Web Server（服务器）进行数据交互的传输协议。

HTTP是应用层协议

HTTP是一个基于TCP通信协议传输来传递数据（HTML 文件, 图片文件, 查询结果等）

HTTP协议工作于B/S架构上，浏览器作为HTTP客户端通过URL主动向HTTP服务端即WEB服务器发送所有请求，Web服务器根据接收到的请求后，向客户端发送响应信息。

HTTP默认端口号为80，但是你也可以改为其他端口

http特点

HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

（需要注意一点：HTTP协议本身是无连接的，即每个请求和响应都是独立的。但是http是基于TCP协议的连接管理方式，想要与长连接和短连接用于优化HTTP请求和响应的传输效率。长连接是指在一个TCP连接上可以发送多个HTTP请求和响应，而不需要每次请求都建立和关闭一个新的TCP连接。短连接是指每个HTTP请求和响应都使用一个新的TCP连接。）

HTTP是媒体独立：这意味着，只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。

HTTP是无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。无状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

HTTP 协议的同学可能都知道，HTTP 协议是以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了 Web 浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此 HTTP 协议不适合传输一些敏感信息，比如信用开号、密码等。
为了解决 HTTP 协议的这一缺陷，需要使用另一种协议：HTTPS 协议。
HTTPS（全称：Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的 HTTP 通道，简单来说就是 HTTP 的安全版。即在 HTTP 下加入 SSL 协议，SSL 依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。
HTTPS 和 HTTP 的区别主要为以下三点：
● 1.http 是超文本传输协议，信息是明文传输；https 协议是由 http + ssl 协议构建的可进行加密传输、身份认证的网络协议，信息是密文传输，比 http 协议安全。
● 2.https 协议需要到 ca 申请证书，一般免费证书很少，需要缴费
● 3.http 和 https 使用的默认端口也不一样，前者是 80，后者是 443

http协议格式

客户端请求数据格式

客户端发送一个HTTP请求到服务器的请求消息包括以下格式：请求行、请求头部、空行和请求数据四个部分组成，下图给出了请求报文的一般格式。

请求行：

请求行是由请求方法字段、url字段、http协议版本字段3个部分组成。请求格式如：

http的请求方式：

http协议中共定义了八种数据的请求方法。分别是：OPTIONS、HEAD、GET、POST、PUT、DELETE、TRACE、CONNECT；我们在实际应用中常用的也就是 get 和 post，其他请求方式也都可以通过这两种方式间接的来实现。

（增POST 删DELETE 改PUT 查GET）

GET方法和POST方法的区别？

Post（处理数据，服务器处理完后返回客户端，一般处理复杂一点的数据）

GET通常用来从服务器上获得数据，而非修改信息；POST用来向服务器传递数据。

1、请求数据时带参数时；GET请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。POST请求会把请求的数据放置在HTTP请求包的包体中。因此，GET请求的数据会暴露在地址栏中，而POST请求则不会。

get请求可能没有请求数据，也可能有请求数据，但是请求数据不会在请求格式里请求数据处，会在地址栏中（也会在请求格式的url后面），post请求，有数据会在请求格式里请求数据处，一定不会在地址栏中（也不会在url之后跟着）

2、传输数据的大小；在HTTP规范中，没有对URL的长度和传输的数据大小进行限制。但是在实际开发过程中，对于GET，特定的浏览器和服务器对URL的长度有限制。因此，在使用GET请求时，传输数据会受到URL长度的限制。对于POST，由于不是URL传值，理论上是不会受限制的，但是实际上各个服务器会规定对POST提交数据大小进行限制，Apache、IIS都有各自的配置。

3、GET请求返回的内容可以被浏览器缓存起来。而每次提交的POST，浏览器在你按下F5的时候会跳出确认框，浏览器不会缓存POST请求返回的内容

4、GET对数据进行查询，POST主要对数据进行增删改！简单说，GET是只读，POST是写

5、对于参数的数据类型，get只接受ASCII字符，而post没有限制。

请求头部

也被称作消息报头,请求头是由一些键值对组成，每行一对，关键字和值用英文冒号“:”分隔。允许客户端向服务器发送一些附加信息或者客户端自身的信息，典型的请求头如下:

Accept：作用：描述客户端希望接收的响应body 数据类型；示例：Accept:text/html

Accept-Charset：作用：浏览器可以接受的字符编码集；示例：Accept-Charset:utf-8

Accept-Language：作用：浏览器可接受的语言；示例：Accept-Language:en

Connection：作用：表示是否需要持久连接，注意HTTP1.1默认进行持久连接；示例：Connection:close

Content-Length：作用：请求的内容长度：示例：Content-Length:348

Content-Type：作用：描述客户端发送的 body 数据类型

空行：

最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器以下不再有请求头。

请求体

请求数据：请求数据不在GET方法中使用，而是在POST方法中使用。POST方法适用于需要客户填写表单的场合。与请求数据相关的最常使用的请求头是Content-Type和Content-Length。

服务器响应数据格式

HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。

状态行：由三部分组成，HTTP协议的版本号、状态码、以及对状态码的文本描述。例如：HTTP/1.1 （协议版本）200 （状态码）OK (CRLF) 。（200表示请求已经成功）

200 OK：请求成功，服务器成功处理了请求并返回所请求的资源。
301 Moved Permanently：请求的资源已永久移动到新的URL，客户端应更新其链接。
302 Found：请求的资源暂时移动到新的URL，客户端应继续使用原始URL。
400 Bad Request：服务器无法理解请求的语法，通常是由于客户端发送的请求不正确导致的。
401 Unauthorized：请求要求身份验证，客户端需要提供有效的身份凭证。
403 Forbidden：服务器拒绝请求，客户端没有访问所请求资源的权限。
404 Not Found：请求的资源不存在，服务器无法找到所请求的资源。
500 Internal Server Error：服务器内部错误，无法完成请求的处理。
503 Service Unavailable：服务器当前无法处理请求，通常是由于服务器过载或维护导致的。

webserver源码分析

初始化服务器
循环等待连接，连接成功之后创建线程，调用线程处理函数msg_request,在该函数内设置线程游离态，调用handler_msg函数进行请求处理
在handlet_msg函数中，首先查看http的请求报文，分别获取请求方法，url以及get请求携带的数据，判断请求方法是post还是get，如果既不是post，也不是get，直接返回，如果是post请求以及get请求携带参数的情况，将need_hanlder赋值为1。确定请求资源的路径，默认path为index.html，如果path为其他情况，不存在则404.html，存在（指定正确路径以及默认）正常执行（无参数）进入echo_www函数返回指定的文件。need_hanlder值为1，进入handler_request函数。
在handler_request函数中，主要用来处理post请求的数据,通过判断请求方法，如果是post请求，循环读出请求头部，获取请求数据的长度，获取请求数据，开始响应，响应状态行，空行，调用parse_and_process函数处理数据。
在parse_and_process函数中，根据不同的请求数据，判断，处理数据，回复响应正文。

postman的使用

整体流程分析

任务

通过postman模拟浏览器，实现Modbus Slave端数据采集和设备控制

注意:

1. 存在共享内存和消息队列数据收发问题时。

解决方案：

1）在代码中加打印语句，确保两个进程用的是同一个id

2）由于程序是强制结束，再下次运行代码时，将消息队列删除一下

查看和删除共享内存和消息队列：

ipcs -m ：查看共享内存

ipcrm -m shmid：删除共享内存

ipcs -q：查看消息队列

ipcrm -q semid：删除消息队列

2. key值的创建路径指定/目录下的某个新建文件

多使用打印语句，排查错误位置

网页服务：

parse_and_process函数加入判断，判断传输的数据到底是什么，根据数据不同，处理也不相同

采集：收到get数据，创建key值，创建或打开共享内存，映射，从共享内存中读传感器数据，send发送给网页

控制：收到数据set，创建key值，创建或打开消息队列，msgsnd将消息添加到消息队列中（消息队列结构体中第一个成员必须是long类型的变量）

采集控制：

采集：创建实例，设置id，连接，创建key值，创建或打开共享内存，映射，主从问答，每隔1s读取一次传感器数据放到共享内存中

控制：创建实例，设置id，连接，创建key值，创建或打开消息队列，msgrcv接收消息队列中内容（结构体），主从问答下达指令

html

开发环境：vscode

可以在wwwroot下面新建一个文件，例如：example.html
安装库open in browser

库安装完成后，在编写文本位置右击->open in other browser->选择合适的浏览器即可在网页显示html标签内容

输入html，选择html:5或者！回车可以将框架进行搭建

html简介

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”。是用来描述网页的一种语言。

所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

HTML 不是一种编程语言，而是一种标记语言 (markup language)

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

html标签

标签格式

有尖括号包围关键字，如:<html>

通常成对存在，如：<body> </boby>

上面的标签叫做开始标签，后面的标签是结束标签

标签的分类

(1)单标签：也称空标签 <标签名 /> 如：<br/>

(2)双标签：成对存在 <标签名> 内容 </标签名>

常用标签

1）标题标签：h1-h6

格式：<hn> 标题文本 </hn>

举例：

<h1>这是标题标签</h1>

<h2>这是标题标签</h2>

<h3>这是标题标签</h3>

<h4>这是标题标签</h4>

<h5>这是标题标签</h5>

<h6>这是标题标签</h6>

2）段落标签：p

一个段落中会根据浏览器窗口的大小自动换行

格式：<p> 文本内容 </p>

3）换行标签：br

格式：<br />

4）块标签：div

是一个块级元素，可以把文档分割为独立的、不同的部分，可以在div中嵌套标签

举例：

<h2>News headline 1</h2>

</div>

注：可以给div设置class或id，通过选择器设置属性，则内部成员具有相同属性

5）其他补充标签

加粗: strong 标签和 b 标签

倾斜: em 标签和 i 标签

删除线: del 标签和s标签

下划线: ins 标签和 u 标签

其他标签：

<hr>：该标签用于插入一条水平线，常用于分隔不同区块或段落之间。

<sup>：该标签用于定义上标文本，将文本显示在上方略高位置。

<sub>：该标签用于定义下标文本，将文本显示在下方略低位置。

列表标签

无序列表：无序列表是HTML中用于显示项目或事项列表的标记。使用<ul>元素来创建无序列表，并在其中使用<li>表示每个列表项。

有序列表：有序列表是HTML中用于显示按顺序排列的项目或事项列表的标记。使用<ol>元素来创建有序列表，并在其中使用<li>元素表示每个列表项。

6）表单标签：input

表示输入意思，是单标签

格式：<input type=”” name=”” value=”” id=””.....>

属性有多种：

这里重点讲type为text、radio

当type为text，表示是文本输入框

用法：<input type=”text” value=”文本框默认值” >

当type为radio，表示是单选框

用法：<input type=”radio” name=”控件名称” value=”提交的数值” οnclick=”处理函数” checked=”checked”>

解释：name：控件名称，同一组单选框设置相同名称

//Value：必须要有，是当点击时会提交的数据

Onclick:点击时会执行双引号中的处理函数

Checked：默认选中，同一组中只设置一个即可

xhr.readyState属性代表XMLHttpRequest对象的状态。它有5个取值：
0 (未初始化)：尚未调用open()方法。
1 (已初始化)：已经调用open()方法，但尚未调用send()方法。
2 (发送中)：已经调用send()方法，但尚未接收到响应。
3 (接收中)：已经接收到部分响应数据。
4 (已完成)：已经接收到全部响应数据，并且可以使用该响应。
xhr.status属性代表服务器返回的HTTP状态码。其中200表示OK，表示请求成功。其他常见的状态码有404表示找不到请求的资源，500表示服务器内部错误等。

<!DOCTYPE html><!--声明这是h5文档-->
<html lang="en"><!--该网页为html网页,语言为英文--><head><meta charset="UTF-8"><!--描述网页属性--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>24081</title><script>//常用语外部引用,一般去写JSfunction fun(obj) {if (obj == 'man')
                console.log("I AM MAN");else
                console.log("I AM WOMAN");}function get(){var v= document.getElementsByName("username");//v:不仅代表一个变量,类似于数组//v[0]:找到的第一个符合条件的标签// v[0].value="hello world";var xhr=new XMLHttpRequest();//创建对象var url="";//配置
            xhr.open("post",url,true);//true:异步请求//flase:非异步            xhr.onreadystatechange=function()//状态发生改变{//=:赋值//==:比较,但是不区分数据类型//===:比较,并区分数据类型if(xhr.readyState===4&&xhr.status===200){var z=xhr.responseText;//响应正文//1,2 3 4var x=z.split(",");//分割// x[0]+x[1]+x[2];//拼接字符串}}//发送请求
            xhr.send("get");//参数为请求数据}</script>
</head><body>HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”。是用来描述网页的一种语言。<br><br><br><br>
    name:<input type="text" value="请输入姓名" name="username"><input type="button" value="刷新" onclick="get()"><br>
    sex:
    男:<input type="radio" name="sex" id="man" checked="checked" onclick="fun(id)">
    女:<input type="radio" name="sex" id="woman" onclick="fun(id)"><br><br><br> <!--br:换行--><div style="color: white;background:purple;">
        所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。<p><!--p:段落-->HTML 不是一种编程语言，而是一种标记语言 (markup language)
            Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容</p><h1>这是一级标题</h1><!--标题--><h2>这是二级标题</h2><h3>这是三级标题</h3></div><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6></body></html>