解决方案:搭建属于你的在线实时采集系统——HTML5 在嵌入式系统中的应用

　　解决方案:搭建属于你的在线实时采集系统——HTML5 在嵌入式系统中的应用

　　在当今的信息社会，信息就是金钱，所有的信息都必须是时效性的，过时的信息将没有价值。由此可见实时信息的重要性。

　　近年来，随着物联网在各行各业的快速发展，越来越多的终端设备接入网络，实现远程交互和控制；各种传感器的广泛分布使得数据节点的分布越来越多。而这些交互数据本身也是一种原创

信息。这些数据量需要我们采集

、分析、处理和反馈。数据的真实性、有效性、准确性和实时性保证了整个工作的效率、质量和价值。

　　在这里，我们实现了一个基于W5500的在线采集系统，并在其中引入了一个新鲜元素——HTML5。通过这种最新的Web语言，我们呈现了一个更加实时高效的在线实时采集系统。相信随着HTML5在嵌入式领域的不断深入推广，必将对产业效率和价值的提升产生重大影响。

　　在详细介绍这个实时采集系统之前，我们先简单了解一下HTML5。

　　HTML5和HTML的区别

　　HTML 是一种标记语言，旨在创建可在网络浏览器中呈现的网页。

　　HTML5 是 HTML 的下一个修订版本。从广义上讲，HTML5 包括一组新的和增强的 HTML、CSS3、JavaScript API 和事件的技术组合。

　　图 1HTML5 标志

　　以下是 HTML5 相对于 HTML 新增和增强的主要特性：

　　画布 API 和 Web 套接字 API

　　事实上，在线实时采集系统的实现得益于HTML5中新增的两个API函数：Canvas和WebSocket。

　　Canvas，由Apple于2004年为MAC OS X仪表盘开发的像素绘图元素发展而来。由一个Canvas元素和对应的JavaScript组成。它使开发者无需借助其他第三方插件，即可使用JavaScript的Canvas图形工具在Canvas元素画板上动态绘制图形。

　　Websocket，提供了一个直接与服务器通信的Socket。通信建立后，客户端（浏览器）可以实现与Web服务器的双向通信，而不需要客户端频繁轮询服务器。这样可以减少Http请求的开销，减轻数据包的负担，让通信更加实时。

　　通过这两个API函数的灵活应用，我们实现了通过HTTP Server实时接收数据量并在网页上动态模拟的功能。

　　在线实时采集系统演示

　　系统环境

　　a) MCU：STM32F103RC，256K字节的Flash，48K字节的SRAM，2K字节的EEPROM

　　b) 以太网控制器：W5500，SPI接口连接单片机

　　c) 电源：USB供电

　　2.开发工具：IAR for ARM v5.41，就是我们项目中使用的版本。如果你使用不同版本的IAR，请对STM的库稍做调整。

　　在看代码之前，我们先看一下整个程序流程，如下图所示。硬件初始化完成后，进行网络参数配置。这是根据自己网络的情况配置W5500的IP地址等网络参数，保证W5500可以上网；在这个程序中，我们将使用W5500的两个socket资源。一个是用来创建一个Http Server，这样我们就可以通过在浏览器上输入配置的IP地址来远程访问我们的硬件；另一个是用来创建一个Web Socket Server，与网页建立通信链接，用来传输我们的温湿度数据。

　　图2 硬件运行流程

　　当我们在浏览器上访问硬件的IP地址时，它会向W5500发送一个http请求。W5500收到请求后，会将html5网页信息发送给浏览器，以便浏览器显示我们温湿度检测系统的主要信息。界面没了 在网页的代码中，浏览器会主动连接W5500的Web Socket Server，握手操作完成后，建立数据通信通道。这样硬件就可以毫无障碍地将温湿度数据发送给浏览器了。浏览器收到温湿度数据后，使用canvas函数在指定位置绘制温湿度指示的点和曲线。

　　图3 网页显示界面

　　画布和 Web 套接字

　　在浏览器端，我们使用 HTML5 的 Canvas 绘图工具和 WebSocket API 来构建我们的 Web 界面。当有新的温湿度数据到来时，画布坐标系中会有点显示，并标出编号，随着采集次数的增加，可以进行多次数据连接，看曲线变化。网页程序步骤如下：

　　1）创建页面和画布所属的style和body标签

　　2）绘制坐标轴，添加标题；建立 WebSocket 连接

　　3）新数据到达，画点画线

　　用画布绘图

　　下面首先介绍如何创建画布以及代码中使用的绘图函数。

　　1）创建一个600×400的画布，单位为像素

　　'图'width='600'height='400'>

　　2) 定义画布的边框宽度、颜色和填充大小。

　　#图表{

　　边框：1px 实心#03F；

　　边距：0 40px 0 80px；

　　}

　　3）JavaScript要绘制画布，首先需要通过目标画布的id获取绘制环境。代码需要通过id获取canvas元素，然后使用该元素的getContext方法获取其二维绘图环境的引用

　　canvas=document.getElementById('图形');

　　

" />

　　context=canvas.getContext('2d');

　　4）画线段

　　context.lineWidth=2;//设置线宽

