物联网LWIP网络开发8

Sercin

已于 2024-09-16 18:21:15 修改

阅读量829

点赞数 22

文章标签：网络

于 2024-09-16 18:19:33 首次发布

本文链接：https://blog.csdn.net/Sercin/article/details/141998565

版权

D8web点灯功能（了解为主）

8.1HTTP协议详解

HTTP协议介绍

超文本（Hyper Text）

包含有超链接(Link)和各种多媒体元素标记(Markup)的文本。这些超文本文件彼此链接，形成网状(Web)，因此又被称为网页(Web Page)。这些链接使用URL表示。最常见的超文本格式是超文本标记语言HTML。

URL

URL即统一资源定位符(**U**niform **R**esource **L**ocator)，用来唯一地标识万维网中的某一个文档。URL由协议、主机和端口(默认为80)以及文件名三部分构成。如：

HTTP

HTTP工作原理

1. 客户端发起请求

URL：用户通过在浏览器中输入网址（URL）来访问网页。URL 指定了资源的位置以及可能的查询参数。
HTTP 请求：浏览器将 URL 解析为请求消息，然后通过网络发送给服务器。这个请求消息包括：
- 请求行：包含了请求方法（如 GET、POST）、URL 路径和 HTTP 版本号。
- 请求头：包含了关于客户端和请求本身的一些附加信息，如请求类型、用户代理、接受的内容类型等。
- 请求体（可选）：在 POST 或 PUT 请求中，包含了要发送给服务器的数据。

2. 服务器处理请求

接收请求：服务器在其端口（默认为 80 或 443 对于 HTTPS）上监听客户端发来的请求。
解析请求：服务器解析请求行、请求头和请求体（如果有的话），以确定客户端需要什么。
处理请求：服务器根据请求的资源类型（如 HTML 文件、图片、CSS 文件等）进行相应的处理。这可能包括查询数据库、计算、文件访问等。
生成响应：服务器将处理结果封装成 HTTP 响应消息。

3. 服务器发送响应

响应行：包含了 HTTP 版本号、状态码（如 200 OK 表示成功）和状态消息（如 OK）。
响应头：包含了关于响应的一些元信息，如内容类型、内容长度、服务器信息等。
响应体：包含了客户端请求的资源，如 HTML 页面、图片数据等。

4. 客户端接收并处理响应

接收响应：客户端接收到服务器发来的响应消息。
解析响应：客户端解析响应行、响应头和响应体。
渲染：对于 HTML 文档，浏览器会解析 HTML 代码，并根据需要加载外部资源（如 CSS、JavaScript 文件和图片），最终将页面渲染出来供用户查看。

5. 连接关闭或保持活动

连接关闭：在 HTTP/1.0 中，每个请求/响应后连接通常会关闭。但在 HTTP/1.1 中，默认启用了持久连接（也称为 keep-alive），允许在同一连接上发送多个请求/响应，从而提高了效率。
HTTPS：HTTPS 是 HTTP 的安全版本，它通过 SSL/TLS 协议在 HTTP 的基础上添加了加密层，以确保数据在客户端和服务器之间的传输过程中不被窃听或篡改。

HTTP 协议的主要特点

请求-响应模型：HTTP 是一个无状态的请求-响应协议。客户端（如浏览器）发送一个请求到服务器，服务器处理该请求并返回一个响应给客户端。HTTP 协议本身不保留任何两次请求之间的状态信息。

HTTP报文结构

即从客户端（浏览器）向Web服务器发送的请求报文，报文的所有字段都是ASCII码

8.2web技术开发详解上

Web点灯功能展示

html超文本标记语言

介绍

- 超文本标记语言
- 是用来描述网页的一种语言。
- 不是一种编程语言，使用标记标签来描述网页
- HTML HTML 文档包含了HTML 标签及文本内容
- HTML定义了网页的结构

基本结构

html 体验

<HTML>
	<HEAD>
		<TITLE>欢迎进入 HTML 世界</TITLE>
	</HEAD>
	<BODY>
		<P>这会是一种很有趣的体验</P>
	</BODY>
</HTML>

CSS

介绍

- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个

CSS体验

<HTML>
	<HEAD>
		<TITLE>欢迎进入 HTML 世界</TITLE>
		<style type="text/css">
		p{ 
			font-size:200px;
			color:red;
		 } 
		</style>
	</HEAD>
	<BODY>
		<P>这会是一种很有趣的体验</P>
	</BODY>
</HTML>

JavaScript脚本语言

介绍

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

- 直接写入 HTML 输出流
- 对事件的反应
- 改变 HTML 内容
- 改变 HTML 图像
- 改变 HTML 样式
- 验证输入

