目录 |
---|
1 消息订阅控件简介
利用DWF的服务器端脚本可以在后端(服务器)运行自己的程序,此时DWF的前端和后端之间没有任何方式进行联系,消息订阅控件可以帮助前后端脚本之间建立起实时联系,从而有助于帮助用户通过脚本对后端发生的情况作出相应的处理,使用消息订阅控件的场合包括:
...
第二、对于超出增删改以外的自定义的后端逻辑,使用消息订阅控件可以允许用户在后端脚本中建立个性化的通讯,从而实现个性化的前端动态响应。
下面,介绍消息订阅控件的基本概念和用法。
2 基本概念
2.1 消息订阅模式
当消息订阅控件被拖入表单中以后,有两种针对服务器端发生事件的订阅模式:
- 类事件订阅模式:针对目标类的内置系统事件,包括:对象的创建、删除和修改的事件。
- 当选择类事件订阅时,触发类型的下拉框将会显示出可订阅的后端事件
- 脚本事件订阅模式:针对用户自行实现的服务器端脚本配套的事件,包含结束事件和进度事件。
- 当用户选择脚本事件订阅模式的时候,需要指定产生事件的后处理操作名。
- 如果用户选择脚本事件订阅开放式,表明双向通讯的内容是自行约定的,此时需要设定触发后端的操作类型
- 自动启动:订阅通道的建立默认在打开表单时会自动完成,但是用户可以将“自动启动”开关关闭。
图-消息订阅的类型设置界面
2.2 订阅控件的启动停止
默认情况下,订阅控件所在表单启动的时候会自动启动消息订阅,如果选择手动启动消息订阅,前端脚本可以使用如下的函数开始或停止订阅:
...
- addin.start(obj):
- 类事件订阅模式:开始监听类对象在后端的各类变化,包括:增删改对象中的一种。
- 脚本事件订阅模式:调用这个函数将会启动后端脚本开始监听,启动的时候可以传入一个对象作为辅助参数。
- addin.stop():
- 类事件订阅模式:停止监听类对象在后端的各类变化,包括:增删改对象中的一种。
- 脚本事件订阅模式:向后端程序发出停止消息,后端程序收到消息以后自行采取措施停止执行。
- addin.pause():
- 类事件订阅模式:暂停监听类对象在后端的各类变化,包括:增删改对象中的一种。
- 脚本事件订阅模式:向后端程序发出停止消息,后端程序收到消息以后自行采取措施暂停执行。
- addin.resume():
- 类事件订阅模式:恢复监听类对象在后端的各类变化,包括:增删改对象中的一种。
- 向后端程序发出停止消息,后端程序收到消息以后自行采取措施恢复执行。
2.3 基于消息订阅的双向通讯
在开启订阅的双向通讯通道之后,消息订阅控件不仅能帮助前端感知后端的变化,脚本的开发者也可以利用订阅控件在前后端发送或者接受消息,从而实现快速通讯。
前端消息发送和接收
在前端脚本中,可以使用this.getAddinById()获得订阅插件的引用,之后使用sendMsg(obj)可以向正在运行的后端发送消息。
...
代码块 | ||
---|---|---|
| ||
if (this.websocket.socketId){ var msg = this.webSocket.getMsg(); this.logger.info(msg.toString()); } |
后端消息发送和接收
同样的道理,后端向前端发送消息的过程可以利用this.websocket.sendMsg(obj)实现,向前端的消息发送,此时会触发订阅控件的阶段消息到达事件。
...
代码块 |
---|
var addin = this.getAddinById("控件ID"); var msg = addin.getMsg(); console.log(msg); |
2.4 消息订阅内的事件感知
开始订阅以后,如何在前端得到后端事件发生的消息并进行处理呢?在消息订阅控件自身控件事件有两种内置的前端事件一个是结束消息到达事件,一个是阶段消息到达事件。
...
同样的,在脚本中也可以利用getMsg()得到最近的消息。
3 举例:使用消息订阅实现动态仪表盘
在了解了消息订阅控件的用法以后,接下来介绍一个案例,用自定义控件创建一个仪表盘,并且从服务器端收集数据控制前端刷新仪表盘的读数,效果如下所示:
...
代码块 |
---|
option = { ... } let that = this; setInterval(function (){ var addin = that.getAddinById("WatchMessage1"); if (addin){ var msg = addin.getMsg(); if (msg){ option.series[0].data[0].value = msg.data.speed;//speed option.series[1].data[0].value = msg.data.rpm;//rpm option.series[2].data[0].value = msg.data.oil;//oil option.series[3].data[0].value = msg.data.water;//water myChart.setOption(option, true); } } },2000); |
最后,启动的效果如下所示:
4 小结
本章主要介绍了订阅控件的使用方法,消息订阅控件可以在后端脚本和前端界面之间建立起一个通道,使得前端能及时了解后端的运行状态,订阅控件提供了下面的支持:
...