8.物联网LWIP之使用web点亮led灯

这篇具有很好参考价值的文章主要介绍了8.物联网LWIP之使用web点亮led灯。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一。HTTP详解

1.超文本:(HyperText)

(1)超文本文件彼此链接,形成网状(web),内含有超链接(Link)与各种媒体元素标记(Markup)。

(2)超文本文件彼此链接使用URL表示。(下面解释URL)

(3)常见超文本格式是超文本标记语言HTML。(下面解释HTML,代码)

综上:学习超文本需要了解超链接,超文本标记语言

2.URL

(1)URL称为统一资源定位符Uniform Resource Locator,唯一标识万维网的某个文档。

(2)URL组成:协议+(主机+端口)+文件名

8.物联网LWIP之使用web点亮led灯,物联网

 3.HTTP

(1)工作原理

        在我看来就是建立TCP连接,客户机发送请求文档,服务器端发送响应文档。三次握手四次挥手。

(2)请求报文与响应报文(字段为ASCLL码, CRLF为回车)

8.物联网LWIP之使用web点亮led灯,物联网

8.物联网LWIP之使用web点亮led灯,物联网

 (3)请求方法

1.GET:请求读取一个Web页面

2.POST:附加一个命名资源(如Web页面)

3.DELETE:删除Web页面

4.CONNECT:用于代理服务器

5.HEAD:请求读取一个Web页面的首部

6.PUT:请求存储一个Web页面

7.TRACE:用于测试,要求服务器送回收到的请求

8.OPTION:查询特定选项

二。实验:初步使用Web超文本标记语音html

1.实验1:html

    复制下面代码到一个文件夹下,后缀改为 .html,双击打开。

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

代码解答:

        1.大框架,<HTML> 内容 </HTML>

        2.头名称,<HEAD> 内容 </HEAD>

                <TITLE>欢迎进入 HTML 世界</TITLE>

                8.物联网LWIP之使用web点亮led灯,物联网

        3.页面内容,<BODY> 内容 </BODY>

                <P>这会是一种很有趣的体验</P>

                 8.物联网LWIP之使用web点亮led灯,物联网

                      

结果:

8.物联网LWIP之使用web点亮led灯,物联网

2.实验2:引入CSS 

(1)CSS作用:样式修改

(2)步骤:

创建一个文件夹,后缀名为 .html

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

代码解答:

        1.style样式:中间写对<BODY>中的样式处理

        2.样式中的p{}对应<BODY>中的<p>,即style中对<p></p>中数据进行样式处理

3.实验:引入javascript

(1)javascript介绍

1.javascript是互联网上最流行的脚本语言,可以用于HTML和web。

2.具体的功能包括:

  • 直接写入 HTML 输出流

  • 对事件的反应

  • 改变 HTML 内容

  • 改变 HTML 图像

  • 改变 HTML 样式

  • 验证输入

(2)步骤:

<HTML>
	<HEAD>
		<TITLE>欢迎进入 HTML 世界</TITLE>
		<script type = "text/javascript">
		var arr = new Array();
		arr[0] = "1.jpg";
		arr[1] = "2.jpg";
		arr[2] = "3.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 = "1.jpg"/>
	</BODY>
</HTML>

解释:

        1.<script type = "text/javascript"> 内容 </script>中是写HTML的动作

        2.setInterval(changeImg,1000);//使用函数,1秒运行一次
           function changeImg(){}//函数具体实现

        3.<img id = "obj" src = "1.jpg"/>命名图片的id,初始化一个属性为“src”,在javaScript中使用可以对其进行修改,这样就可以改变HTML的动作。

使用代码步骤

1.在桌面下创建

8.物联网LWIP之使用web点亮led灯,物联网

2.点击hello.html

8.物联网LWIP之使用web点亮led灯,物联网

会自己改变图片。

 三。实验三:ajax技术

1.ajax作用

        ajax主要是为了与服务器交换数据,更新部分页面内容。

2.ajax使用

(1)创建XMLHttpRequest

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

(2)向服务器发送请求

<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");

        上述GET与POST都是需要先open打开,其次send发送数据。

<异步true>

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

        xmlhttp.onreadystatechange=function()相当于C语言的回调函数,所以使用异步true可以像C语言中断回调一样,不需要堵塞程序。

<同步false>

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

        同步会堵塞程序,即没有连接成功会一直在等待连接,效率差。

3.html实现

(1)基础实现

<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>

1.使用方法        

        复制到 .html文件中,直接运行。

2.解释

        (1)<script></script>中写函数

        (2)onclick表示按键,按下后调用script中的函数。

3.详细解释

8.物联网LWIP之使用web点亮led灯,物联网

