- 最新动态
- 功能总览
- 产品介绍
- 计费说明
- 快速入门
-
用户指南(低代码)
- AstroZero低代码使用流程
- 授权用户使用AstroZero并购买实例
- 添加AstroZero开发者用户
- 使用AstroZero创建应用
-
使用AstroZero开发应用后端
- 应用后端开发概述
- 对象
- 事件
- 脚本
-
服务编排
- AstroZero服务编排概述
- 创建空白AstroZero服务编排
- 定制已有AstroZero服务编排
-
为AstroZero服务编排设置图元
- 为AstroZero服务编排添加子服务编排图元
- 为AstroZero服务编排添加脚本图元
- 为AstroZero服务编排添加记录创建图元
- 为AstroZero服务编排添加记录删除图元
- 为AstroZero服务编排添加记录查询图元
- 为AstroZero服务编排添加记录更新图元
- 为AstroZero服务编排添加发送邮件图元
- 为AstroZero服务编排添加发送事件图元
- 为AstroZero服务编排添加赋值图元
- 为AstroZero服务编排添加循环图元
- 为AstroZero服务编排添加跳出循环图元
- 为AstroZero服务编排添加决策图元
- 为AstroZero服务编排添加等待图元
- 为AstroZero服务编排添加BO图元
- 为AstroZero服务编排添加连接器图元
- 为AstroZero服务编排添加生成文档图元
- 管理AstroZero服务编排
- 自定义AstroZero服务编排的URL
- 触发器
- 工作流
- 定时任务
-
使用AstroZero开发应用前端
- 应用前端开发概述
-
标准页面
- AstroZero标准页面概述
- 创建空白AstroZero标准页面
- 使用模板创建AstroZero标准页面
- 为AstroZero标准页面添加组件
-
设置AstroZero标准页面组件属性
- 设置AstroZero标准页面容器组件属性
- 设置AstroZero标准页面表单组件属性
- 设置AstroZero标准页面表格组件属性
- 设置AstroZero标准页面分栏组件属性
- 设置AstroZero标准页面栅格容器组件属性
- 设置AstroZero标准页面列表视图组件属性
- 设置AstroZero标准页面表格(新)组件属性
- 设置AstroZero标准页面图片组件属性
- 设置AstroZero标准页面二维码组件属性
- 设置AstroZero标准页面分页组件属性
- 设置AstroZero标准页面模态框组件
- 设置AstroZero标准页面输入框组件属性
- 设置AstroZero标准页面下拉框组件属性
- 设置AstroZero标准页面按钮组件属性
- 设置AstroZero标准页面上传组件属性
- 设置AstroZero标准页面面包屑组件属性
- 设置AstroZero标准页面视频播放组件属性
- 添加事件实现AstroZero组件间交互
- 添加库扩展AstroZero标准页面功能
- 查看AstroZero标准页面性能
- 调测AstroZero标准页面
- 将AstroZero标准页面保存为模板
- 管理AstroZero标准页面
-
高级页面
- AstroZero高级页面概述
- 创建AstroZero高级页面
- 为AstroZero高级页面添加组件
-
设置AstroZero高级页面预置组件属性
- 设置AstroZero高级页面轮播组件属性
- 设置AstroZero高级页面图片组件属性
- 设置AstroZero高级页面文本编辑组件属性
- 设置AstroZero高级页面自定义背景框组件属性
- 设置AstroZero高级页面基本柱图组件属性
- 设置AstroZero高级页面基本折线图组件属性
- 设置AstroZero高级页面基本饼图组件属性
- 设置AstroZero高级页面水位图组件属性
- 设置AstroZero高级页面散点图组件属性
- 设置AstroZero高级页面雷达图组件属性
- 设置AstroZero高级页面仪表盘组件属性
- 设置AstroZero高级页面翻牌器组件属性
- 设置AstroZero高级页面路由导航和路由视图组件属性
- 为AstroZero高级页面添加自定义组件
- 为AstroZero高级页面组件绑定数据
- 添加事件或宏实现AstroZero高级页面组件交互
- 调测AstroZero高级页面
- 查看AstroZero高级页面性能
- 管理AstroZero高级页面
- 报表
- 使用AstroZero进行应用集成开发
- 使用AstroZero对应用进行个性化设置
- 发布并部署AstroZero开发的应用
- 管理AstroZero中已安装的应用
- AstroZero低代码平台管理中心
-
经典版开发指导
- 经典版入门必读
- 应用
- 对象
- 标准页面
- 高级页面
- 服务编排
- 脚本开发
- BPM服务编排
- API接口
- 集成开发
- 消息事件
- 触发器
- 报表和仪表板
- CICD持续集成与交付
- 服务组件(BO)
- 调测能力
- 工程能力
- 原生服务
- 其他功能
- 管理中心
- 白名单特性
- 用户指南(零代码)
- 最佳实践
- API参考
-
常见问题
- 高频常见问题
- 产品咨询类
-
应用后端开发
- 如何区分不同账户间的数据库对象?
- 在AstroZero对象中删除字段后重新创建时,引用的地方报错
- 如何刷新AstroZero对象的页面布局?
- 如何彻底删除AstroZero应用目录树中的数据?
- AstroZero自定义对象预置的owner字段,用于记录什么用户?
- AstroZero脚本支持使用哪些语言和库?
- 在AstroZero脚本中执行sql语句时,可以不用@useObject修饰数据对象吗?
- 在AstroZero脚本中,如何返回zip压缩文件内容?
- 如何通过AstroZero脚本,导出xls文件让用户下载?
- AstroZero脚本中是否支持multipart/form-data请求?
- AstroZero服务编排中涉及数据操作的脚本图元,在其他图元操作失败的情况下,是否可以回滚?
- 事件触发的AstroZero服务编排,发送事件后,服务编排没有运行?
- 在AstroZero服务编排或工作流中,引用的资源无法编辑
- 如何实现一个资源被多个AstroZero应用的服务编排调用?
- 在AstroZero服务编排中,支持跨应用引用资源吗?
- 在AstroZero服务编排、工作流或脚本中,邮件发送功能不可用?
- AstroZero开发者如何使用自己的邮箱发送邮件?
-
应用前端开发
- 在AstroZero标准页面中,如何调用服务编排或脚本?
- 在AstroZero标准页面组件较多时,如何快速选中组件?
- 表格字段太多,导致AstroZero标准页面无法完整显示,该如何处理?
- 在AstroZero标准页面中,如何实现有子表的表格?
- 在AstroZero标准页面中,如何实现下拉框选项值的筛选功能?
- 在AstroZero标准页面中,如何实现移动端上拉异步加载数据功能?
- 如何查看AstroZero标准页面的URL格式?
- 在AstroZero标准页面弹窗的onOk事件中,不想关闭弹窗该怎么处理?
- 在AstroZero中编排高级页面时,如何实现不加载组件库资源?
- 在AstroZero中自定义高级页面组件(widget)时,修改了JS文件,修改部分不生效?
- 在AstroZero组件库中,部分组件在组件详情页看不到更新和编辑入口
- 在AstroZero高级页面中,如何进行统一的HTTP状态拦截?
- 配置高级页面组件桥接器实例属性时,如何设置下拉框中的选项值?
- 在AstroZero高级页面中,如何实现所有组件都加载完成后,再执行某段逻辑?
- 在AstroZero中,如何实现多人协作开发?
- 在AstroZero运行环境中,如何实现游客访问标准页面?
- 应用发布与部署
- Astro轻应用平台管理中心
- 视频帮助
- 文档下载
- 通用参考
链接复制成功!
使用WebSocket为AstroZero高级页面组件绑定数据
操作场景

