图解Esp32/ESP8266进行组网开发所需了解的那些小概念

图解日程生活中常见网络操作背后的小概念

前情提要

如下图所示，小明同学位于中国，他想要访问澳大利亚墨尔本大学的官网。他需要进行一系列的操作：

• 打开浏览器输入墨尔本大学网址"https://www.unimelb.edu.au"
  

• 点击键盘回车，浏览器跳转到墨尔本大学的主页。
  

过程中涉及的进行组网开发所需的小概念

• URL(UniformResourceLocator)：小明想要访问到墨尔本大学网站的第一步，是必须知道这个网站的网址"https://www.unimelb.edu.au"。这个网址就是URL的俗称，其全称为统一资源定位符。网址的格式如上表所示，其中<协议>://<域名或IP>是必需的，<端口>/<路径>有时可省略。如："https://www.unimelb.edu.au"就是省略了端口号和路径，省略端口号代表访问的是http协议的默认80端口，省略路径一般访问的就是网站文件目录下的index.html文件，类似默认配置一样。（这个大致了解下就好，后续我们自己动手编写代码的时候就能更清楚地了解啦 ）
  示例2：本机搭建服务器时经常用到的地址，其中127.0.0.1是默认的主机地址。8080则是自定义的通讯端口。因为不是采用的默认的80端口所以不能省略。访问的路径就是Hello.html。
  示例3：在这个LIVE MINI ESP32开发板教程系列（一）配置Arduino IDE环境支持ESP32模块实验中，ESP32模块中就建立了一个http服务器，其局域网内分配的IP地址为“192.168.3.79”，通过http协议使用默认80端口。路径/L中存放着熄灭板载灯的操作，

	协议	：//	域名/IP	端口	/路径
示例1	https	：//	www.unimelb.edu.au	使用默认80端口时可省略	访问主页时可省略
示例2	https	：//	127.0.0.1	:8080	/Hello.html
示例3	http	：//	192.168.3.79		/L

• IP地址：就像我们生活中为了能准确收到店家寄来的包裹。我们都要书写属于我们的可以识别的地址。这个地址包括国家，省份，城市，街道，门牌号等信息。为了准确访问到internet上的这些主机，他们也都被分配了一个这样的地址，称为IP地址。具体分为A、B、C、D、E、F五类。对每一类都有详细的规定。比如为啥我们家中常用的路由器都是192.168.x.x?这并不是一个巧合，这也是规定的，因为这是一个C类的地址。其掩码为255.255.255.0,具体解释可以参见下面这篇博客
  IP地址划分和子网划分