　　context.strokeStyle='#999';//设置线条的颜色

　　context.moveTo(x1,y1);//移动到起点

　　context.lineTo(x2,y2);//创建一条到终点的路径

　　context.stroke();//实际画这条直线

　　5）画圆

　　context.fillStyle='#000';//设置填充颜色

　　context.beginPath();

　　context.arc(x,y,2,0,Math.PI*2,true);//在坐标(x,y)处画一个半径为2的圆

　　语境。关闭路径（）；

　　context.fill();//给圆圈填充颜色

　　6）在指定位置写入标题文字

　　context.fillText(text,x,y,maxWidth);

　　结合上面的函数，画出下图。如果觉得这还不够炫，html5 canvas还提供了渐变色、旋转、插画等功能。使用您的设计制作您自己的前端界面。

　　图 4 画布示例图

　　WebSocket的使用接下来我们介绍一下WebSocket在html5中的使用及相关功能

　　1）为了创建websocket连接，代码需要创建一个WebSocket接口实例，传入web服务的URL地址，sensorWebSocket对象会尝试连接*敏*感*词*相应URL的服务

　　varwsUri='ws:192.168.10.111:1818';

　　sensorWebSocket=newWebSocket(wsUri);

　　2）注册事件，为事件链接相应的处理函数。比如浏览器页面收到服务器的数据后，触发onmessage事件，然后调用onMessage函数。在代码中，我们注册了四个事件：onopen、onmessage、onclose和onerror

　　sensorWebSocket.onmessage=函数（evt）{onMessage（evt）}；

　　3）消息处理函数。在硬件上，我们将采集到的温湿度数据用'.'连接起来。在浏览器端，接收到数据后，使用字符串切分函数，将温湿度数据进行切分，存储在一个数组对象中。下面的代码是将指示转换成坐标值显示在画布上，这里就不赘述了。

　　functiononMessage(evt){

　　vararrayTH = 新数组（2）；

　　arrayTH=evt.data.split('.');

　　...

　　}

　　4）主动关闭websocket连接

　　传感器网络套接字。关（）;

　　怎么样，websocket的使用很简单。使用这个强大的工具，您可以连接到远程服务器并接收和发送消息。这个功能在双向通信中非常有用，尤其是需要服务端主动向浏览器页面发送消息的时候。

　　Web Socket 握手和数据帧

　　在服务端创建好socket之后，首先要和客户端进行数据通信才能完成握手，那么在列出程序的时候如何实现这个握手呢，先看看握手过程：

　　表1 握手过程

　　上面已经介绍了客户端的代码，下面是硬件中服务器1和2的代码：

　　#define WS_SERVER_PORT 1818//定义服务器*敏*感*词*的端口号

　　socket(s,Sn_MR_TCP, WS_SERVER_PORT,0x20);//在W5500中建立socket连接

　　listen(s);//开启*敏*感*词* s变量为W5500的socket序号，本例程中使用的是数字2

　　下面是为W5500配置的网络信息，其中IP地址为我们浏览器页面程序的websocket对象的*敏*感*词*地址。

　　uint8 mac[6]={0x00,0x08,0xdc,0x11,0x11,0x11};

　　

" />

　　uint8 嘴唇[4]={192,168,10,111};

　　uint8 sub[4]={255,255,255,0};

　　uint8gw[4]={192,168,10,1};

　　设置SHAR（mac）；

　　设置SUBR（子）；

　　设置GAR（gw）；

　　设置SIPR（嘴唇）；

　　硬件中server 5、6、7进程相关代码：

　　charsec_ws_key[32]={0x00,};

　　characcept_key[32]={0x00,};

　　//获取Sec-WebSocket-Key:

　　if(strstr((charconst*)wsRxBuf,"Sec-WebSocket-Key:"))

　　{

　　mid((char*)wsRxBuf,"Sec-WebSocket-Key: ","\r\n",sec_ws_key);//拦截sec_key

　　calc_accept_key(sec_ws_key, accept_key);//编码函数

　　sprintf((char*)wsTxBuf, "HTTP/1.1 101 SwitchingProtocols\r\nUpgrade: WebSocket\r\nConnection:Upgrade\r\nSec-WebSocket-Accept: %s\r\n\r\n", accept_key); // 生成握手消息

　　send(s,wsTxBuf,strlen((char*)wsTxBuf));//发送给客户端

　　}

　　握手=1；

　　这似乎有点抽象。让我们看看实际的数据包。最上面的红色字体是浏览器页面的握手请求。Sec-websoket-Key之后就是我们截取的sec_key，后面的蓝色字体就是服务器端的握手响应。，sec-websoket-Accept就是我们编码好的accept_key，怎么样，一目了然。

　　图5 握手过程捕获信息

　　握手成功后，可以将定时采集的温湿度数据发送到硬件端的浏览器页面。WebSocket 协议的数据包非常轻量。下面介绍数据包的帧格式：

　　图 6 WebSocket 数据帧格式

