current position:Home>Use nodemcu and mqtt protocols to connect embedded devices to the Internet (a .layui front-end framework)

Use nodemcu and mqtt protocols to connect embedded devices to the Internet (a .layui front-end framework)

2022-09-23 07:22:48blots

前言

In order to allow their embedded devices to access the Internet,And can communicate with each other,Use directTCP或者UDP协议肯定是不够的,After understanding the current IoT industry,The protocols commonly used to find IoT aremqtt协议(message queuing telemetry transport,消息队列遥测传输协议).mqtt是一种基于发布/订阅模式的轻量级通讯协议,It is very suitable for technical scenarios of the Internet of Things.
然后就决定用mqtt协议作为通讯协议.
对于wifi模块,选择了nodemcu,This is a very well known open source IoT platform,是基于lua语言开发的,We can use it to connect quickly and easilywifi,实现mqttprotocol for these operations.某宝10You can buy a block.
参考github上的一个项目,In fact, most frameworks and tools are used the same,传送门.基于该项目,我选择layui作为web的前端框架,mainly use themUIstyle to build the front end of the web page.利用koa作为后端框架 ,主要用koaFramework to listen for loading static resources.利用aedes 作为mqtt的消息服务器,aedes 是一个Stream-based MQTT broker(基于流的mqtt代理器),So use itwebsocket-streamTools will message flow,从mqtt服务器传给http服务器.最后ui效果如下,The car can pass the information it wants to passmqtt传出来.
在这里插入图片描述
This is not difficult,But the knowledge involved is wider,I've never touched it beforeHTML,nodejsand other network-related knowledge,So let's take all the knowledge apart.今天先简单讲HTML相关的知识,以及怎么用layuiFront-end frameworks do it quicklyUI界面,大佬请绕行.

HTMLA brief summary of knowledge

I won't go into the details,可以参考菜鸟教程HTML教程,和B站HTML速成.
I only talk about some small tips and key knowledge.Since I often switch languages,所以选用的是vscode编辑器,rather than other editors.I use a computer browsergoogle,Huawei's official browser for mobile phones,其他的没有测试.

vscode快捷操作

  • Type an exclamation mark and press enter,可以快速生成html代码框架
    在这里插入图片描述
  • 输入 . Adding class names can quickly generate class labels
    在这里插入图片描述
  • Enter a tag name to quickly generate an end tag
    在这里插入图片描述
  • 注释快捷键 ctrl + /, Uncomment duplicatesctrl + /即可

HTML知识总结

HMTL结构

  • <!DOCTYPE>Statements are used as instructionswebThe browser uses thatHTML版本,对于HTML5<!DOCTYPE html>,对于HMTL其他版本,There are other spellings.
    <!DOCTYPE>is a statement not a label,and it must be locatedHTMLThe first line of the document is at<html>标签之前.
  • <html>标签,This tag defines the start and end points of the document.HTMLA common document structure is
    <!DOCTYPE>
    <html>
    	<head>
    	...
    	</head>
    	<body>
    	...
    	</body>
    </html>
    
    <html>There is also a common property setting,例如<html lang='zh'>,langThe attribute indicates whether it is a Chinese URL or an English URL,It's up to search engines,不影响html的内容,可以不设置.

头部

The header is mainly used to describe some common properties of the document,如编码方式,title content, etc,You can also insert global onesCSS文件和scripts脚本.All header related content is placed<head></head>之间.

  • <meta>标签,metaThere are three properties that are commonly used.
    • charset属性,Used to specify the encoding method,例如<meta charset="UTF-8">表明用utf-8编码,The encoding format is related to the browser settings,常用的是utf-8,如果出现乱码的情况,Check your browser's encoding,It is the same as its setting.
    • name属性,配合content使用,例如<meta name="keywords" content="前端">,告诉搜索引擎,网页的关键字.例如,<meta name="viewport" content="width=device-width, initial-scale=1.0">,viewportmeans viewport,width=device-widthmeans that the viewport width is equal to the device width,initial-scale=1.0Indicates that the initial state is not scaled.This property is important for websites that need to be accessed on mobile devices.
    • http-equiv属性,配合content使用,例如<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">,Means if installedGCF(google chromeBrowser iframe),则使用GCF渲染,如果没有GCF,则使用最高版本的IE内核渲染.例如<meta http-equiv="refresh" content="1">Allows the browser to refresh the web page every second.
      Just a few of the ones I'm currently using,For details, please refer to this blog postHTML meta标签总结与属性使用介绍
  • <title>标签,Used to indicate the web page name,Displayed on a browser tab.
  • <link>标签,Used to define the relationship between documents and external resources,Common and LinksCSS样式表.如下,Linked to the directory where the file is locatedbase.cssfiles and subdirectorieslayui.css文件,relrepresent the relationship between the two,被链接文档是当前文档的样式表,href定义被链接文档的位置.
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./base.css">
    

身体

