UIOTOS文档：通信 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat...

本篇介绍消息通信相关，主要涉及周期触发的定时器组件、HTTP/MQTT/（WebSocket）相关的接口组件、以及跨页面``/跨网页通信的收发器（消息总线）组件等。

定时器（timer）

说明

周期或定时触发事件。支持设置间隔周期（interval）和输出内容（output）。通常与 基本数学计算（calculation）、 随机数（random）等配合使用，用以周期性触发计算输出值。参见 随机数：
 函数

属性

功能

开启 （start）

布尔类型``可读写

定时器启动或停止。

使用注意事项：

• 定时器启动期间（尤其是间隔时间很多的），编辑时属性设置会受影响，可能设置不成功。通常设置期间，需要关闭页面中的定时器。
• 设置间隔周期并启动定时器后，默认情况下会一直周期性触发，不会主动停止。如果想只执行一次，可以连线操作自身，对当前属性设置false即可。相当于第一次定时器触发就自动关闭，如下所示：

间隔周期（interval）

数字类型``可读写

周期执行的时间间隔（毫秒）。

输出内容（output）

对象类型``可读写

定时事件触发时，对外输出的内容。

输出内容可以完全自定义。

触发事件（onEvent）

事件函数``可读写

定时的时间间隔到时触发，周期发生。

外观

略

---

更多参见 公共属性

接口（api）

说明

支持HTTP、MQTT、Websocket（当前由MQTT代替）通信。如下所示：

 

属性

公共

接口类型（type）

枚举类型``可读写

选择HTTP、MQTT或WebSocket。

注意：

• 不同选项，动态对应不同属性（公共属性不变）。
• 当前版本不支持WebSocket，可以用MQTT代替。

接口注释（comment）

多行文本``可读写

接口名称和用途备注。

接口地址（url）

对象数组``可读写

服务器接口请求地址URL。

对象数组形式，支持输入多个字符串段，自动按照顺序拼接合并成完整的URL，并自动补全，具体规则如下：

也可设置数组长度为1，填入一个URL字符串。分为段放到数组，有利于通过连线动态修改指定段。

1. 多段合并成一个字符串

多段之间自动加上斜杠/（如果前后已有，就不加），形成的一个URL字符串，交给下一步处理。

2. 判断完整接口URL地址

URL字符串，开头有如下字符时（不区分大小写），将作为最终的接口URL：

• http://
• https://
• ws://
• wss://

注意：

• 如果没有主域名，比如http://api/upload那么会自动插入当前网页源地址origin（形式如http://域名或IP地址:端口），示例：http://``**localhost:8999/**``api/upload。
• 对于MQTT，地址以ws://开头，通常与客户端用的http开头有区别（但不影响topic互通）。

以内置EMQ的为例（公用测试）：

• 服务地址（接口/broker）

• WEB端

ws://sys.aiotos.net:8084/mqtt"

- 桌面端

sys.aiotos.net:1883

• 管理面板

http://sys.aiotos.net:18083

• 默认账号

• 用户名：admin
• 密码：public

3. 追加前缀或网页源地址

开头无上述2中的字符串时，将继续判断：

• 开头有斜杠**/**

URL前面加上网页源地址，示例：/path=x/y/z → http://localhost:8999``/path=x/y/z

• 开头无斜杠**/**

再次判断，URL字符串的第一段，是否有符号.：

以字符/为间隔，可以将一个字符串分割成多段。没有/时，整个字符串就是唯一的一段。

- 有`.`符号

• 1.

在URL前面只加上指定http://前缀（默认不加https://）。比如：
sys.aiotos.net/login → http://``sys.aiotos.net/login

- 无`.`符号

• 1.

URL前加上网页源地址，并加上斜杠/间隔，参考开头有斜杠/。如下所示：

1. `path=x/y/z` → `http://localhost:8999/``path=x/y/z`

• 1.

4. 端口分段中配置加上":"

分段配置合并时，如果有比如":8899"的，通常前面就不用/，自动识别作为端口。

5. 【附】等价配置示例