　　上图是官方的*敏*感*词*，第一个字节，第一位是FIN，后三位是RSV1到3。RSV是保留空间，用0填充，那么只需要前4位的第一个FIN要设置。接下来的四位存储操作码的值，它定义了有效载荷数据的解释。FIN 用于指示消息的最后一个片段。如果只有一条消息，则FIN为1；这里我们使用opcode定义数据为text-0x1，所以第一个字的二进制是1000001（0x81），第一个1是FIN值，最后一个1是opcode的值。

　　然后是第二个字节的数据，由1位的MASK和7位的PayloadLen组成。MASK标识本数据帧的数据是否使用掩码，PayloadLen表示数据部分的长度。但是，PayloadLen 只有 7 位。如果换成无符号整数，它只有0到127之间的值。当然，这么小的值不能描述更大的数据。所以规定当数据长度小于等于125时，作为数据长度的描述。，如果值为126，则接下来的两个字节用于存放数据长度，如果为127，则接下来的八个字节用于存放数据长度。这里我们每次只发送5个字节的温湿度数据，没有使用掩码，所以配置为0x05。

　　然后就是上图中的MaskingKey，它占用四个字节，存放mask的entity部分。但是这个数据只有在前面的MASK设置为1的时候才有，否则不使用mask就没有这个数据了。最后是数据部分。如果掩码存在，则所有数据都需要与掩码进行异或。如果没有掩码，那么可以直接使用下面的数据。

　　看看我们的数据发送代码是如何实现的：

　　wsTxBuf[0]=0x81;

　　wsTxBuf[1]=0x05;

　　wsTxBuf[2]= 温度/10+0x30；

　　wsTxBuf[3]= 温度+0x30；

　　wsTxBuf[1]=0x2E;//分隔符'.'

　　wsTxBuf[2]=Humi/10+0x30;

　　wsTxBuf[3]= Humi+0x30;

　　发送(s,wsTxBuf,strlen((char*)wsTxBuf));

　　代码是不是很简单！

　　数据采集

　　然后简要描述数据采集

过程。我们选用温湿度传感器DHT11实时采集并上传室内温湿度数据。这里，DHT11用于连接MCU（W5500）。它与MCU的通讯只需要一个I/O口，使用非常方便。DHT11与单片机的具体连接及相关调试这里不再详述。可以搜索相关信息。

　　相信随着HTML5的不断成熟，它带来的不仅仅是PC环境的Web革命。对于嵌入式领域，也能带来更好的客户体验和产品性能。当然，我们还是要用到W5500这个特色以太网芯片。其全硬件的TCP/IP协议栈不仅大大节省了宝贵的嵌入式资源，也省去了很多开发步骤和难度，使我们可以用更多的资源和精力来实现更精彩的Web功能。

　　如果你感兴趣，赶快做一个属于你的在线实时采集系统吧。

　　请到#p2527 下载完整的程序代码程序。

　　解决方案:如何高效的上架商品，采集产品到独立站

　　如何快速采集产品到独立站？

　　独立跨境电商网站收货后快速上架的情况很常见，可以为卖家节省大量的时间和精力。

　　有了采集工具，每天有上千种产品并不难。当然现在的独立站已经不是分发的时代了，讲究的是精细分发。

　　在shopyy独立站后台应用中心，应用商店，搜集，可以看到建站系统为卖家提供的免费采集

工具。

　　支持：采集Shopify、亚马逊、阿里巴巴、1688、速卖通等主流平台的商品数据。

　　推荐使用场景： 注意事项：

　　教程：

　　首先，如果你没有安装谷歌浏览器，你必须先安装一个。

　　应用中心，我的应用，设置，点击下载插件，顺便复制api链接

　　

" />

　　然后打开浏览器，点击如图所示的插件，如果没有开启开发者模式，点击开启，加载解压后的安装包或者拖放到这个页面。

　　然后可以看到一个优采云

抓图工具插件，把它固定到工具栏上。

　　点击店铺图标，店铺管理，给店铺一个code，方便识别，

　　一键粘贴并确认。

　　前后可以打开跨境电商平台，开始选择商品收货到独立站。

　　已成功采集

的商品可以在后台的商品管理中看到，在已下架的商品中可以看到。如果采集的产品再次采集，会提示重复采集。

　　

" />

　　使用产品批量修改工具，可以在申请中心修改多个产品的价格，实现批量上架。

　　补充：除了平台之外，我们经常会遇到一些其他的独立站想要收货。可以使用这个第三方工具采集导出shopify格式，然后在后台应用中心选择shopify导入。

　　shopcaiji采集工具还是很强大的，支持主流的saas建站和开源系统。拥有如此万能的采集工具，将大大提高尚品的效率。

　　shopcaiji是一个支持采集

的建站平台

　　SAAS模式建站：shopify、oemsas、shopyy、shoplazza、shopline、xshopy、shopbase、wshop、

　　开源自建站：wordpress、opencart、magento

　　基本涵盖市面上所有主流建站平台，还支持单品采集、全目录采集、全站采集，可根据您的需求灵活配置。

　　有免费版和付费版可供选择。支持免费试用，满意后再开通。允许会员在同一个公网IP下以多个用户登录，即一个公司同一个IP。您只需购买一个即可供整个公司使用。

　　采集工具官网：