# 如何使用WebSocket #### 使用说明 开发高级页面时，如果需要消息主动推送、高实时数据展示，您需要使用WebSocket来实现后台数据调用。 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}自动获取，也可以登录经典版应用开发环境管理中心，在"配置 \> 系统设置 \> 公司信息"中获取，如[图1]。 | | event | 订阅事件的名称，可进入要订阅的事件的详情页，获取事件名称。 event参数可有多个值，即WebSocket客户端可订阅多个事件。 | 图1获取租户ID ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287473.png) ![](https://support.huaweicloud.com/usermanual-astrozero/public_sys-resources/note_3.0-zh-cn.png) 创建消息事件，既可通过服务编排、BP或者外部系统订阅该事件，也可通过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 | 连接关闭时触发。 | #### 场景描述 园区系统在日常运行中常监测到人员异常或故障信息，需要以告警显示的形式显示在前端界面中。为简化用例，采用手工输入消息数据的方式来模拟后台采集告警数据，通过服务编排触发告警事件，并将告警信息通过WebSocket推送至前端高级页面显示。 图2WebSocket调用示例 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933048380.png "点击放大") #### 步骤1 创建WebSocketAlarmEvent告警事件 1. 创建事件。 1. 参考[登录经典应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_5025.html)中操作，登录经典版应用设计器。 2. 将鼠标放在应用的Logic文件夹上，单击加号，选择"事件"。 3. 单击事件后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888956.png)，进入添加事件页面。 4. 选择"创建新事件"，输入标签和名称"WebSocketAlarmEvent"，单击"添加"。 单击名称对应的输入框，系统会根据标签自动生成名称。系统实际创建的事件名称为"*CNAME* __WebSocketAlarmEvent*__e*"，其中"CNAME__"为租户命名空间namespace，"__e"后缀代表是自定义事件。 图3添加WebSocketAlarmEvent事件 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933048332.png "点击放大") 2. 在事件详情页面，选择"自定义参数"页签，单击"新建"。 3. 设置标签、名称和字段类型，单击"保存"，添加事件自定义参数AlarmTitle。 图4添加事件自定义参数 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888972.png "点击放大") 4. 重复[3]中操作，创建事件自定义参数AlarmContent、AlarmDate。 表3事件自定义参数说明 | 标签 | 名称 | 字段类型 | |:---|:---|:---| | AlarmContent | 单击名称对应的输入框，系统根据标签自动生成名称。 | 文本 | | AlarmDate | 单击名称对应的输入框，系统根据标签自动生成名称。 | 日期/时间 | 5. 启用告警事件。 1. 在事件详情页面，选择"基本信息"页签。 2. 单击页面右上方的"启用"，启用该事件。 启用成功后，"启用"按钮会变为"禁用"按钮，同时"是否启用"标签变为![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932889000.png)状态。 ![](https://support.huaweicloud.com/usermanual-astrozero/public_sys-resources/note_3.0-zh-cn.png) 消息事件只有启用成功后，该事件在服务编排或WebSocket中，才会有效。事件启用后，不可编辑，若需要对事件进行参数修改，请先单击"基本信息"下的"禁用"按钮，禁用该事件。 图5启用告警事件 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287445.png "点击放大") #### 步骤2 创建WebSocketAlarmFlow告警服务编排 创建WebSocketAlarmFlow告警编排以触发事件，并在服务编排中配置全局变量和系统（日期/时间）变量为事件传递参数。 ![](https://support.huaweicloud.com/usermanual-astrozero/public_sys-resources/note_3.0-zh-cn.png) 如果想快速了解和验证WebSocket使用，可不必创建WebSocketAlarmFlow告警服务编排，采用消息事件的测试功能进行简单验证。您可以直接跳过该步骤，直接执行[3]，并采用[方法一：直接触发事件验证]进行效果验证。 1. 创建编排。 1. 参考[登录经典应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_5025.html)中操作，登录经典版应用设计器。 2. 将鼠标放在应用的Logic文件夹上，单击加号，选择"服务编排"。 3. 选择"创建一个新的服务编排"，输入标签"WebSocketAlarmFlow"，单击"添加"。 单击名称对应的输入框，系统会根据标签自动生成名称。 图6创建服务编排WebSocketAlarmFlow ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888992.png "点击放大") 2. 在服务编排画布左侧，单击"基本"，将"发送事件"图元拖入画布中。 图7拖入"发送事件"图元 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888960.png "点击放大") 3. 添加添服务编排变量。 1. 选中"发送事件"图元，单击画布右侧![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287513.png)。 2. 单击"全局上下文"，进入上下文页面。 3. 单击"变量"后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933048336.png)，添加[表4]中变量。 图8配置全局变量 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287489.png "点击放大") 表4告警服务编排的变量 | 名称 | 数据类型 | |:---|:---| | AlarmTitle | 文本 | | AlarmContent | 文本 | 4. 在"发送事件"图元中，配置[1]中创建的事件CNAME__WebSocketAlarmEvent__e（需替换为用户实际创建的事件名称）。 参考下图配置输入参数，通过全局变量AlarmTitle和AlarmContent及系统变量$Flow.CurrentDateTime为事件传参。 图9事件图元的配置 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287469.png "点击放大") 5. 连接所有图元。 图10连接图元 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888928.png "点击放大") 6. 选中"开始"图元，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127641.png)，参考下图配置服务编排的入参。 入参是从全局上下文的变量中拖入，告警服务编排的入参有AlarmTitle和AlarmContent两个。 图11配置入参 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127665.png "点击放大") 7. 单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287497.png)，保存服务编排。 8. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888968.png)，启用服务编排。 服务编排只有启用后，才会生效。服务编排在启用后，不可编辑，若需要对其中的图元或参数进行修改，请先单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888988.png)，禁用该服务编排。 #### 步骤3 开发alarmDisplayWidget告警展示组件 您可以按照如下步骤，开发alarmDisplayWidget告警展示组件，也可以直接单击[alarmDisplayWidget.zip](https://obs-for-bj4-gongyouyun-update.obs.cn-north-4.myhuaweicloud.com/obs/deploy/alarmDisplayWidget.zip)，获取示例开发包。 1. 下载组件模板widgetVueTemplate。 1. 参考[登录经典应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_5025.html)中操作，进入经典应用设计器。 2. 在左侧导航栏中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933048356.png)，选择"高级页面 \> 组件模板"。 3. 单击组件模板widgetVueTemplate，进入模板详情页。 图12进入模板详情页 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287501.png "点击放大") 4. 单击"下载"，设置名称为alarmDisplayWidget，单击"保存"。 图13设置组件名称 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127637.png) 2. 解压已下载的"alarmDisplayWidget.zip"，解压后在"alarmDisplayWidget.js"中，通过定义变量"var ws = new WebSocket(url);"，打开一个WebSocket，订阅WebSocketAlarmEvent告警事件。 采用ws.onmessage监听WebSocketAlarmEvent告警事件消息，对json数据解析，存入ListData中。为了方便观察组件，为ListData设定初始值，请将原先代码中如下代码进行替换，注意不是替换全部代码。 ``` var vm = new Vue({ el: $("#widgetVueTemplate",elem)[0], data:{ name: "Bingo Studio" } }); ``` 替换的代码如下，其中"CNAME__WebSocketAlarmEvent__e"需要修改为在[1]中创建的告警事件的名称。 ``` var vm = new Vue({ el: $("#widgetVueTemplate",elem)[0], 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=CNAME__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(); } } }); ``` 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_Vue", "version": "100.1" } ] } ``` 6. 重新打包组件，包名为"alarmDisplayWidget.zip"。 #### 步骤4 上传alarmDisplayWidget告警展示组件并创建高级页面 1. 上传alarmDisplayWidget告警展示组件。 1. 参考[登录经典应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_5025.html)中操作，进入经典应用设计器。 2. 在左侧导航栏中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932889004.png)，选择"高级页面 \> 组件"。 3. 单击"提交新组件"，进入提交新组件页面。 4. 单击"请选择源文件(.zip)"，选择商品列表组件包alarmDisplayWidget.zip，输入发行说明为"alarmDisplayWidget"，单击"提交"。 2. 创建monitor高级页面。 1. 在经典版应用设计器中，鼠标放在应用的Page文件夹上，单击加号，选择"高级页面"。 2. 设置页面的名称和标题为monitor，单击"添加"。 3. 在高级页面左上方，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287509.png)，从"全部 \> 自定义"中，拖拽alarmDisplayWidget至右侧画布中。 图14拖拽alarmDisplayWidget至右侧画布中 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287429.png "点击放大") 4. 调节组件位置和大小，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287485.png)，保存高级页面。 5. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888940.png)，发布高级页面后，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888964.png)，查看组件展示效果。 图15显示效果 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888976.png "点击放大") 配置和开发完成后，支持触发告警事件，将告警消息推送至高级页面monitor中显示。本示例中有两种方法触发告警事件： - 方法一：直接触发事件验证，仅用于事件简单调测。使用该方法前，请确保WebSocketAlarmEvent事件已启用，且monitor预览页面已打开。详情操作，请参见[方法一：直接触发事件验证]。 - 方法二：服务编排触发事件验证。使用该方法前，请确保WebSocketAlarmEvent事件已启用，WebSocketAlarmFlow告警服务编排已激活，且monitor预览页面已打开。详情操作，请参见[方法二：服务编排触发事件验证]。 #### 方法一：直接触发事件验证 1. 在Logic文件夹中，打开WebSocketAlarmEvent事件。 2. 在"基本信息"中，单击"发送事件"。 图16发送事件 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933048316.png "点击放大") 3. 在"发送事件测试"页面中，输入参数信息（AlarmDate会自动获取系统日期时间，也可手工编辑修改），单击"发送"。 ``` { "AlarmTitle": "设备告警", "AlarmContent":"设备C1 本地数据库出错", "AlarmDate":"2020-12-12 17:09:20" } ``` 图17测试发送 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932889008.png) 4. 切换到monitor预览页面，可观察到monitor页面已接收并显示该告警消息。 图18直接触发事件验证效果图 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287517.png "点击放大") #### 方法二：服务编排触发事件验证 1. 在Logic文件夹中，打开WebSocketAlarmFlow服务编排。 2. 在服务编排页面右上角，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127693.png)，运行该服务编排。 3. 在弹出页面的输入参数中，输入如下AlarmTitle和AlarmContent参数值，单击"运行"。 ``` "AlarmTitle": "设备告警", "AlarmContent":"设备C1 本地数据库出错" ``` 图19服务编发触发事件验证 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287477.png "点击放大") 4. 切换到monitor预览页面，可观察到monitor页面已接收并显示该告警消息。 图20服务编发触发事件验证效果图 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888984.png "点击放大")