• **"http://sys.aiotos.net/login"**

• ["**http://**sys.aiotos.net/login"]
• ["sys.aiotos.net", "login"]
• ["sys.aiotos.net**/**", "**/**login"]

• **"https://www.somesite.com:8080/login"**

• ["https://","www.somesite.com","**:8080**","login"]
• ["https://","www.somesite.com**:8080/**","**/**login"]

示例参见HTTP选项。

周期请求 *（enableRepeat）

:::danger注意：该属性需打开 专业模式才可见。:::布尔类型``可读写

周期性执行接口请求。

开启重复请求。勾选后，会按照周期间隔作为重复请求接口。

周期间隔 *（repeatInterval）

:::danger注意：该属性需打开 专业模式才可见。:::数字类型``可读写

周期请求的时间间隔。

勾选周期请求后，会按照本属性设置的时间间隔（毫秒）周期性调用接口。

错误弹窗 *（repeatInterval）

:::danger注意：该属性需打开 专业模式才可见。:::布尔类型``可读写

是否启用默认的错误弹窗。

勾选后，当调用发生错误，将有默认弹窗提示。

消息字段 *（resMsgField）

:::danger注意：该属性需打开 专业模式才可见。:::字符串类型``可读写

接口返回的消息字段。

信息字段。接口返回结构的提示信息字段。默认为message。通常与错误弹窗配合使用，当接口返回错误时，改字段对应的文本将作为弹窗的提示内容。

回调函数 *（callback）

:::danger注意：该属性需打开 专业模式才可见。:::函数类型``可读写

接口返回数据回调函数。

回显追加（echoAppend）

布尔类型``可读写

界面日志滚动显示不覆盖。

显示日志是否追加。不勾选时，新的日志会覆盖之前的日志，始终显示最新的日志输出。勾选时，日志会追加形式输出显示。

回显清理（echoClear）

布尔类型``可读写

清空界面回显的所有日志。

接收日志 *（responseLog）

布尔类型``可读写

浏览器控制台输出接口日志。

注意：跟组件界面显示与否无关，是浏览器控制台的日志显示输出。

HTTP选项

用于HTTP WEB接口查询请求。示例

设置

/*会自动加上工具的地址，比如 http://localhost:8999/files/list，该接口为工具的内置接口，
用于查找文件系统中，对应path指定的位置下的文件或目录列表。*/
["files/list"]

• 1.
• 2.
• 3.

//GET请求参数，会自动将下面键值对拼接到上面接口地址中！
{
    "path": "displays/develop/user", //列出develop下用户目录下文件或目录列表。
    "filter": ""
}

• 1.
• 2.
• 3.
• 4.
• 5.

请求类型（httpType）

枚举类型``可读写

选择GET、POST、PUT或DELETE。

接口注释（comment）

多行文本``可读写

接口名称和用途备注。

参数对象（jsonFormat）

对象类型``可读写

接口参数对象。参数键组、参数值组对应。

接口请求参数的json格式。

• POST请求

对应data参数键值对。

• GET请求

自动将键值对转成GET请求参数，拼接到URL中。比如：{a:1,b:2} → url?a=1&b=2可结合输入键组、输入值组和 转换方式，实现对任意复杂JSON对象，指定字段参数赋值（参见 对象字段赋值）。

用作文本 *（dataIsJsonString）

:::danger注意：该属性需打开 专业模式才可见。:::布尔类型``可读写

勾选时，参数对象将为文本传参。

涉及到参数对象属性值，在接口实际调用传参时，用对象（为false时），还是对象字符串（为true时）。

参数键组 ☆（paramKeys）

注意：该属性需展开更多

才可见。

数组类型``可读写

与参数对象对应的字段键组。

可结合参数对象、输入值组和 转换方式，实现对任意复杂JSON对象，指定字段参数赋值（参见 对象字段赋值）。

参数值组 ☆（paramValues）

注意：该属性需展开更多

才可见。

数组类型``可读写

与参数对象对应的字段值组。