(2)交互功能实现

<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.物联网LWIP之使用web点亮led灯,物联网

        (1)复制到.html中

        (2)打开EasyWebServer,设置主目录为桌面,端口号80

8.物联网LWIP之使用web点亮led灯,物联网

        (3)在浏览器中输入127.0.0.1/hello.html

8.物联网LWIP之使用web点亮led灯,物联网

四。最终实验:web点亮stm32的led灯

1.cubemx创建工程

 (0)串口,时钟,Freertos都配置完成

  (1)配置灯led6,初始化为高电平(不亮)

8.物联网LWIP之使用web点亮led灯,物联网

 (2)LWIP配置

使能DNS

8.物联网LWIP之使用web点亮led灯,物联网

 使能muticast

8.物联网LWIP之使用web点亮led灯,物联网

 使能IGMP 

8.物联网LWIP之使用web点亮led灯,物联网

2.步骤:

(1)修改端口号为80

(2)http_server.h

#ifndef _HTTP_SERVER_H
#define _HTTP_SERVER_H

void vHttpServerTask(void);

#endif

(3)http_server.c

#include "socket_tcp_server.h"
#include "socket_wrap.h"
#include "ctype.h"
#include "http_server.h"
#include "string.h"

static char ReadBuff[BUFF_SIZE];
char SendBuff[128];
char *HtmlPage = 
"<html>"
"<head>"
"<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />"
"<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>";

void HttpParResponse(int cfd, char *Buff)
{
	//是否为请求主页
	if(strstr(Buff, "GET / HTTP/1.1") != NULL){
		
		//响应头
		sprintf(SendBuff, "HTTP/1.1 200 OK\r\n");
		Write(cfd, SendBuff, strlen(SendBuff));
		//响应首部
		sprintf(SendBuff, "Content-Type: text/html\r\n");
		Write(cfd, SendBuff, strlen(SendBuff));
		sprintf(SendBuff, "Connection: Keep-Alive\r\n");
		Write(cfd, SendBuff, strlen(SendBuff));
		sprintf(SendBuff, "Content-Length: %d\r\n", strlen(HtmlPage));
		Write(cfd, SendBuff, strlen(SendBuff));
		sprintf(SendBuff, "\r\n");
		Write(cfd, SendBuff, strlen(SendBuff));
		//响应主题
		Write(cfd, HtmlPage, strlen(HtmlPage));
	
	//是否为 打开led
	}else if(strstr(Buff, "GET /on HTTP/1.1") != NULL){
		Write(cfd, "red", strlen("red"));
		HAL_GPIO_WritePin(D6_GPIO_Port, D6_Pin, GPIO_PIN_RESET);
	//是否为 关闭led
	}else if(strstr(Buff, "GET /off HTTP/1.1") != NULL){
		Write(cfd, "white", strlen("white"));
		HAL_GPIO_WritePin(D6_GPIO_Port, D6_Pin, GPIO_PIN_SET);
	//请求资源无效, 就是404
	}else{
		printf("GET Method Error\r\n");
		close(cfd);
	
	
	}
	



}


/**
  * @brief  http 服务器任务
  * @param  None
  * @retval None
  */
void vHttpServerTask(void){

	int 	 sfd, cfd, n;
	struct sockaddr_in server_addr, client_addr;
	socklen_t	client_addr_len;

	
	
	//创建socket
	sfd = Socket(AF_INET, SOCK_STREAM, 0);
	server_addr.sin_family 			= AF_INET;
	server_addr.sin_port   			= htons(SERVER_PORT);
	server_addr.sin_addr.s_addr = htonl(INADDR_ANY);
	//绑定socket
	Bind(sfd, (struct sockaddr *)&server_addr, sizeof(server_addr));
	//监听socket
	Listen(sfd, 5);
	//等待客户端连接
	client_addr_len = sizeof(client_addr);
again:
	cfd = Accept(sfd, (struct sockaddr *)&client_addr, &client_addr_len);
	printf("client is connect cfd = %d\r\n",cfd);
	while(1){
		//等待客户端发送数据
		n = Read(cfd, ReadBuff, BUFF_SIZE);
		if(n <= 0){
			goto again;
		}
		//解析响应http协议
		HttpParResponse(cfd, ReadBuff);
		//http响应后要关闭fd
		close(cfd);
		goto again;
	}
}

4.结果

stm32为服务器,所以输入stm32的IP地址192.168.1.10,stm32的灯会被按钮控制。

8.物联网LWIP之使用web点亮led灯,物联网文章来源地址https://www.toymoban.com/news/detail-678927.html

