使用开源物联网服务IOT-Tree Server提取网页中的数据（类似爬虫但精确定位和提取数据）

IOT-Tree Server是一个可以独立运行，对现场各种传感器控制器等设备进行统一接入，并提供统一的数据管理和内置的监控画面支持等。可以用在工业、智能家居等现场控制。

在最近的0.97.0版本，我发现新增了HTTP Url方式提取HTML页面内容的功能，这样可以使得互联网中的网页数据也可以作为输入来源参与到总体监控中了。

参考文档以访问气象网站为例子。很关键的一点是此气象网站的页面源文件内容只有Javascript代码，页面通过JS方式运行渲染输出，而IOT-Tree Server提供的页面装载可以支持JS运行之后的页面内容输出，这样就可以支持绝大多数网页数据的提取了。

相关文档说明你可以参考github上的链接：

iot-tree/msg_http_url_html.md at main · bambooww/iot-tree · GitHubhttps://github.com/bambooww/iot-tree/blob/main/web/doc/cn/doc/conn/msg_http_url_html.md有了这个新功能，看来可以为我的日常监控屏幕新增天气预报信息了。

1 寻找数据源

查找国内气象网站，我发现如下链接：

【北京天气】北京天气预报,蓝天,蓝天预报,雾霾,雾霾消散,天气预报一周,天气预报15天查询北京天气预报，及时准确发布中央气象台天气信息，便捷查询北京今日天气，北京周末天气，北京一周天气预报，北京蓝天预报，北京天气预报，北京40日天气预报，还提供北京的生活指数、健康指数、交通指数、旅游指数，及时发布北京气象预警信号、各类气象资讯。http://www.weather.com.cn/html/weather/101010100.shtml里面的预报区域内容如下：

很明显，我们需要定位页面中的预报内容区域，并提取里面的温度和天气信息。 

先使用chrome浏览器访问页面，并鼠标右键查看页面源代码，搜索“（今天）”，就可以发现页面源文件里面直接有我们需要提取的信息。

2 在家居监控项目中新增气象数据接入

在我家的微型控制器中，已经运行了IOT-Tree Server，并且已经能够监控室内灯光以及一些传感器接入等。我在此项目基础之上，添加http url的网页聚合上面找到的链接，并提取数据。

我的控制器通过网线在家庭内网，访问设备管理地址http://192.168.0.175:9090/admin/ 用户验证登陆之后，就可以在线修改我的家具监控项目了。http://192.168.0.175:9090/admin/用户验证登陆之后，就可以在线修改我的家具监控项目了。

在项目中，点击左上角Connectors菜单，选择HTTP Url，填写如下内容：

 点击“Ok“之后，在新出现的Web条目下面，鼠标右键,选择”Add Connection"，在弹出窗口填写如下内容：

 其中，更新间隔(Update interval)填写了1800000毫秒，也就半小时。还有Run Page JS没有勾选，是因为我们url对应的页面已经有需要提取的内容，不需要运行js脚本。（如果你要提取的页面需要运行js，那么请勾选上，勾选此项会在每次访问页面时需要的时间比较长）。

点击OK保存，确保对应的链接条目出现。然后鼠标右键此项，选择Edit，你会发现弹出的编辑窗口多了Read to Buffer内容。

 点击Read按钮，等待一会儿，就会发现读取成功的时间出现。此时，我们可以点击“Data Probe”按钮进行页面分析设置了。

这里先引用一段说明文档的一段文字，用来说明IOT-Tree Server页面定位和数据提取方法：

 1 HTML页面数据提取机制
IOT-Tree Server提供的html页面数据提取分两部分进行。一是数据块跟踪和定位、二是块内数据提取。

第一步数据块跟踪和定位，是为了能够适应页面的变化而使用的定位方法。通过分析大部分网页会发现，我们关心的数据一般都在特定的页面区块里面，并且由于页面每天都可能在变化，区块的位置整体也不是很稳定，但对应的区块内部内容相对稳定。所以，如果我们能够排除页面变化的干扰，第一步先定位对应的内容区块，则可以大大提升成功的概率，并且排除很大一部分干扰。

在区块内部，如果网页提供方不做相关内容版本升级的话，内部数据结构就比较稳定。所以，在定位到区块之后，内部的具体数据，可以基于此区块进行精确定位获取。

当然，考虑到被提取页面区块发生变化时（如有大的版本升级），以上的两步都会失效，那么如何快速有效的进行发现，并迅速调整定位参数就显得很重要。因此，我们提供了简单方便的页面分析和可视化定位配置工具，能够在极短的时间进行重新设定。

当前，有很多网站提供的页面内容都通过ajax动态获取，并通过js脚本进行渲染输出，此时我们无法通过URL直接获取页面的原始内容进行提取，需要对页面进行装载计算之后输出相关的html内容，此过程需要的计算时间比较长，我们通过读取并本地文件缓存的方式进行后续的数据分析。