可结合参数对象、输入值组和 转换方式，实现对任意复杂JSON对象，指定字段参数赋值（参见 对象字段赋值）。

转换方式 *（jsonStruct）

:::danger注意：该属性需打开 专业模式才可见。:::枚举类型``可读写

参数对象与键值组的对应选项。

可结合参数对象、参数键组和输入值组，实现对任意复杂JSON对象，指定字段参数赋值（参见 对象字段赋值）。

鉴权类型 *（tokenType）

:::danger注意：该属性需打开 专业模式才可见。:::枚举类型``可读写

接口请求时的Token鉴权方式。

参数说明：

• JWT
• X-Access-Token（默认）

这两个选项下，鉴权Token属性直接填写token内容即可。

• custom

此时，字段默认为Authorization，值为鉴权Token填入的内容，不加其他处理。

鉴权Token *（authToken）

:::danger注意：该属性需打开 专业模式才可见。:::字符串类型``可读写

鉴权token，用于需要接口调用传入。

本属性结合鉴权类型选择（默认为X-Access-Token），确定HTTP接口Header中的鉴权参数。如果未配置，并且全局有缓存的token，将默认采用缓存值，参见Token字段。

注意：本属性与Token字段通常不会在一个接口中同时用到。比如登录接口返回，通过Token字段提取并缓存token；另一个接口当前鉴权Token属性主动填入（或者保持默认为空），以使用获取到的token。

Token字段 ★（tokenFieldParsed）

注意：该属性需展开更多

才可见。

字符串类型``可读写

提取返回数据中token的解析字符串。

鉴权（登录）接口返回时，可通过本属性配置的解析串（符合 解析赋值规则），提取数据中的token。
比如填写result.token时，当前接口返回且带有{result:{token:xxx}}结构的数据时，将提取到xxx作为token值。
此外，提取到的token会自动全局缓存。当其他接口调用时，若未配置鉴权Token，将默认使用缓存值。参见鉴权Token。

发送类型 *（contentType）

:::danger注意：该属性需打开 专业模式才可见。:::枚举类型``可读写

HTTP发送的ContentType类型。

参数说明（具体参见HTTP协议）：

• FORM：application/x-www-form-urlencoded
• JSON：application/json
• XML：text/xml
• TEXT：text/plain

返回类型 *（dataType）

:::danger注意：该属性需打开 专业模式才可见。:::枚举类型``可读写

HTTP返回的DateType类型。

参数说明略。参见HTTP协议。

注意：这里扩展新增了JSONP类型，可以解决Http GET请求的跨域问题。依赖于指定后端接口中转。略。

请求（requesting）

布尔类型``只写

执行接口调用。

执行接口GET、POST等调用。只写属性，触发后会自动复位，便于再次触发。

下载 *（download）

:::danger注意：该属性需打开 专业模式才可见。:::布尔类型``只写

下载链接文件（或打开页面）。

通常用于对接口地址填入的资源文件，通过浏览器下载。如果是网页，则会打开页面。

默认打开 ★（defaultOpen）

注意：该属性需展开更多

才可见。

枚举类型``可读写

页面初始加载时，自动执行接口请求。

通常用于页面初始打开，需要调用接口初始化显示数据的情况。

加载动画 ★（enableLoading）

注意：该属性需展开更多

才可见。

布尔类型``可读写

执行请求过程中，开启过度旋转动画。

请求过程动画提示。请求时会提示转动小圆圈，提示正在请求。请求完毕或者出错，会自动关闭提示。

返回响应（response）

对象数组``可读写

接口请求返回状态和数据。索引0：接口调用状态。索引1：接口返回数据。

注意：连线对本组件比较特殊。可以像常规连线一样，取当前属性索引1的值，获得接口返回数据输出。不过为了简便，可直接对外连线不关联属性，输出的就是接口返回数据。参见连线 特例。

开启模拟（fakeRecvEnabled）

布尔类型``可读写

是否启用接口数据模拟。

当勾选了本属性时，接口将不再执行实际请求，而是将模拟返回内容，经过模拟延迟后直接输出。后续的连线解析、事件传递，不会区分数据来自实际还是模拟。如下所示：