• 域名：IP地址毕竟是数字标识不方便大量记忆，因此我们给每个IP地址都配备唯一方便记忆的域名。目前域名已经成为互联网品牌、网上商标保护必备的要素之一，除了识别功能外，还有引导、宣传等作用。但其实这个域名是需要DNS服务商帮助进行翻译为IP地址后才进行访问的。
  如下图，打开电脑的cmd界面。输入“ping www.unimelb.edu.au”,就可以识别出这个域名对应的墨尔本大学主机的服务器IP地址为185.64.253.1
  
  还可以尝试Ping下我们常用的www.baidu.com。发现百度的IP地址为220.181.38.149
  
  接下来我们可以尝试用这个ip地址来访问百度试试，很显然我们也打开了百度的主页。
  
  经过这样的对比我们不难发现www.baidu.com这样的域名比220.181.38.149这样的数字IP地址方便记忆的多了。
  其实对于域名的命名也是有明确的规定的。比如中国常用的后缀就是.cn ，学校常用的后缀就是.edu(这也是为啥学生申请微软的学生免费软件时需要结尾的邮箱验证的原因）。域名的分类就非常严格。比如www.unimelb.edu.au中.edu就代表是学校类域名，.au则是澳大利亚的国家标识。
  详情可以参见百度百科https://baike.baidu.com/item/%E5%9F%9F%E5%90%8D

• www：万维网WWW是World Wide Web的简称，也称为Web、3W等。WWW是基于客户机/服务器方式的信息发现技术和超文本技术的综合。WWW服务器通过超文本标记语言(HTML)把信息组织成为图文并茂的超文本，利用链接从一个站点跳到另个站点。其实就是我们现在访问网页的时候在里面点击某个链接然后在不同页面进行跳转的效果。

• http协议：（这个部分贼重要,我们使用ESP系列模块组网的时候用到就是HTTP规定的post呀get呀之类的方法，我以前因为没有认真区分http1.1和http1.0两个版本协议的不同，在自己写的http客服端发送GET请求的时候被“/n/r/n/r”折腾的差点疯掉了。）我们自己进行组网通信的时候通常用这个协议传输数据。
  HTTP协议会话过程包括4个步骤。

1. 建立连接：客户端的浏览器向服务端发出建立连接的请求，服务端给出响应就可以建立连接了。
2. 发送请求：客户端按照协议的要求通过连接向服务端发送自己的请求。
3. 给出应答：服务端按照客户端的要求给出应答，把结果（HTML文件）返回给客户端。
4. 关闭连接：客户端接到应答后关闭连接
   （这里就就简单介绍下，接下来的实验会详细介绍这个协议的使用）
   推荐一本讲的特别好的书《图解http》【日】上野宣著

• https协议：HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS(SSL+HTTP）数据传输过程是加密的，安全性较好。现在基本上网站都是https协议了。比如我们访问墨尔本大学的时候，那个URL里的https://就表明了我们在访问主机的时候采用的就是https协议。
• ftp协议：文件传输协议是Internet中用于访问远程机器的一个协议，它使用户可以在本地机和远程机之间进行有关文件的操作。FTP协议允许传输任意文件并且允许文件具有所有权与访问权限。也就是说，通过FTP协议，可以与internet上的FTP服务器进行文件的上传或下载等动作。
• 端口：上面介绍了IP地址，可以知道，通过IP地址我们可以找到其对应的主机，但是就像我们去到一栋大楼，他总是会有不同楼层房间。可能财务室在203号房间，秘书室在501房间。如果没有进入正确的房间号，我们肯定是找不到想找的人，处理好想要处理的事情（传达室大爷肯定是不会管报账这类业务的）。其实主机也是这样。在做网络服务的时候针对不同的协议会分配不同的默认端口号（当然如果自己搭服务器，，这个端口号也可以自己定义。）
  常见协议端口号：

协议	端口号
HTTP	80
FTP	21
SSH	22
Telnet	23
SMTP	25
POP3	109
DNS	53
RPC	110

• HTML：小明打开墨尔本大学的网站后能看到一个非常精美的主页，这个主页文件是用HTML（标准通用标记语言下的一个应用）编写的，可在WWW上传输，能被浏览器识别显示的文本文件。其扩展名是.htm和.html。（我很早之前做过一段AS开发，亲历了html5给网页制作带来的惊人巨变~ 嗷嗷~ 很多ASer被迫转行，所以终身学习真的贼重要呀。别指望什么一劳永逸。。。不可能的哇）
• CSS：层叠样式表（Cascading Style Sheet，CSS）是构建网页的另一种“语言”，HTML语言用来搭建网页的基本结构。而CSS则用来解决结构的字体、颜色、大小等外观样式。
• JavaScript：JavaScript 是一种脚本，一门编程语言，其语法类似c语言，也有注释符号、循环、条件判断的指令，利用这些语法在网页上实现复杂的功能，使网页展现的不只是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。
  HTML&CSS&JavaScript三者配合完成了一个网页的基本开发。一般前端开发就是指这个部分
  JQuery：就像c语言里有库一样，javascript也有各种的库，通过对库的调用可以令JavaScript的使用变得简单。这其中比较有名的就是JQuery。其内置淡入淡出、滑上滑下等动画操作。提升了界面的视觉效果。其分为Development和Production两个版本。功能相同，只不过后者删除了代码注释、换行符和空白多余的字符，文件表较小。阅读源码就使用前者。实际使用就下载后者。后者的名字通常为“jquery-x.x.x.min.js”。他的名字当中会有一个min做为标识。
  Ajax：很早以前网页大多采用静态技术。碰上网页报名最崩溃的是填写了满满一页内容后，提交完提示你某一项不对需要重新提交，而之前填写的东西全都消失了。。。你需要再来一次。。导致用户体验特别不好。像四六级报名这种不报不行的还好。要是个购物网站新会员注册的时候发生这个事情，估计也就没啥新用户了。。。但是现在如果你回忆下网站的注册。一般是你写完名字后，页面就提示你名字重复了请换一个。咦？我明明没有主动刷新页面呀？他是怎么读到我页面的信息的呢？这个就Ajax技术。它可以实现在不重新加载页面的情况下，变换某个部分页面的显示内容。它其实时通过JavaScript加载数据，再不刷新网页的情况下，更新了网页内容。
  在ESP32模块内建HTTPServer时就可以使用html、css、jquery和ajax实现一个很有趣的页面
• internet：际标准的互联网写法是internet，字母i一定要小写。因特网是互联网的一种，它使用TCP/IP协议让不同的设备可以彼此通信。但使用TCPP协议的网络并不一定是因特网，一个局域网也可以使用TCP/P协议。判断自己是否接入因特网，首先是看自己电脑是否安装了TCPP协议，其次看是否拥有一个公网地址(所谓公网地址,就是所有私网地址以外的地址，可以查看IP地址解释部分,因为ipv4本身位数的限制导致国内公网ip特别紧张，所以我们家庭宽带一般都没有公网ip，没有公网ip就意味着别人没有办法直接找到你。就像你跟异地淘宝卖家说我家在花花小区201号她肯定是找不到你的。那么这时候如果想让很远的人能访问你的主机可以使用花生壳一类的代理来实现。这是另外一个故事，回头可以详细聊)。国际标准的因特网写法是 Internet，字母I一定要大写。
• Web客户端(Client): 小明想要访问的墨尔本大学网站地址是"https://www.unimelb.edu.au"。他就要在浏览器的地址栏输入这个网址后回车实现访问。这个用来输入地址并显示网页内容的浏览器其实可以粗暴的理解为客户端。在浏览器中回车其实意味着向墨尔本大学的主机发送了一个Get请求（详见HTTP协议）。然后通过主机发回来的响应数据显示在浏览器的页面里。
  
  
• Web服务器（Service）：小明访问的墨尔本大学的IP地址指向的主机就称为服务器。
• 前端开发：用于在客户端实现显示而进行的编程称为前端开发。前端开发主要职能就是把网站的界面更好地呈现给用户。
• 后端(后台)开发：那些看不见的用于实现用户网站操作的开发部分称为后端开发（哈哈 我自己总结的），其多和数据库和系统大家到。比如linux和mysql。搭建一些api给前端的开发人员调用啥的。

漫画展示

预告：一个基于ESP32和ESP8266模块组网的实列讲解

针对上面的介绍，搭建了一个ESP32和ESP8266作为STA接入家中路由器的局域网，其中ESP32作为httpServer，ESP8266作为HTTPClient进行http通信，HTTPClient发送GET请求到HTTPServer，HTTPServer对GET请求的内容进行处理并发送响应信息给HTTPClient。（已经调试完成了。。。等我写出来。。。哈哈哈）

参考资料

【1】百度百科www （万维网缩写）https://baike.baidu.com/item/www/109924?fromtitle=%E4%B8%87%E7%BB%B4%E7%BD%91&fromid=215515
【2】ip地址、域名、DNS、URL（即网址)的区别与联系https://blog.csdn.net/ParanoidYang/article/details/54288370