到了这里,关于8.物联网LWIP之使用web点亮led灯的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【STM32】STM32CubeMX教程一--基本使用(新建工程点亮LED灯)

    前言 在配置好CubeMX之后,就是新建工程的开始了,那么首先我们需要一些准备,本片博客我们会很详细的介绍STM32CubeMX的基本使用和如何创建一个新的工程并且点亮LED灯 在新建工程时,我们分为了具体流程1~7,如果您不想看每部分的讲解,直接按照流程操作即可,5分钟即可

    2024年02月09日
    浏览(51)
  • STM32F103ZET6 GPIO工作模式介绍+使用寄存器点亮第一个LED灯

    目录  GPIO的工作模式介绍 1.输入模式(模拟、上拉、下拉、浮空) 2.输出模式(推挽/开漏) 3.复用功能(推挽/开漏) 4.模拟输入输出(上下拉无影响) 如何使用寄存器点亮第一个LED灯         在输入模式时,施密特触发器打开,输出被禁止。可通过输入数据寄存器 GPIOx_

    2024年02月06日
    浏览(71)
  • 【74HC595】51单片机(普中A2开发板)LED点阵屏点亮以及74HC595芯片的使用笔记

    纯小白写的文章,如有问题,欢迎评论区讨论,反驳,指正。 如果你只想了解74HC595如何使用,建议只看2.3。 通过查看普中A2开发板的原理图(图1)可以知道,通过P0(P0_0、P0_1…P0_7)口和DPa、DPb…DPh来控制哪一颗LED点亮。我这个开发板上的点阵模块没有按照他给的原理图上

    2024年02月05日
    浏览(86)
  • 学习笔记|LED点亮原理|STC32G单片机视频开发教程(冲哥)|第四集-下:点亮LED

    新建工程时待选择的Device:如 STC32G12K128 Seies,需要先在下拉菜单中选择“STC MCU Database”,然后可以选择STC32G12K128 Seies了。 当前以上节课的代码为基础,经过精简后的代码(裸板未添加任何头文件): 需手工下载至开发板(屠龙刀三.1版)。 当前已实现功能:点亮P2^1端口的板

    2024年02月13日
    浏览(55)
  • 【ESP32DEVKITV1学习笔记】WiFi连接网络点亮一盏LED灯|手机APP点亮LED

    拖延症间歇性康复,让我把这个笔记再补充一下下:使用手机APP控制LED的亮灭。 需要注意:本文章仅演示手机APP控制LED亮灭的简单功能,所以使用的是板载的LED,有更多需求的朋友可以根据自己的实际情况来修改例程,以满足自己具体需求。 用户可通过手机APP对LED的亮灭进

    2024年02月09日
    浏览(61)
  • FPGA——点亮led灯

    quartus18.1 vscode Cyclone IV开发板 每间隔1S实现led灯的亮灭,实现流水灯的效果。 3.1 编写verliog程序 3.2 引脚配置 4.1 仿真代码 4.2仿真结果 本次实验主要是学习verilog的基础语法,掌握计数器的编写以及时序逻辑的设计方法。另外在进行仿真的时候需要修改计数器的大小,因为我们

    2024年02月16日
    浏览(45)
  • 点亮第一个LED灯

    单向导电性,3mA-20mA之间。 怎么判断阴阳极。直插式:长的是阳极,短的是阴极。 贴片式 无箭头彩色的是阳极。 阳极为高电平,阴极为低电平,电流才能过来。两端都是高电平,电流流不过来,为什么? 让LED发光即对应的阴极管脚应该为低电平,若为高电平则熄灭。 sfr

    2023年04月27日
    浏览(29)
  • 点亮一颗LED灯

    TOC LED0 LED1 Periph ---------Peripherals—[pəˈrɪfərəlz]— 外设 Hardware中添加LED.C和LED.h文件 LED.h文件中,添加一段 防止头文件重复 的代码 LED.h 注意最后一行空 LED.c LED.C 文件中,右键添加“stm32f10x.h”头文件

    2024年02月12日
    浏览(33)
  • ARM--LED灯点亮

     LED1,LED2,LED3亮灯      

    2024年02月15日
    浏览(38)
  • 江科协STM32教程——STM32 使用串口助手进行LED灯的点亮熄灭灭控制全代码过程(USART串口通信的简单应用)

            使用USART串口通信,通过上位机串口助手发送符串给STM32执行LED灯点亮熄灭操作的流程。         基本的配置如下所示,GPIO口配置的为PA9推挽输出,用于LED灯的操作。其余注意USART_ITConfig和USART_Cmd开启USART接收中断和使能USART运行。         接下来要进行发送字

    2024年03月21日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包