模拟返回（fakeApiReceived）

对象类型``可读写

开启模拟后，用于对外输出的模拟数据。

勾选开启模拟后，触发接口请求，不会实际进行，而是将当前属性配置，作为接口返回数据输出。

模拟延迟 ★（fakeReturnDelay）

注意：该属性需展开更多

才可见。

数字类型``可读写

模拟接口请求过程的延时。

---

模拟返回数据并非在执行请求时立即返回，而是以当前属性配置的时间（毫秒ms）延时后再返回。

MQTT选项

用于浏览器页面数据实时更新，数据推送显示。示例

设置

• WEB端（UIOTOS）

• 接口地址：["ws://sys.aiotos.net:8084/mqtt"]
• 主题列表：["**uiotos_test_topic**"]

• 客户端（EMQX）

• 地址：sys.aiotos.net:1883
• 主题：**uiotos_test_topic**

用户名 ★（_username）

注意：该属性需展开更多

才可见。

字符串类型``可读写

MQTT接口服务所需的用户名。

MQTT不同的接口地址服务，要求不一样。这里默认地址的MQTT服务器，无需输入用户名和密码，默认空即可。

密码 ★（_password）

注意：该属性需展开更多

才可见。

字符串类型``可读写

MQTT接口用户名对应的密码。

参见用户名。

客户端ID *（_clientId）

:::danger注意：该属性需打开 专业模式才可见。:::字符串类型``可读写

当前客户端在MQTT服务的唯一ID。

默认提供了唯一ID。也可以手动修改指定。

连接超时 *（_connectTimeout）

:::danger注意：该属性需打开 专业模式才可见。:::数字类型``可读写

指定连接超时时间，超过时将返回报错。

单位为毫秒。

心跳周期 *（_keepAlive）

:::danger注意：该属性需打开 专业模式才可见。:::数字类型``可读写

用于保持连接在线的心跳周期。

单位为毫秒。

主题列表（_topics）

数组类型``可读写

订阅或发送的主题列表，可指定某个。

MQTT的主题Topic列表，可以是多个，用于批量订阅。同时，结合指定发送的索引，可指定主题发送。

指定发送（_topicIndexSend）

数字类型``可读写

设置主题列表索引，指定主题发送。

设置索引，指定主题列表中的某项。填入-1时，是对列表中所有主题都发送。超过列表最大索引时，将自动设置为最后一项索引值。

发送内容（_payloadSend）

对象类型``可读写

发送时，与发送主题对应的内容。

质量等级 *（_qos）

:::danger注意：该属性需打开 专业模式才可见。:::枚举类型``可读写

对应MQTT协议中的QOS参数。

保留标志 *（_retain）

:::danger注意：该属性需打开 专业模式才可见。:::布尔类型``可读写

对应MQTT协议中的retain参数。

发送 （_payloadSend）

布尔类型``只写

执行发送主题和内容。

订阅（_subscribe）

布尔类型``可读写

连接MQTT服务器，并订阅数据。

订阅后可以等待接收对应的主题消息。

注意：主题列表设置时也会触发订阅。这里单独设置订阅或取消订阅。此外，还可显示当前的连接状态。

收到主题（_topicRecvGetend）

字符串类型``只读

收到数据对应的主题Topic。

收到内容（_payloadRecvGet）

对象类型``只读

收到的数据内容。

WebSocket选项

略。当前已由MQTT代替。

---

更多参见 公共属性

收发器（eventBus）

说明

收发器本质为浏览器内的消息总线，类似MQTT那样基于Topic主题通信，不过是用来实现页面内、跨页面、跨网页的组件通信，支持一对一、一对多总线、广播方式。
收发器与 连线为互补机制，相当于组件之间的“无线”通信。当连线比较复杂，用收发器可以简化连线。劣势也在于不直观，无法像连线那样直观反映组件之间的流程和逻辑。 示例一：页面内“无线”通信> 示例说明：