WebSocket是一种HTML5提供的网络传输协议。WebSocket协议支持Web浏览器,使得客户端和服务端之间可以创建长久连接并进行双向数据传输,即服务端可以主动向客户端推送数据,客户端也可以主动向服务端发送信息,是服务端推送技术的一种。
低代码平台提供了WebSocket,用户可以通过触发消息事件,将后台消息以json对象的形式,通过平台的WebScoket服务端发送,所有订阅了该事件的前台WebScoket客户端都会获得该消息数据。WebScoket客户端订阅服务地址如下:
wss://${location.host}/websocket/v1.0/component/listener?tenantId=${tenantId}&event=${eventName1}&event=${eventName2}…
参数 |
说明 |
---|---|
tenantId |
租户ID,可通过${tenantId}自动获取,也可以登录环境配置,在“系统设置 > 公司信息”中获取,详情请参见设置AstroZero账号的公司信息。 |
event |
订阅事件的名称,进入待订阅事件的详情页,可获取事件的名称。 event参数可以有多个值,即WebScoket客户端可订阅多个事件。 |
创建消息事件,既可通过服务编排、工作流或外部系统订阅该事件,也可通过WebSocket订阅。而消息事件通常通过服务编排、数据接入等进行触发。
在前端高级页面组件开发中,用户可通过以下方式创建WebSocket对象。参数url为需要连接的地址,即客户端订阅地址。
var ws= new WebSocket(url);
实例化对象可监听以下事件,更多WebSocket对象属性和方法介绍,请参见WebSocket。
事件 |
说明 |
---|---|
ws.onopen |
连接建立时触发。 |
ws.onmessage |
客户端接收服务端数据时触发。 |
ws.onerror |
通信发生错误时触发。 |
ws.onclose |
连接关闭时触发。 |
步骤1 创建WebSocketAlarmEvent告警事件
- 创建事件。
- 参考登录AstroZero新版应用设计器中操作,登录应用设计器。
- 在左侧导航栏中,选择“数据”。
- 单击事件后的
,进入添加事件页面。
- 选择“创建新事件”,输入标签“WebSocketAlarmEvent”,单击“添加”。
单击名称对应的输入框,系统会根据标签自动生成名称,系统实际创建的事件名称为“命名空间__WebSocketAlarmEvent__e”。
图2 添加WebSocketAlarmEvent事件
- 在事件详情页面,选择“自定义参数”页签,单击“新建”。
- 设置标签、名称和字段类型,单击“保存”,添加事件自定义参数AlarmTitle。
图3 添加事件自定义参数
- 重复3中操作,创建事件自定义参数AlarmContent、AlarmDate。
表3 事件自定义参数说明 标签
名称
字段类型
AlarmContent
单击名称对应的输入框,系统根据标签自动生成名称。
文本
AlarmDate
单击名称对应的输入框,系统根据标签自动生成名称。
日期/时间
- 启用告警事件。
步骤2 创建WebSocketAlarmFlow告警服务编排
如果想快速了解和验证WebSocket使用,可不必创建WebSocketAlarmFlow告警服务编排,采用消息事件的测试功能进行简单验证。您可以直接跳过该步骤,直接执行步骤3 开发alarmDisplayWidget告警展示组件,并在方法一:直接触发事件验证中采用方法1(直接触发事件验证)进行效果验证。
- 创建编排。
- 参考登录AstroZero新版应用设计器中操作,登录应用设计器。
- 在左侧导航栏中,选择“逻辑”。
- 单击编排的
,进入添加服务编排。
- 选择“创建一个新的服务编排”,输入标签“WebSocketAlarmFlow”,单击“添加”。
图5 创建服务编排WebSocketAlarmFlow
- 在服务编排画布左侧,单击“基本”,将“发送事件”图元拖入画布中。
图6 拖入“发送事件”图元
- 添加添服务编排变量。
- 选中“发送事件”图元,单击画布右侧
。
- 单击“全局上下文”,进入上下文页面。
- 单击“变量”后的
,添加表4中变量。
图7 配置全局变量
- 选中“发送事件”图元,单击画布右侧
- 在“发送事件”图元中,配置1中创建的事件命名空间__WebSocketAlarmEvent__e(需替换为用户实际创建的事件名称)。
参考下图配置输入参数,通过全局变量AlarmTitle和AlarmContent及系统变量$Flow.CurrentDateTime为事件传参。图8 事件图元的配置
- 连接所有图元。
图9 连接图元
- 选中“开始”图元,单击
,参考下图配置服务编排的入参。
入参是从全局上下文的变量中拖入,告警服务编排的入参有AlarmTitle和AlarmContent两个。图10 配置入参 - 单击页面上方的
,保存服务编排。
- 单击
,启用服务编排。
服务编排只有启用后,才会生效。服务编排在启用后,不可编辑,如果需要对其中的图元或参数进行修改,请先单击
,禁用该服务编排。
步骤3 开发alarmDisplayWidget告警展示组件
您可以按照如下步骤,开发alarmDisplayWidget告警展示组件,也可以直接单击alarmDisplayWidget.zip,获取示例开发包。
- 下载组件模板widgetVue3Template。
- 在AstroZero服务控制台,单击“进入首页”,进入应用开发页面。
- 在页面左上方单击
,选择“环境管理 > 环境配置”,进入环境配置。
- 在顶部菜单栏中,选择“维护”。
- 在左侧导航栏中,选择“全局元素 > 页面资产管理 > 组件模板”。
- 单击组件模板widgetVue3Template,进入模板详情页。
- 单击“下载”,设置名称为alarmDisplayWidget,单击“保存”。
图11 设置组件名称
- 解压已下载的“alarmDisplayWidget.zip”,解压后在“alarmDisplayWidget.js”中,通过定义变量“var ws = new WebSocket(url);”,打开一个WebSocket,订阅WebSocketAlarmEvent告警事件。
采用ws.onmessage监听WebSocketAlarmEvent告警事件消息,对json数据解析,存入ListData中。为了方便观察组件,为ListData设定初始值,请将原先代码中如下代码进行替换,注意不是替换全部代码。
Vue.createApp({ data() { return { name: widgetProperties.parama || "Bingo Studio" } } }).mount($("#widgetVue3Template",elem)[0]);
替换的代码如下,其中“命名空间__WebSocketAlarmEvent__e”需要修改为在1中创建的告警事件的名称。
var vm = Vue.createApp({ data:{ listData: [ { "title": "设备告警", "content": "设备A1 CPU使用率过高", "date": "2020-12-09 09:15:09" }, { "title": "车辆告警", "content": "车辆-XXXXXXX 未登记", "date": "2020-12-10 15:09:20" } ], ws: null }, mounted: function () { this.init(); }, methods: { init: function() { //获取WebSocket订阅地址 let urlMessage = "tenantId="+ $.cookie("tenant-id") + "&event=命名空间__WebSocketAlarmEvent__e"; let url = `wss:///${location.host}/websocket/v1.0/component/listener?${urlMessage}`; //打开一个WebSocket this.ws = new WebSocket(url); //WebSocket连接建立时触发事件 this.ws.onopen = event => { this.ws.send(""); console.log("WebSocket has connected."); }; //WebSocket连接关闭时触发事件 this.ws.onclose = event => { console.log("WebSocket has closed."); }; //WebSocket通信错误时触发事件 this.ws.onerror = event => { console.log("WebSocket has error."); }; //WebSocket客户端接收服务端数据时触发事件 this.ws.onmessage = event => { if (event.data) { let dataObj = JSON.parse(event.data); if (dataObj.content) { let data = JSON.parse(dataObj.content); if (data.payload) { let content = JSON.parse(data.payload); this.listData.push( { "title": content.AlarmTitle, "content": content.AlarmContent, "date": content.AlarmDate, }); } } } }; this.intervalID = setInterval(() => { this.ws.send(""); }, 50000); }, }, destroyed() { if (this.ws) { this.ws.close(); } } }).mount($("#widgetVue3Template",elem)[0]);
- 在“alarmDisplayWidget.ftl”中定义渲染页面,将告警信息的title、content和date显示,并加入分割线。
<div id="widgetVue3Template" style="margin: 20px;"> <div :data="listData" class="seamless-warp"> <ul class="item"> <li v-for="item in listData"> <span class="alarmTitle" v-text="item.title" ></span> <span class="alarmContent" v-text="item.content"></span> <span class="alarmDate" v-text="item.date"></span> <br><br><hr size="1" noshade="noshade" style="border:1px #cccccc dotted;"/><br> </li> </ul> </div> </div>
- 在“alarmDisplayWidget.css”中,定义title、content和date的样式alarmTitle、alarmContent和alarmDate。
#alarmDisplayWidget.seamless-warp ul li{ list-style-type:none; } .alarmTitle { font-family:"Microsoft YaHei"; font-size: 30px; font-weight:bold; padding: 0.5px 7px; margin:8px; border-radius: 5px; background-color:#FAC700; color:honeydew; } .alarmContent { font-family:"Microsoft YaHei"; font-size: 30px; font-weight:bold; margin:5px; } .alarmDate { font-family:"Microsoft YaHei"; font-size: 30px; margin:5px 35px; }
- 在packageinfo.json中,定义组件初始宽度“width”和初始高度“height”。
{ "widgetApi": [ { "name": "alarmDisplayWidget" } ], "widgetDescription": "", "authorName": "", "localFileBasePath": "", "width": "1000", "height": "600", "requires": [ { "name": "global_Vue3", "version": "3.3.4" } ] }
- 重新打包组件,包名为“alarmDisplayWidget.zip”。
步骤4 上传alarmDisplayWidget告警展示组件并创建高级页面
- 上传alarmDisplayWidget告警展示组件。
- 登录AstroZero服务控制台,单击“进入首页”,进入应用开发页面。
- 单击页面左上角的
,选择“环境管理 > 环境配置”,进入环境配置。
- 在顶部菜单栏中,选择“维护”。
- 在左侧导航栏中,选择“全局元素 > 页面资产管理 > 组件”。
- 单击“提交新组件”,进入提交新组件页面。
- 单击“请选择源文件(.zip)”,选择商品列表组件包alarmDisplayWidget.zip,输入发行说明为“alarmDisplayWidget”,单击“提交”。
- 创建monitor高级页面。
- 在应用设计器中,单击左侧导航栏中的“界面”。
- 单击高级页面后的
,设置页面的名称和标题为monitor,单击“添加”。
- 在高级页面左上方,单击
,从“全部 > 自定义”中,拖拽alarmDisplayWidget至右侧画布中。
图12 拖拽alarmDisplayWidget至右侧画布中 - 调节组件位置和大小,单击页面上方的
,保存高级页面。
- 单击
,发布高级页面后,单击
,查看组件展示效果。
图13 显示效果配置和开发完成后,支持触发告警事件,将告警消息推送至高级页面monitor中显示。本示例中有两种方法触发告警事件:
- 方法一:直接触发事件验证,仅用于事件简单调测。使用该方法前,请确保WebSocketAlarmEvent事件已启用,且monitor预览页面已打开。详情操作,请参见方法一:直接触发事件验证。
- 方法二:服务编排触发事件验证。使用该方法前,请确保WebSocketAlarmEvent事件已启用,WebSocketAlarmFlow告警服务编排已激活,且monitor预览页面已打开。详情操作,请参见方法二:服务编排触发事件验证。