javasrcipt体验

<HTML>
	<HEAD>
		<TITLE>欢迎进入 HTML 世界</TITLE>
		<script type = "text/javascript">
		var arr = new Array();
		arr[0] = "辛芷蕾.jpg";
		arr[1] = "江疏影.jpg";
		arr[2] = "王鸥.jpg";
		var i = 0;
		setInterval(changeImg,1000);
		function changeImg()
		{
			var obj = document.getElementById("obj");
			obj.src = arr[i++];
			if(i == 3){
				i = 0;
			}
		
		}
		</script>
	</HEAD>
	<BODY>
		<P>这会是一种很有趣的体验</P>
		<img id = "obj" src = "辛芷蕾.jpg"/>
	</BODY>
</HTML>

8.3web技术开发详解下

ajax技术

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

创建 XMLHttpRequest 对象

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求

  GET
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
  POST
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
  异步 - true 或 false？
 True
xmlhttp.onreadystatechange=function()     //相当于callback
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
 false
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

html实现

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web 点灯</title>
<script defer="defer">
        function ledSwitch(string) {
		document.getElementById("txtState").style.backgroundColor = string;
        }
    </script>
</head>

<body style="background-color:black">
<font size="12" color="yellow">
<b>
<div class="text" style=" text-align:center;"><big>Web 点灯</big></div>
</b>
</font>
<br> </br>     
<div align="center" id="txtState"style="margin:auto;width:160px;height:160px;border-radius:50%;background:white;"></div>
<br> </br>
<div style=" text-align:center;">
<input type="button" value="打开" style="width:160px;height:80px;background:green;" onclick="ledSwitch('red')" />
<input type="button" value="关闭" style="width:160px;height:80px;background:red;" onclick="ledSwitch('white')" />
</div>
</body>
</html>

交互功能实现

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web 点灯</title>
<script defer="defer">
        function ledSwitch(string) {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("txtState").style.backgroundColor = xmlhttp.responseText;
						console.log(xmlhttp.responseText);
					}
                },
            xmlhttp.open("GET", string, true);
            xmlhttp.send(); 
        }
    </script>
</head>

<body style="background-color:black">
<font size="12" color="yellow">
<b>
<div class="text" style=" text-align:center;"><big>Web 点灯</big></div>
</b>
</font>
<br> </br>     
<div align="center" id="txtState"style="margin:auto;width:160px;height:160px;border-radius:50%;background:white;"></div>
<br> </br>
<div style=" text-align:center;">
<input type="button" value="打开" style="width:160px;height:80px;background:green;" onclick="ledSwitch('on')" />
<input type="button" value="关闭" style="width:160px;height:80px;background:red;" onclick="ledSwitch('off')" />
</div>
</body>
</html>

8.4web点灯功能实现上

Web点灯框架设计

TCP服务器开发->主页请求响应->led控制&请求响应

深入分析http首部字段

chrome抓包分析

请求html

请求的http报文

GET /index.html HTTP/1.1
Host: 127.0.0.1
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36
Sec-Fetch-User: ?1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
If-Modified-Since: Fri, 03 Jan 2020 08:39:40 GMT

相应的http报文（开发服务器必须要掌握的）

http
HTTP/1.1 200 OK
Content-Type: text/html
Connection: Keep-Alive
Content-Length: 1430

打开命令

请求

GET /on HTTP/1.1
Host: 127.0.0.1
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36
Accept: */*
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Referer: http://127.0.0.1/index.html
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
If-Modified-Since: Wed, 08 Jan 2020 08:06:28 GMT

响应

HTTP/1.1 200 OK
Content-Type: application/octet-stream
Connection: Keep-Alive
Content-Length: 3

关闭命令

请求

GET /off HTTP/1.1
Host: 127.0.0.1
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36
Accept: */*
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Referer: http://127.0.0.1/index.html
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
If-Modified-Since: Wed, 08 Jan 2020 08:06:47 GMT

响应

HTTP/1.1 200 OK
Content-Type: application/octet-stream
Connection: Keep-Alive
Content-Length: 5

8.5web点灯功能实现下

led初始化

TCP服务器

lwip 之前的配置都在opt.h里面实现，当我们通过cube重新生成代码时，要使能
key-options -> ipv4 multicast 使能
general-> IGMP 使能
general-> DNS 使能

主页请求响应

怎么在C语言内存储网页

//两种方案
1、咱们有文件系统，直接读文件，写到socket里面可以
2、把网页变成一个完成的字符串

html 转 字符串
	https://www.html.cn/tool/html2js/

LED控制请求响应

Sercin

关注

22
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