为了让自己的嵌入设备接入互联网，而且能互相通讯，用直接的TCP或者UDP协议肯定是不够的，在了解了目前物联网行业后，发现物联网常用的协议是mqtt协议（message queuing telemetry transport,消息队列遥测传输协议）。mqtt是一种基于发布/订阅模式的轻量级通讯协议，很适合用于物联网的技术场景。
然后就决定用mqtt协议作为通讯协议。
对于wifi模块，选择了nodemcu，这是一个非常有名的开源物联网平台，是基于lua语言开发的，我们能用它很快很简单的完成连接wifi，实现mqtt协议这些操作。某宝10块就能买一块。
参考github上的一个项目，其实大多数框架和工具都是用的一样的，传送门。基于该项目，我选择layui作为web的前端框架，主要用其中的UI样式来搭建网页前端。利用koa作为后端框架 ，主要用koa框架来监听加载静态资源。利用aedes 作为mqtt的消息服务器，aedes 是一个Stream-based MQTT broker（基于流的mqtt代理器），所以还要利用websocket-stream工具将消息流，从mqtt服务器传给http服务器。最后ui效果如下，车子可以将想传递的信息通过mqtt传出来。
这个难倒不难，但涉及到的知识面比较广，我从前也没碰过HTML，nodejs等网络相关的知识，所以就把所有的知识拆开来讲。今天先简单讲HTML相关的知识，以及怎么用layui前端框架快速做UI界面，大佬请绕行。
细节的我不讲，可以参考菜鸟教程HTML教程，和B站HTML速成。
我只讲一些小技巧和关键的知识。由于我经常切换语言，所以选用的是vscode编辑器，而不是其他的编辑器。电脑浏览器我用的google，手机的华为官方浏览器，其他的没有测试。
<!DOCTYPE>声明用做指示web浏览器使用那个HTML版本，对于HTML5<!DOCTYPE html>,对于HMTL其他版本，有其他的写法。<!DOCTYPE>是声明不是标签，且它必须位于HTML文档的第一行位于<html>标签之前。<html>标签，该标签定义了文档的开始点和结束点。HTML常见的文档结构是<!DOCTYPE>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
<html>还有一个常用的属性设置，例如<html lang='zh'>,lang属性表明了是中文网址还是英文网址，是给搜索引擎判断的，不影响html的内容，可以不设置。头部主要用来描述文档的一些通用属性，如编码方式，标题内容等，还可以插入全局的CSS文件和scripts脚本。所有的头部相关的内容都放在<head>和</head>之间。
<meta>标签，meta常用的有三个属性。
charset属性，用来规定编码方式，例如<meta charset="UTF-8">表明用utf-8编码，编码格式跟浏览器的设置有关，常用的是utf-8，如果出现乱码的情况，检查浏览器的编码方式，与其设置相同即可。name属性，配合content使用，例如<meta name="keywords" content="前端">，告诉搜索引擎，网页的关键字。例如，<meta name="viewport" content="width=device-width, initial-scale=1.0">,viewport是视口的意思，width=device-width是指视口宽度等于设备宽度，initial-scale=1.0表示初始状态不做缩放。这个属性在需要在移动设备访问的网站很重要。http-equiv属性，配合content使用，例如<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">,意思是如果安装了GCF（google chrome浏览器内嵌框架），则使用GCF渲染，如果没有GCF，则使用最高版本的IE内核渲染。例如<meta http-equiv="refresh" content="1">可以让浏览器每一秒刷新一次网页。<title>标签，用于指示网页名字，在浏览器的标签页上显示。<link>标签，用于定义文档和外部资源的关系，常用与链接CSS样式表。如下，链接了文件所在目录下的base.css文件和子目录下的layui.css文件,rel代表两者的关系，被链接文档是当前文档的样式表，href定义被链接文档的位置。<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="./base.css">
身体部分的内容，便是网页的主要内容了，所有的身体相关的内容都放在<body>和</body>之间。
<p></p>标签定义段落，<h1></h1>标签定义一级标题，标题标签最多有6个，只能使用<h1>~<h6>
<a></a>标签可定义锚（archor）,锚常用来做超链接，不同于<link>只能用在头部，<a>一般用在body部分，例如<a href="https://www.baidu.com/">百度主页</a>便可以点击百度主页调到百度的网址。<div></div>标签，常搭配class或id属性使用，对内容进行分区。<fieldset></fieldset>标签，当元素放入到fieldset标签内，浏览器用特殊的方式显示他们。例如这段代码，效果如下图，会生成一个方框。其中<legend></legend>中的内容是内嵌在方框上的标题。...
<body>
<fieldset>
<legend>
内容
</legend>
<p>121</p>
<p>212</p>
</fieldset>
</body>
...
<script></script>标签，script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。参考B站教程CSS速成和W3school教程CSS教程。
CSS的语法很简单，由选择器和声明块组成。如下图。
选择器有多种类型，这里只讲常用的三种，声明块类似于jason的键值语法。
p
{
margin-top: 5%;
text-align:right;
font-size: 2em;
}
.box
{
margin-top: 5%;
text-align:right;
font-size: 2em;
}
<div class="box">This is important!</div>
#mostImportant {color:red; background:yellow;}
<h1 id="mostImportant">This is important!</h1>
layui是一个中国社区维护的开源Web UI解决方案。Layui官网，下载解压后是一个不到1M的文件，使用也很方便，直接放到项目目录。如官方示例，只要在头部链接layui.css文件，在body部分，链接layui.js，便可以使用layui中的特性了。
<!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>
官网
layui的官方文档讲的很详细，使用起来也很方便，这里我就不多叙述了。
这里用了layui的栅格系统，让内容的显示，在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列。由于没有用到layui的js文件的一些效果，所以我没有引用layui.js文件。
base.css是我自定义的一个样式表，目的是保证每个块的格式相同。
mqtt.min.js是可以让我们在网页端使用mqtt协议的脚本文件
webclient.js是自定义脚本，用于使用mqtt协议，订阅topic，将topic中包含的内容显示在html界面上。
js文件的讲解会放在后面讲。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 该语句每一秒刷新网页 -->
<!-- <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°
</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='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/mqtt@4.2.8/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;
}