• 页面13A：连线让按钮组切换时，让下发网格第一列宽度为0或者固定值，动态显示隐藏。
• 页面13B：将上面的连线打断，连线传值给发送器，接收器收到后继续处理。有线变无线！

示例二：iframe跨网页间通信> 示例步骤：

1. 新建一个页面，放入接收器，并且连线指向对话框家，内容收到时传过去，并触发弹窗。
2. 新建另一个页面，拖入 网页内嵌容器（iframe），填入上面页面的http网页链接地址。
3. 拖入按钮和发送器，点击时执行发送。其中发送器主题和前面页面接收器的主题一致。
4. 运行时点击按钮，iframe内嵌网页能收到数据，并且弹窗提示。

属性

公共

模式选择（mode）

枚举类型``可读写

选择发送器、接收器或者收发器。

模式用途说明：

• 发送器

发送任意数据，由指定接收器接收，或者其他嵌套网页或代码监听程序接收。

• 接收器

接收发送器的数据，或者网页事件、代码发送的消息数据。

• 收发器

同时兼容发送器和接收器两者的功能。

外观颜色（icon-background）

颜色类型``可读写

组件的外观颜色。

发送器：

接收器

收发器

注意：不同模式的外观，颜色可以独立设置，互不影响。

本地地址（addressLocal）

字符串类型``可读写

组件自身的地址，用于通信时被识别。

任意字符串，可以手动填入指定，或者保持默认空。当为空时，页面运行将自动生成全局唯一的地址。其中地址包含有逐层嵌套的页面（如果有）、组件标签等信息。

注意：收发器所在页面被嵌套时，如果手动设定了地址，那么上层页面多处嵌套时，将无法区分这些内嵌页的收发器。如下所示：

示例说明：

• 内嵌页为接收器输出弹窗，被上层三个容器嵌套。
• 内嵌接收器设置本地地址**"内嵌收发器指定地址_001"**，以及主题白名单[**"测试主题_topic"**]。
• 上层接收器设置远程地址[**"内嵌收发器指定地址_001"**]，以及发送主题**"测试主题_topic"**。
• 发送器执行发送时，将触发3个容器内的接收器，先后弹出3个对话框。

触发事件（onEvent）

事件类型``可读写

接收到或发送时触发的事件。

注意：通常是在接收器收到数据时（包括有接收来源、收到主题、收到内容）触发。不过也支持发送器执行发送时触发。如下所示：（示例可以省去事件关联，参见 关联事件（属性）什么时候可以省？）

网页事件（onPostMessage）

事件类型``可读写

收到网页postMessage网页事件。

跨网页调用postMessage的事件消息，通常与iframe通信代码调用有关。

发送器

远程地址（addrsRemote）

对象数组``可读写

目标接收器的地址（列表）。

填入目标接收器的本地地址，可以是多个，实现一对多广播发送。

注意：当为空（长度为0）或为默认*时（一项或多项值设置为*），为广播消息，所有接收器都会接收到，跳过与自身地址的匹配校验，进行下一步校验处理（地址白名单、主题白名单）。

发送主题（topicSend）

对象类型``可读写

发送内容对应的主题Topic。

可以是任意格式，通常为字符串。为空时默认为当前收发器的全局标签（参见本地地址）。

发送内容（contentSend）

对象类型``可读写

发送主题对应的内容。

可以是字符串、普通JSON对象，或图元对象。如果未设定值，则自动传入当前页面的window全局对象，因此利用此特性，结合 解析赋值规则，就能在对应接收器中，连线提取到全局对象的任意变量，如下所示：

示例说明：

• 发送器的当前发送内容属性，保持默认为空，不设置任何值。
• 接收器将收到内容输出给对话框显示。
• 在浏览器控制台中，对window全局变量找到一个变量（指定多级字段）。
• 将变量字段按照解析规则（控制台对象.操作，中去掉window留下的字符串），填入字符串到对应连线的 解析赋值位置。
• 双击发送器执行发送，此时接收器弹窗显示解析后window对象字段值。

执行发送（triggerSend）

布尔类型``只写

