# 使用WebSocket为高级页面组件绑定数据 #### 操作场景 开发高级页面时，如果需要消息主动推送、高实时数据展示，您需要使用WebSocket来实现后台数据调用。例如，园区系统在日常运行中，常监测到人员异常或故障信息，需要以告警显示的形式显示在前端界面中。为简化用例，采用手工输入消息数据的方式来模拟后台采集告警数据，通过服务编排触发告警事件，并将告警信息通过WebSocket推送至前端高级页面显示。 图1WebSocket调用示例 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002142388096.png "点击放大") WebSocket是一种HTML5提供的网络传输协议。WebSocket协议支持Web浏览器，使得客户端和服务端之间可以创建长久连接并进行双向数据传输，即服务端可以主动向客户端推送数据，客户端也可以主动向服务端发送信息，是服务端推送技术的一种。 低代码平台提供了WebSocket，用户可以通过触发消息事件，将后台消息以json对象的形式，通过平台的WebSocket服务端发送，所有订阅了该事件的前台WebSocket客户端都会获得该消息数据。WebSocket客户端订阅服务地址如下： ``` wss://${location.host}/websocket/v1.0/component/listener?tenantId=${tenantId}&event=${eventName1}&event=${eventName2}… ``` 表1参数说明 | 参数 | 说明 | |:---|:---| | tenantId | 租户ID，可通过${tenantId}自动获取，也可以登录环境配置，在"系统设置 \> 公司信息"中获取，详情请参见[设置华为云Astro轻应用账号的公司信息](https://support.huaweicloud.com/usermanual-astrozero/astrozero_06_2012.html)。 | | event | 订阅事件的名称，进入待订阅事件的详情页，可获取事件的名称。 event参数可以有多个值，即WebSocket客户端可订阅多个事件。 | **创建消息事件，可以通过服务编排、工作流或外部系统订阅该事件，也可以通过WebSocket订阅。而消息事件通常通过服务编排、数据接入等进行触发。** 在前端高级页面组件开发中，用户可通过以下方式创建WebSocket对象。参数url为需要连接的地址，即客户端订阅地址。 ``` var ws= new WebSocket(url); ``` 实例化对象可监听以下事件，更多WebSocket对象属性和方法介绍，请参见[WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket)。 表2WebSocket对象可监听事件 | 事件 | 说明 | |:---|:---| | ws.onopen | 连接建立时触发。 | | ws.onmessage | 客户端接收服务端数据时触发。 | | ws.onerror | 通信发生错误时触发。 | | ws.onclose | 连接关闭时触发。 | #### 步骤1 创建WebSocketAlarmEvent告警事件 1. 创建事件。 1. 参考[登录华为云Astro轻应用应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9004.html)中操作，登录应用设计器。 2. 在左侧导航栏中，选择"数据"。 3. 单击事件后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936100373.png)，进入添加事件页面。 4. 选择"创建新事件"，输入标签"WebSocketAlarmEvent"，单击"添加"。 单击名称对应的输入框，系统会根据标签自动生成名称，系统实际创建的事件名称为"*命名空间* __WebSocketAlarmEvent*__e*"。 图2添加WebSocketAlarmEvent事件 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001976832806.png "点击放大") 2. 在事件详情页面，选择"自定义参数"页签，单击"新建"。 3. 设置标签、名称和字段类型，单击"保存"，添加事件自定义参数AlarmTitle。 图3添加事件自定义参数 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001976993038.png "点击放大") 4. 重复[3]中操作，创建事件自定义参数AlarmContent、AlarmDate。 表3事件自定义参数说明 | 标签 | 名称 | 字段类型 | |:---|:---|:---| | AlarmContent | 单击名称对应的输入框，系统根据标签自动生成名称。 | 文本 | | AlarmDate | 单击名称对应的输入框，系统根据标签自动生成名称。 | 日期/时间 | 5. 启用告警事件。 1. 在事件详情页面，选择"基本信息"页签。 2. 单击页面右上方的"启用"，启用该事件。 启用成功后，"启用"按钮会变为"禁用"按钮，同时"是否启用"标签变为![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894140804.png)状态。 消息事件只有启用成功后，该事件在服务编排或WebSocket中，才会有效。事件启用后，不可编辑，如果需要对事件进行参数修改，请先单击"基本信息"下的"禁用"按钮，禁用该事件。 图4启用告警事件 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001961324297.png "点击放大") #### 步骤2 创建WebSocketAlarmFlow告警服务编排 创建WebSocketAlarmFlow告警编排以触发事件，并在服务编排中配置全局变量和系统（日期/时间）变量为事件传递参数。 如果想快速了解和验证WebSocket使用，可不必创建WebSocketAlarmFlow告警服务编排，采用消息事件的测试功能进行简单验证。您可以直接跳过该步骤，直接执行[步骤3 开发alarmDisplayWidget告警展示组件]，并在[方法一：直接触发事件验证]中采用方法1（直接触发事件验证）进行效果验证。 1. 创建编排。 1. 参考[登录华为云Astro轻应用应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9004.html)中操作，登录应用设计器。 2. 在左侧导航栏中，选择"逻辑"。 3. 单击编排的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894140828.png)，进入添加服务编排。 4. 选择"创建一个新的服务编排"，输入标签"WebSocketAlarmFlow"，单击"添加"。 单击名称对应的输入框，系统会根据标签自动生成名称。 图5创建服务编排WebSocketAlarmFlow ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001976993442.png "点击放大") 2. 在服务编排画布左侧，单击"基本"，将"发送事件"图元拖入画布中。 图6拖入"发送事件"图元 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894300820.png "点击放大") 3. 添加服务编排变量。 1. 选中"发送事件"图元，单击画布右侧![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894300836.png)。 2. 单击"全局上下文"，进入上下文页面。 3. 单击"变量"后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894140908.png)，添加[表4]中变量。 图7配置全局变量 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894140852.png "点击放大") 表4告警服务编排的变量 | 名称 | 数据类型 | |:---|:---| | AlarmTitle | 文本 | | AlarmContent | 文本 | 4. 在"发送事件"图元中，配置[1]中创建的事件*命名空间* __WebSocketAlarmEvent__e（需替换为用户实际创建的事件名称）。 参考下图配置输入参数，通过全局变量AlarmTitle和AlarmContent及系统变量$Flow.CurrentDateTime为事件传参。 图8事件图元的配置 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894140736.png "点击放大") 5. 连接所有图元。 图9连接图元 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894140824.png "点击放大") 6. 选中"开始"图元，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894140872.png)，参考下图配置服务编排的入参。 入参是从全局上下文的变量中拖入，告警服务编排的入参有AlarmTitle和AlarmContent两个。 图10配置入参 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894140756.png "点击放大") 7. 单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936100365.png)，保存服务编排。 8. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936100425.png)，启用服务编排。 服务编排只有启用后，才会生效。服务编排在启用后，不可编辑，如果需要对其中的图元或参数进行修改，请先单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894140912.png)，禁用该服务编排。 #### 步骤3 开发alarmDisplayWidget告警展示组件 您可以按照如下步骤，开发alarmDisplayWidget告警展示组件，也可以直接单击[alarmDisplayWidget.zip](https://obs-for-bj4-gongyouyun-update.obs.cn-north-4.myhuaweicloud.com/obs/deploy/alarmDisplayWidgetVue3.zip)，获取示例开发包。 1. 下载组件模板widgetVue3Template。 1. 登录[华为云Astro轻应用服务控制台](https://console.huaweicloud.com/appcube/#/home)，单击"进入首页"，进入应用开发页面。 2. 在页面左上方单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001919902948.png)，选择"环境管理 \> 环境配置"，进入环境配置。 3. 在顶部菜单栏中，选择"维护"。 4. 在左侧导航栏中，选择"全局元素 \> 页面资产管理 \> 组件模板"。 5. 单击组件模板widgetVue3Template，进入模板详情页。 6. 单击"下载"，设置名称为alarmDisplayWidget，单击"保存"。 图11设置组件名称 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894300800.png "点击放大") 2. 解压已下载的"alarmDisplayWidget.zip"，解压后在"alarmDisplayWidget.js"中，通过定义变量"var ws = new WebSocket(url);"，打开一个WebSocket，订阅WebSocketAlarmEvent告警事件。 采用ws.onmessage监听WebSocketAlarmEvent告警事件消息，对json数据解析，存入ListData中。为了方便观察组件，为ListData设定初始值，请将原先代码中如下代码进行替换，注意不是替换全部代码。 ``` Vue.createApp({ data() { return { name: widgetProperties.param || "Bingo Studio" } } }).mount($("#widgetVue3Template",elem)[0]); ``` 替换的代码如下，其中"命名空间__WebSocketAlarmEvent__e"需要修改为在[1]中创建的告警事件的名称。 ``` var vm = Vue.createApp({ data(){ return { 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() { 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]); ``` 3. 在"alarmDisplayWidget.ftl"中定义渲染页面，将告警信息的title、content和date显示，并加入分割线。 ```
``` 4. 在"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; } ``` 5. 在packageinfo.json中，定义组件初始宽度"width"和初始高度"height"。 ``` { "widgetApi": [ { "name": "alarmDisplayWidget" } ], "localFileBasePath": "", "width": "1000", "height": "600", "requires": [ { "name": "global_Vue3", "version": "3.3.4" } ] } ``` 6. 重新打包组件，包名为"alarmDisplayWidget.zip"。 #### 步骤4 上传alarmDisplayWidget告警展示组件并创建高级页面 1. 上传alarmDisplayWidget告警展示组件。 1. 登录[华为云Astro轻应用服务控制台](https://console.huaweicloud.com/appcube/#/home)，单击"进入首页"，进入应用开发页面。 2. 单击页面左上角的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894140808.png)，选择"环境管理 \> 环境配置"，进入环境配置。 3. 在顶部菜单栏中，选择"维护"。 4. 在左侧导航栏中，选择"全局元素 \> 页面资产管理 \> 组件"。 5. 单击"提交新组件"，进入提交新组件页面。 6. 单击"请选择源文件(.zip)"，选择商品列表组件包alarmDisplayWidget.zip，输入发行说明为"alarmDisplayWidget"，单击"提交"。 2. 创建monitor高级页面。 1. 在应用设计器中，单击左侧导航栏中的"界面"。 2. 单击高级页面后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936100349.png)，设置页面的名称和标题为monitor，单击"添加"。 3. 在高级页面左上方，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936100381.png)，从"全部 \> 自定义"中，拖拽alarmDisplayWidget至右侧画布中。 图12拖拽alarmDisplayWidget至右侧画布中 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936100357.png "点击放大") 4. 调节组件位置和大小，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936100465.png)，保存高级页面。 5. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894300840.png)，发布高级页面后，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894140812.png)，查看组件展示效果。 配置和开发完成后，支持触发告警事件，将告警消息推送至高级页面monitor中显示。本示例中有两种方法触发告警事件： - 方法一：直接触发事件验证，仅用于事件简单调测。使用该方法前，请确保WebSocketAlarmEvent事件已启用，且monitor预览页面已打开。详情操作，请参见[方法一：直接触发事件验证]。 - 方法二：服务编排触发事件验证。使用该方法前，请确保WebSocketAlarmEvent事件已启用，WebSocketAlarmFlow告警服务编排已激活，且monitor预览页面已打开。详情操作，请参见[方法二：服务编排触发事件验证]。 #### 方法一：直接触发事件验证 1. 在"数据 \> 事件"中，打开WebSocketAlarmEvent事件。 图13打开事件 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002013518441.png) 2. 在"基本信息"中，单击"发送事件"。 3. 在"发送事件测试"页面中，输入参数信息（AlarmDate会自动获取系统日期时间，也可手工编辑修改），单击"发送"。 ``` { "AlarmTitle": "设备告警", "AlarmContent":"设备C1 本地数据库出错", "AlarmDate":"2020-12-12 17:09:20" } ``` 4. 切换到monitor预览页面，可观察到monitor页面已接收并显示该告警消息。 图14直接触发事件验证效果图 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894300804.png "点击放大") #### 方法二：服务编排触发事件验证 1. 在"逻辑 \> 编排"中，打开WebSocketAlarmFlow服务编排。 图15进入服务编排 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001976999298.png) 2. 在服务编排页面右上角，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894300816.png)，运行该服务编排。 3. 在弹出页面的输入参数中，输入如下AlarmTitle和AlarmContent参数值，单击"运行"。 ``` "AlarmTitle": "设备告警", "AlarmContent":"设备C1 本地数据库出错" ``` 4. 切换到monitor预览页面，可观察到monitor页面已接收并显示该告警消息。 图16服务编发触发事件验证效果图 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936100385.png "点击放大")