The content of the body part,It is the main content of the page,All body related content is placed<body></body>之间.

  • <p></p>标签定义段落,<h1></h1>Labels define first-level headings,Title tags have at most6个,只能使用<h1>~<h6>
  • <a></a>标签可定义锚(archor),Anchors are often used for hyperlinks,不同于<link>Can only be used on the head,<a>一般用在body部分,例如<a href="https://www.baidu.com/">百度主页</a>You can click on the Baidu homepage to transfer to Baidu's website.
  • <div></div>标签,常搭配class或id属性使用,Partition content.
  • <fieldset></fieldset>标签,when the element is put infieldset标签内,Browsers display them in a special way.例如这段代码,效果如下图,A box will be generated.其中<legend></legend>The content in is the title inline on the box.
    ...
    <body>
    	<fieldset>
        	<legend>
            	内容
        	</legend>
        	<p>121</p>
        	<p>212</p>
    	</fieldset>
    </body>
    ...
    

在这里插入图片描述

  • <script></script>标签,script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件.

样式表CSS

参考B站教程CSS速成和W3school教程CSS教程.
CSS的语法很简单,由选择器和声明块组成.如下图.
在这里插入图片描述
There are many types of selectors,Only three commonly used ones are mentioned here,A declaration block is similar to jasonkey-value syntax.

  • 元素选择器,例如p,h1,h2,aThese are all element selectors.格式如下
p
{
    
	margin-top: 5%;
    text-align:right;
    font-size: 2em;
}
  • 类选择器,Classes are basically defined by themselves,使用方法如下
.box
{
    
	margin-top: 5%;
    text-align:right;
    font-size: 2em;
}
<div class="box">This is important!</div>
  • id选择器,id也是自己定义的,使用方法如下
#mostImportant {
    color:red; background:yellow;}
<h1 id="mostImportant">This is important!</h1>

layui介绍

layuiIt is an open source maintained by the Chinese communityWeb UI解决方案.Layui官网,After downloading and decompressing, it is less than one1M的文件,使用也很方便,directly into the project directory.如官方示例,Just link in the headerlayui.css文件,在body部分,链接layui.js,便可以使用layuifeatures in .

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用 layui</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
 
<!-- 你的 HTML 代码 -->
 
<script src="./layui/layui.js"></script>
<script> layui.use(['layer', 'form'], function(){
       var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); }); </script> 
</body>
</html>

官网
在这里插入图片描述
layuiThe official documentation is very detailed,使用起来也很方便,I won't go into detail here.

源码

这里用了layui的栅格系统,Let the content be displayed,在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列.由于没有用到layui的jsSome effects of the file,So I have no citationslayui.js文件.
base.cssIt's a stylesheet I customized,The goal is to guarantee that each chunk is of the same format.
mqtt.min.jsYes, we can use it on the webmqttProtocol script file
webclient.jsis a custom script,用于使用mqtt协议,订阅topic,将topicThe content contained in the html界面上.
jsThe explanation of the file will be discussed later.
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- This statement refreshes the web page every second -->
    <!-- <meta http-equiv="refresh" content="1"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./base.css">
    <title>index</title>
</head>


<body>

    <fieldset class="layui-elem-field">
        <legend>状态显示</legend>
        <div class="layui-container">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md3">
                    <div class="basebox" style="background-color: burlywood;">
                        <div class="layui-row">
                            <div class="layui-col-xs6">
                                <div class="title">
                                    油门踏板:
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="content" id='throttle'>
                                    0%
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="basebox" style="background-color: rgb(222, 135, 183);">
                        <div class="layui-row">
                            <div class="layui-col-xs6">
                                <div class="title">
                                    刹车踏板:
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="content" id='brake'>
                                    0%
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md3">
                    <div class="basebox" style="background-color: rgb(148, 135, 222);">
                        <div class="layui-row">
                            <div class="layui-col-xs7">
                                <div class="title">
                                    方向盘角度:
                                </div>
                            </div>
                            <div class="layui-col-xs5">
                                <div class="content" id='steer'>
                                    0&deg;
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md3">
                    <div class="basebox" style="background-color: rgb(222, 135, 183);">
                        <div class="layui-row">
                            <div class="layui-col-xs6">
                                <div class="title">
                                    wheel speed:
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="content" id='rotationspeed'>
                                    0rpm
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md3">
                    <div class="basebox" style="background-color: rgb(222, 135, 157);">
                        <div class="layui-row">
                            <div class="layui-col-xs6">
                                <div class="title">
                                    电量:
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="content" id='SOC'>
                                    0%
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </fieldset>
    <!-- <script src="./layui/layui.js"></script> -->

    <!-- <script src="https://unpkg.com/[email protected]/dist/mqtt.min.js"></script> -->
    <script src="./mqtt.min.js"></script>
    <script src="./webclient.js" charset="utf-8"></script>
</body>

</html>

base.css

.basebox
{
      
    height: 50px;
    margin-top: 1%;
    background-color:#ffffff;
    border-radius: 5px;
}
.title
{
    
    margin-top: 2%;
    text-align:left;
    font-size: 2em;
}
 .content
{
    
    margin-top: 5%;
    text-align:right;
    font-size: 2em;
} 

copyright notice
author[blots],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/266/202209230624076655.html

Random recommended