发送器触发执行。

会引起触发事件。因此也可以直接讲发送器对外连线，兼容“有线”方式操作

初始执行 ★（triggerInit）

注意：该属性需展开更多

才可见。

布尔类型``可读写

加载初始化时执行发送。

勾选后，在初始化加载时会按照配置，触发执行发送消息。

禁止缓存 *（cacheDisabled）

:::danger注意：该属性需打开 专业模式才可见。:::布尔类型``可读写

不缓存消息，接收器页面后加载时不处理。

存在发送内容那一刻，对应接收器还没初始化（页面加载、启动接收）的情况。为避免消息丢失，默认情况下，发送器发出的内容，会全局缓存到队列。接收器启动时，会从缓存取待接收的消息。勾选本属性后，发送出的消息，不再被缓存，以避免某些误响应。 示例步骤说明

1. 带有接收器的内嵌页，收到数据时弹窗显示。

2. 上层页面点击启动接收按钮，将上面内嵌页地址传入对话框，作为页面路径，并弹窗。

3. 点击发送内容，发送器指定前面接收器，发送数据。

• 先启动接收，再发送数据，肯定能正常收到数据。
• 如果先发送数据，再启动接收，那么取决于发送器是否有勾选禁止缓存：

• 勾选了禁止缓存：后启动接收时，将收不到数据。
• 默认未勾选禁止：后启动能接收到先发送的数据。

注意：本示例由于每次点击，都会传入地址重新加载、初始化。因此，在能接收数据并弹窗时，关闭上层对话框，再点击启动接收，还会再次出现数据接收弹窗，而不是仅第一次有。

接收器

地址白名单（addrsWhiteList）

对象数组``可读写

允许通过的发送器地址（列表）。

发送器发出的所有数据，接收器都能收到。是否接受、进入下一步处理，首要判断对方的本地地址，是否在当前白名单中。即便发送器的目标地址是当前接收器，单如果自身地址不在接收器白名单内，也不会被接受。

注意：当前为空（长度为0）或为*时（数组中有一项或多项设置为*），此时所有发送器均通过。

主题白名单（topicsWhiteList）

对象数组``可读写

允许通过的消息主题（列表）。

与地址白名单作用类似，这里限定的是发送主题。并且，只有在地址白名单通过的前提下，才会进行当前判断。

注意：类似地址白名单，空或*，在地址通过的前提下，所有主题也都通规。

附加描述项（topicsExtraInfo）

:::danger注意：该属性需打开 专业模式才可见。:::对象数组``可读写

与主题白名单索引对应的自定义数据。

手动设置主题白名单中，各个索引主题Topic对应的额外配置数据。

接收来源 *（callerRemote）

:::danger注意：该属性需打开 专业模式才可见。:::对象类型``可读写

消息通过时，来源发送器对象。

即当前消息的来源，即发送者，为图元对象格式，常规使用可忽略。

收到主题（topicRecv）

对象类型``可读写

接收到数据对应的主题Topic。

当前接收到的消息主题，支持任意格式，通常为字符串，

收到内容（contentRecv）

对象类型``可读写

与收到主题对应收到的内容。

可以是数字、布尔、字符串、普通JSON对象或图元对象。

启动接收 ★（waitingRecv）

注意：该属性需展开更多

才可见。

对象类型``可读写

开启监听，准备好接收发送器的消息。

默认加载时自动启动，通常无需手动勾选。某些场景不需要初始监听的，可以将默认勾选去掉。

收到网页数据 *（messagPostGet）

:::danger注意：

• 该属性需打开 专业模式才可见。
• 不能传递图元对象，有别于收到内容。:::对象类型``可读写

js代码postMessage发送的数据。

等待网页数据 *（waitingMsgPost）

:::danger注意：该属性需打开 专业模式才可见。:::布尔类型``可读写

开启监听网页postMessage数据。

作用类似启动接收，不过是针对网页通信原生的postMessage方式。

---

更多参见 公共属性

原创作者: u_15629616 转载于: https://blog.51cto.com/u_15629616/11860290