1.1 页面内容区块跟踪定位
IOT-Tree Server使用非常简单的文本关键字,来进行页面内部跟踪定位，一般一个内容区块也就1到2个关键字即可。解析引擎根据输入的几个关键字，自动扫描定位html的树状内容结构，找到距离最近的包含这几个关键字的共同父节点。以此父节点为基础，可视化配置工具可以预览展示出内部内容。如果发现区块太小没有覆盖我们关注的数据，则还可以根据需要寻找上一级或多级父节点作为定位节点。直到节点包含了我们关注区块的所有内容即可。

所以，第一步的区块跟踪定位只需要几个参数 (区块名称,关键字1,关键字x,父节点层级n)

1.2 区块内部数据定位和提取
当第一步定位好区块父节点之后，我们排除了页面中的大部分内容，只需要关心此定位节点下面的内容即可。此时，IOT-Tree提供的配置管理界面会扫描列举出此节点下的所有可以被提取的文本内容。并且每个文本都对应一个xpath参数,你只需要选择并设定提取的名称即可。

1.3 字符串内部内容切分
如果我们关心的数据在某个字符串内部，则IOT-Tree还会对此字符串自动做切分，你还可以选择切分之后的相关内容即可。

点击按钮“+Add Block Locator”，弹出了页面分析窗口，我们需要对此区块定义名称bjyb，然后设定定位关键字如下：

 根据我们一开始查看的页面源代码，关键字"（今天）"，“（明天）”就可以定位到我们关心的区域。所以，在Trace Points下面Txt输入框填写"（今天）",然后点击按钮"+Set Trace Point"添加关键字。其他关键字同样操作，完成之后点击黄色按钮“Trace Root”，就可以发现下面出现了定位的子树，根节点为包含这两个关键字的最近节点。

点击树上的根节点，可以看到预览内容和右边可提取数据(Extractable data)显示出的所有数据块：

 可以发现，我们关心的数据都在里面了。（如果你的页面只show出了少数数据，你可以点击“Upper Level”按钮扩大范围，然后再次点击根节点查看，文档里有说明，这里就不细说了）。

我最关心今天和明天的天气数据，而在根部例举内容太多，此时，展开树节点，点击相关节点，配合网页具体展示内容进行查看，如下图：

在Extractable data右边，填写 “mt_di”  “明天低温” 并选择下面数据块 ，然后点击右边向上箭头按钮，就可以新增提取数据条目了，如下图

 使用同样方法，我确定了今天和明天需要提取的6个数据条目，如下图：

 点击ok，上一个窗口就多了一个数据区块：

点击ok，再点ok关闭所有弹出窗口进行保存。 

3 新增通道和数据项

在my_home鼠标右键，选择“New Channel”，弹出窗口填写如下内容，新增tqch。

添加通道成功之后，把此通道和刚才建立的“北京天气[tq]”接入项进行关联，如下

 在通道tqch下面，新增6个Tag，其中气温使用int16类型，天气使用str类型：

然后，再次打开进行接入条目编辑(鼠标右键北京天气]tq],选择Edit) ，点击按钮“Bind Channel"，在弹出窗口中，选择左边的提取项和对应右边的Tag项，并通过中间右箭头按钮进行关联绑定。如下图：

确定保存关闭所有弹出界面。启动项目，可以发现数据提取成功，正常运行了。

 3 监控画面添加天气信息

3.1 新增天气子监控UI

在通道tqch鼠标右键，选择"New HMI"，在弹出窗口中填写新的子画面名称和标题：

点击确定之后，在tqch下面新出现了一个UI节点 ，鼠标右键此节点，点击“Edit UI”，右边主内容区域进入了画面编辑界面。

我们绘制两个矩形框，里面放置"今天“，"明天" 主文本，下方各自再放置几个文本，分别对应，高温、低温和天气。如下图：

接下来，对今天和明天#tq #di #gao 6个文本图元分别绑定对应的Tag。

点击右上角保存之后，就完成了子画面的工作 

3.2 主画面新增天气子监控UI

鼠标右键主画面图元，选择"Edit UI”，系统主内容区显示了之前完成的主监控画面内容，如下图：

 点击绘图区左上角“Context Sub-HMI”图标，编辑区会出现所有的子画面内容。我们刚刚完成的天气监视画面已经在其中。鼠标左键选中此画面，拖拽到绘图区域松开，界面就出现了这个天气子画面，如下图：

调整整理位置 ，使得监控画面内容区域比例适合屏幕展示。保存之后，整个配置工作就完成了。

4 启动运行此项目

启动此项目，并刷新监控屏幕的浏览器，可以看到新加入的天气信息能够自动展示了。

5 总结

IOT-Tree Server文档里面有个文字描述，说通过此方式提取一些网页数据，某种意义上比直接通过一些Web Api还方便，我尝试下来只能说——完全同意！！