前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >智慧园区可视化应用数据源接口问题

智慧园区可视化应用数据源接口问题

原创
作者头像
要不要吃火锅
修改2019-12-25 18:45:58
9370
修改2019-12-25 18:45:58
举报
文章被收录于专栏:3D可视化3D可视化

DIX系统

此处 DIX 使用仅限于在 CamBuilder 中

DIX介绍

DIX是CamBuilder中用于实时对接入数据进行处理后输出到指定目的地的系统。可以用来接入Mysql、ActiveMq,syslog等数据源中存储的数据,可以在接入这些数据源存储的数据后,利用DIX对数据进行简单处理后,输出到指定的数据源,目前支持MySql、ActiveMq等。

通过访问DIX服务器进入dip配置页面,选择JavaScript,点击立即接入按钮之后进入了dip的配置页面,在该页面进行dip的属性配置、脚本配置。

配置完成上述信息之后,点击完成并保存,一个dip便生成了,然后回到数据集成页面找到对应的dip,启动即可。

数据接入

接收MySQL数据

点击JavaScript,进入配置页面,在1处填入dip名字,2处的地址为宿主机地址,默认为dip系统部署机器地址, 点击下一步,填写脚本配置。

dip名称:使用英文且见名知义(最好使用驼峰命名法)。

dip的宿主机:运行该dip的服务器ip地址,也是我们的数据处理服务器。

进入如下界面,在黑窗口的run函数中编写JavaScript脚本,将获取到的数据转换成产品需要的数据结构,最后输出。

首先编写脚本获取数据,获取数据有2种方式,第一种是主动获取,第二种是被动接收,根据实际情况选择对应的获取数据方式。而每一种方式又有多种类型。

对接MySQL我们选择主动获取方式,点击输入-主动获取,选择第一项MySQL ,相应的接入MySQL的代码会自动填写在function run() 里面 ,in 为接入语句,executes为数据处理逻辑,outs处填写数据输出语句。

如下图,在1处添加接入MySQL数据源url,username,password,在2处添加查询简单的查询sql语句,查询自己需要的数据。

代码语言:javascript
复制
function run() {
    var MysqlJdbcAdapter = Java.type("com.uinnova.di.dicom.jdbc.MysqlJdbcAdapter");
    while (true) {
        try {
        var adapter = new MysqlJdbcAdapter("jdbc:mysql://127.0.0.1:3306/database?useUnicode=true&characterEncoding=UTF-8", "root", "root");
        var data = adapter.getDataByTable("select * from ...");
        heartBeat.addInCount(data.size());
        //executes...
        //outs...
        sleep(60000);
        } catch (error) {
        logger.error("脚本执行错误:",error);
        }
    }
} 
接收ActiveMq数据

点击JavaScript,进入配置页面,在1处填入dip名字,2处的地址为宿主机地址,默认为dip系统部署机器地址, 点击下一步,填写脚本配置。

dip名称:使用英文且见名知义(最好使用驼峰命名法)。

dip的宿主机:运行该dip的服务器ip地址,也是我们的数据处理服务器。

进入如下界面,点击输入-被动接受,选择第一项 ,相应的接入ActiveMq 的代码会自动填写在function run() 里面 in 为接入语句,executes为数据处理逻辑,outs处填写数据输出语句。

如下图,在1处依次填入ActiveMq数据源的url,queue,username,pasword,最后一个参数为true,表示接受queue,为false表示接受topic,

URL: MQ的地址,格式为tcp://${ip}:${port},例如tcp://192.168.10.44:61616

对列名queue: 产品接收的指定队列noah_perfs.

用户名username: admin

密码password: admin

代码语言:javascript
复制
function run() {
    var ActivemqReceiver = Java.type("com.uinnova.di.dip.base.receiver.ActivemqReceiver");
    //url, queue, username, password, queue(true) or topic(false)
    var receiver = new ActivemqReceiver("tcp://127.0.0.1:61616", "queue", "admin", "admin", true);
    startReceiver(receiver);
    while (true) {
        try {
        var data = receiver.getData();
        if (data!=null) {
            heartBeat.addInCount(1);
            //executes...
            //outs...
        }
        } catch (error) {
        logger.error("脚本执行错误:",error);
        }
    }
} 
接收Syslog数据

点击JavaScript,进入配置页面,在1处填入dip名字,2处的地址为宿主机地址,默认为dip系统部署机器地址, 点击下一步,填写脚本配置。

dip名称:使用英文且见名知义(最好使用驼峰命名法)。

dip的宿主机:运行该dip的服务器ip地址,也是我们的数据处理服务器。

进入如下界面,在1处点击输入-被动接受,选择第一项 ,相应的接入Syslog 的代码会自动填写在function run() 里面 in 为接入语句,executes为数据处理逻辑,outs处填写数据输出语句。

IN配置是指接收syslog告警数据必须的一些信息,根据具体的需求调研填写

依次填入Syslog数据源的url,port,protocal,

主机url:部署DIP服务端程序的主机IP

端口port:与第三方厂商syslog确认的syslog数据推送端口,建议填写大于1600的未被其他服务占用的端口,

协议protocal:与第三方厂商syslog确认进行syslog数据传输协议,可选UDP或TCP

接入syslog数据库

代码语言:javascript
复制
function run() {
    var SyslogReceiver = Java.type("com.uinnova.di.dip.base.receiver.SyslogReceiver");
    //host, port, protocol(TCP or UDP)
    var receiver = new SyslogReceiver("0.0.0.0", 1501, "UDP");
    startReceiver(receiver);
    while (true) {
        try {
        var data = receiver.getData();
        logger.info("[原始数据]" + data);
        if (data != null) {
            heartBeat.addInCount(1);
            //executes...
            //outs...
        }
        } catch (error) {
        logger.error("脚本执行错误:", error);
        }
    }
} 

数据处理

处理MySQL数据

我们可以取出MySQL中的数据进行处理,将他们转为我们需要的格式,在进行输出。

在编写脚本数据转换的时候可以点击数据处理, 就会出现如下图所示的子菜单,可以根据接收到的数据类型(告警/性能)选择对应的菜单,脚本框中会出现对应的模板代码,如下图所示。

以JavaScript处理接入MySQL为例,准备数据接入。

样例数据:

代码语言:javascript
复制
[
    {
        "id": "1",
        "sceneid": "20170109153114611633853",
        "kpi_key": "temperature",
        "kpi_value": "253"
    }
] 

如下图,1处接入MySQL数据,2处对数据进行处理,可以参考下面数据处理中的性能数据映射代码,3处把处理后的数据同样输出到另外一个MySQL中去,对其他数据源的处理可以参照此处进行处理。

数据处理后,输出到MySQL数据。

DIP代码参考如下:

代码语言:javascript
复制
function run() {
var MysqlJdbcAdapter = Java.type(
    "com.uinnova.di.dicom.jdbc.MysqlJdbcAdapter"
);
while (true) {
    try {
    var adapter = new MysqlJdbcAdapter(
        "jdbc:mysql://192.168.137.128:3306/inputDB?useUnicode=true&characterEncoding=UTF-8",
        "root",
        "root"
    );
    var data = adapter.getDataByTable(
        "SELECT id,sceneid,kpi_key,kpi_value FROM c_in"
    );
    heartBeat.addInCount(data.size());
    //executes...
    //var javaListData = json2JavaList(data);
    var list = new Array();
    for (var i = 0; i < data.size(); i++) {
        var obj = new Object();
        var temp = data.get(i);
        obj.id = temp.get("id");
        obj.sceneid = temp.get("sceneid");
        obj.kpi_key = temp.get("kpi_key");
        obj.kpi_value = temp.get("kpi_value");
        logger.info("obj处理后数据" + obj.toString());
        list.push(obj);
    }
    //logger.info("listlength="+list.length);
    //outs...
    //下列为操作数据库的几个方法,传入参数sql,执行成功返回1,执行失败返回0
    //out.createTable(sql);创建表
    //out.updateTable(sql);   修改表数据
    //out.deleteTable(sql);删除表
    //out.updateTableStructure(sql); 修改表结构
    //out.selectTable(sql); 查询表
    var MysqlOutCustom = Java.type(
        "com.uinnova.di.dip.customoutmysql.MysqlOutCustom"
    );
    //url, username, passowrd
    var out = new MysqlOutCustom(
        "jdbc:mysql://192.168.137.138:3306/outputDB?useUnicode=true&characterEncoding=UTF-8",
        "root",
        "root"
    );

    //传入数据,数据库表名,主键,其他列
    out.out(
        convertJs2Java(list),
        "c_out",
        "id",
        "sceneid,kpi_key,kpi_value"
    );
    heartBeat.addOutCount(list.length);
    sleep(60000);
    } catch (error) {
    logger.error("脚本执行错误:", error);
    }
}
} 
处理activemq数据

我们可以取出输入ActiveMQ中的数据进行处理,将他们转为我们需要的格式,在进行输出。

以JavaScript处理接入ActiveMQ为例,准备数据接入。

连接配置信息:

url: tcp://{ip}:{port}

用户名: username

密码: password

对列名称:inTopicName

队列数据格式: JSON格式的字符串

数据属性说明:

参数名

必选/可选

参数位置

参数类型

参数名字

ciCode

必选

参数列表

String

配置项唯一标识

Metric

必选

参数列表

String

性能数据所属的指标名称

instance

可选

参数列表

String

性能数据所属的指标实例,若无则填英文字符下划线,"_"

Value

必选

参数列表

String

性能数据的值

timestamp

可选

参数列表

String

数据采集时间,若为空则默认当前时间,时间戳格式

样例数据:

代码语言:javascript
复制
[
    {
        "ciCode": "P211-E1-01",
        "metric": "CPU使用率",
        "instance": "cup0",
        "value": "50",
        "timestamp": "1500790703007"
    }
] 

如下图,1处接入MQ数据,2处对数据进行处理,3处把处理后的数据同样输出到另外一个MQ中去,对其他数据源的处理可以参照此处进行处理。

输出到ActiveMq

Dip代码参考示例:

代码语言:javascript
复制
function run() {
var ActivemqReceiver = Java.type(
    "com.uinnova.di.dip.base.receiver.ActivemqReceiver"
);
//url, queue, username, password, queue(true) or topic(false)
var receiver = new ActivemqReceiver(
    "tcp://192.168.137.128:8094",
    "testIn123",
    "admin",
    "admin",
    true
);
startReceiver(receiver);
while (true) {
    try {
    var data = receiver.getData();
    if (data != null) {
        heartBeat.addInCount(1);
        //executes...
        var listData = JSON.parse(data);
        var list = new Array();
        for (var i = 0; i < listData.length; i++) {
        var obj = new Object();
        var temp = listData[i];
        obj.ciCode = temp["ciCode"];
        obj.metric = temp["metric"];
        obj.value = temp["value"];
        obj.timestamp = temp["timestamp"];
        obj.unit = temp["instance"];
        list.push(obj);
        }
        //logger.info("listlength="+list.length);
        //outs...
        var mqurl =
        "failover://(tcp://192.168.137.138:8094)?randomize=false&timeout=5000&maxReconnectAttempts=-1";
        var ActiveMqOut = Java.type("com.uinnova.di.dicom.amq.AMQProducer");
        //url, 用户名,密码,topic=1或queue=2,Topic或者Queue名称,非持久化=1或持久化=2,最晚提交时间秒
        var out = ActiveMqOut.getInstance(
        mqurl,
        "admin",
        "admin",
        "1",
        "testOut123",
        2,
        1
        );
        out.sendList(convertJs2Java(list), 1);
        heartBeat.addOutCount(list.length);
    }
    } catch (error) {
    logger.error("脚本执行错误:" + error.message);
    }
}
} 
处理syslog数据

我们选择发送syslog数据,Syslog消息体

属性分隔符: |

数据定义:sceneid|kpi_key|kpi_value|value|id

样例数据:20170109153114611633853|temperature|56|1

说明:syslog在发送数据时会在数据前自动添加发送时间,主机名称等内容,需要根据产品是需要该数据进行处理,实际发送数据如下所示:Feb1909:32:16 DESKTOP-PDH3O88 20170109153114611633853 | temperature|56|12

在executes... 对输入数据进行解析,获得所需要的数据格式,输出到指定的MySQL或者ActiveMq数据源中,如下图所示

数据输出

输出到MySQL

进入如下界面,在编写脚本数据输出的时候可以点击输出, 就会出现如下图所示的子菜单,可以根据发送方式选择对应的菜单,脚本框中会出现对应的模板代码,只需要修改一下连接信息配置参数,如下图所示。

点击输出,选择第二项MySQL ,相应的接入MySQL的代码会自动填写在function run() 里面 outs处填写数据输出语句,in 为接入语句,executes为数据处理逻辑,

如图,展示了关键处理逻辑:

1、为查询MySQL数据源所得数据,

2、对数据进行处理,

3、是一些操作数据库的函数,可以对输出数据库进行创建表,更新表结构等操作,4处填写输出到目的地MySQL的配置信息。

输出ActiveMq

进入如下界面,点击 输出,选择第一项 ,相应的接入ActiveMQ 的代码会自动填写在function run() 里面 outs处填写数据输出语句,in 为接入语句,executes为数据处理逻辑。

如下图,在1处为填入参数的含义,2处为要填写参数的值。填写完成后保存dip

DIP启动

保存

填写完以上配置信息后,点击完成,进入该dip的保存界面,如下图所示。

然后点击保存会在 di主页看到接入javascript的dip已经存在,如下图所示。点击启动按钮,便可以获取数据了。

启动

配置完dip后,点击完成,保存好,回到dip主界面,显示所有的dip列表,如下图所示,点击启动,启动一个dip。

运行

刚启动时状态,已接入、已处理、待发送、已发送为0,启动一会后,如果已接入和已发送有数值,则表示dip正在传输数据。

查看日志

Dip运行后点击监控按钮,进入dip详细页面,点击日志下载,查看dip运行日志。

场景接入数据源

CamBuilder API调试环境实时数据接口接入

第三方行业应用如需驱动特定3D场景各类信息动态变化,实现实时状态可视化展示,需使用“实时数据”接口向场景内推送数据。

CamBuilder调试环境使用介绍

可以客户端中点击CB调试进入客户端离线调试环境

也可访问模模搭官网(www.3dmomoda.com),通过点击开发、在线调试进入在线调试界面。

也可以直接访问如下网址进入调试界面,下载链接: http://www.3dmomoda.com/mmdclient/script/examples/examples.html

如上图,进入调试页面后,在右侧输入自己想要调试的场景ID,点击场景预览按钮,右侧会显示场景,在左侧点击官方列表,在头顶牌子选择固定位置物体,接下来我们选择这个官方示例代码来进行场景实时接入数据的演示。

点击执行代码后,会在右侧场景中场景一个头顶牌,显示hello!我们可以利用数据接入接口接入所需要得数据,在调试代码中把数据赋值给对应的物体,达到头顶牌中的数据可以根据接入数据的变化而变化。

接入MySQL数据

进入调试环境,选择官方列表中头顶牌,选择固定位置,使用如下图所示的Ajax数据对接(支持跨域请求)。

请求参数说明:

参数名

必选/可选

参数类型

参数说明

参数示例

requestUrl

必选

String

请求接口

http://192.168.10.67:8090/ajax/getDbData

username

必选

String

数据库用户名

root

password

必选

String

数据库密码

root

dburl

必选

String

数据库地址

jdbc:mysql://192.168.137.138:3306/outputDB

sql

必选

String

查询sql

SELECT id , sceneid, kpi_key,kpi_value from scene_data WHERE id = 1

样例数据:

代码语言:javascript
复制
[
    {
        "id": "1",
        "sceneid": "20170109153114611633853",
        "kpi_key": "temperature",
        "kpi_value": "253"
    }
] 

返回结构说明:

代码语言:javascript
复制
{
    "state": true,
    "data": [
        {
            "kpi_value": "253",
            "sceneid": "20170109153114611633853",
            "kpi_key": "temperature",
            "id": "1"
        }
    ]
} 

调试代码示例:

代码语言:javascript
复制
//**********---最后保存时间:2018-12-24 13:50:09 保存人:13824---**********//
    // ---------------------------------------------------------
    // 创建牌子,跟踪位置、设置文字、改变颜色、注册事件、显示隐藏
    // ---------------------------------------------------------
    
    var ui = null;
    function init_balloon(res) {
        ui = gui.create(res);
    
        ui.trackPos(0, 2, 0);
        ui.setScale(0.3, 0.3);
        ui.setText("Button/Text", "Hello!");
    
        ui.setImageColor("Button", Color.red);
        ui.setTextColor("Button/Text", Color.yellow);
    
        ui.regButtonEvent("Button", function() {
            console.log("click ui button");
        });
    };
    
    util.download({
        "url": "http://www.3dmomoda.com/mmdclient/script/examples/demos/message_button.bundle", 
        "success": init_balloon
    });
    
    // 测试显示隐藏:
    // util.setInterval(function(){
    //  if (ui != null) {
    //      ui.show(!ui.isShow);
    //  }
    // }, 1000);
        
        
        //设置定时器
    util.setInterval(function(){
            //请求参数
    var requestUrl= "http://192.168.10.67:9090/ajax/getDbData";
    var dburl="jdbc:mysql://192.168.137.138:3306/outputDB";
    var username="root";
    var password="root";
    var sql="SELECT id , sceneid, kpi_key,kpi_value from scene_data WHERE id = 1";
    
    util.download({
            "url": requestUrl+"?dburl="+dburl+"&username="+username+"&password="+password+"&sql="+sql, 
            "type":"text", 
            "success": function(res){
                        ////打印返回结果
                        console.log(res);
                                    //json转换为table类型
                        var tableres = json.decode(res);
                                    // 取得自己需要的值
                        var kpi_value=tableres.data[0].kpi_value;
                        
                        console.log("kpi_value:"+kpi_value);
                        //把结果复制给场景中头顶牌中    
                    ui.setText("Button/Text",kpi_value);
            },
            "error":function(error){
                    console.log(error)
            }
    });
},3000); //每三秒 

调试结果,在1处是请求数据实时渲染到场景中,2处为接口地址和请求参数,3处为通过图中方法获得请求结果,请求成功后对于返回数据可以使用标准API语法解析,获取需要的指标参数,赋值到场景对象中。

接入ActiveMq数据

对于ActiveMq数据,同样采用Ajax请求获取数据源数据,支持跨域请求,请求地址可以是自己部署的ActiveMq服务器地址。

请求参数说明:

参数名

必选/可选

参数类型

参数说明

参数示例

requestUrl

必选

String

请求接口地址

http://192.168.10.67:9090/ajax/getMqData

mqurl

必选

String

ActiveMq 地址

tcp://192.168.137.138:8094

username

必选

String

ActiveMq 用户名

admin

password

必选

String

ActiveMq 密码

admin

chanelMode

可选,默认1

String

订阅类型,topic=1 queue=2

2

topicOrQueue

必选

String

待接收 topic 或queue 名字

testOut789

timeout

可选,默认3000

String

收到下一条消息时间,单位ms

3000

请求示例数据:

代码语言:javascript
复制
[
    {
        "ciCode":"P211-E1-01",
        "metric":"CPU使用率",
        "instance":"cup0",
        "value":"50",
        "timestamp":"1500790703007"
    }
] 

返回结构说明:

代码语言:javascript
复制
{
    "state": true,
    "data": "[\n {\n \"ciCode\":\"P211-E1-01\",\n \"metric\":\"CPU使用率\",\n \"instance\":\"cup0\",\n \"value\":\"50\",\n \"timestamp\":\"1500790703007\"\n }\n]\n"
} 

调试代码示例:

代码语言:javascript
复制
// ---------------------------------------------------------
// 创建牌子,跟踪位置、设置文字、改变颜色、注册事件、显示隐藏
// ---------------------------------------------------------

var ui = null;
function init_balloon(res) {
    ui = gui.create(res);
    
    ui.trackPos(0, 2, 0);
    ui.setScale(0.3, 0.3);
    ui.setText("Button/Text", "Hello!");

    ui.setImageColor("Button", Color.red);
    ui.setTextColor("Button/Text", Color.yellow);

    ui.regButtonEvent("Button", function() {
        console.log("click ui button");
    });
};

util.download({
    "url": "http://www.3dmomoda.com/mmdclient/script/examples/demos/message_button.bundle", 
    "success": init_balloon
});
// 测试显示隐藏:
// util.setInterval(function(){
//  if (ui != null) {
//      ui.show(!ui.isShow);
//  }
// }, 1000);
    //设置定时器
util.setInterval(function(){
    
        //请求参数
var requestUrl= "http://192.168.10.67:9090/ajax/getMqData"; //请求url
var mqurl="tcp://192.168.137.138:8094"; //ActiveMq 地址
var username="admin"; // ActiveMq 用户名
var password="admin";//topic=1 queue=2
var chanelMode="1";     //  topic=1 queue=2
var topicOrQueue="testOut123";//待接收 topic 或 queue 
var timeout="3000";     //设置收到下一条消息时间,单位ms,默认3000ms 
util.download({
        "url": requestUrl+"?mqurl="+mqurl+"&username="+username+"&password="+password+"&chanelMode="+chanelMode
            +"&topicOrQueue="+topicOrQueue+"&timeout="+timeout, 
        "type":"text", 
        "success": function(res){
                    ////打印返回结果
                    console.log(res);
                                //json转换为table类型
                    var tableres = json.decode(res);
                    console.log("tableres : "+tableres);
                                // 取得自己需要的值
                    var value=json.decode(tableres.data)[0].value;
            
                    console.log( "value: "+json.decode(tableres.data)[0].value);
                    //把结果复制给场景中头顶牌中    
                ui.setText("Button/Text",json.decode(tableres.data)[0].value);
        },
        "error":function(error){
                console.log(error)
        }
});
},3000); //每三秒
发布模模搭场景

代码调试完成后,点击下图1处发布按钮,复制2处地址可以在浏览器中访问,本机地址是指调试场景的机器所在地址,局域网地址是该场景变化处于同一个局域网内的用户可以访问

ThingJS调试环境接入

ThingJS调试环境使用介绍

打开客户端,点击ThingJS调试进入ThingJS调试环境

选择右侧官方列表中的数据,点击第一项数据对接。

接入MySQL数据

进入调试环境,选择官方列表中的数据,选择数据对接,使用如下图所示的Ajax数据对接(支持跨域请求)。

在1处填写接口地址,目前为CamBuilder官方提供,在2中的填写请求参数,请求参数规则如表格所示

参数名

必选/可选

参数类型

参数说明

参数示例

username

必选

String

数据库用户名

root

password

必选

String

数据库密码

root

dburl

必选

String

数据库地址

jdbc:mysql://192.168.137.138:3306/outputDB

sql

必选

String

查询sql

SELECT id , sceneid, kpi_key,kpi_value from scene_data WHERE id = 1

请求成功后对于返回结果可以使用标准JS语法解析,获取需要的指标参数,使用ThingJS特有的API语法,赋值到场景对象中。

调试代码示例:

代码语言:javascript
复制
/**
    * 说明:为模拟数据对接,ThingJS平台部署单独部署了一台服务器3dmmd.cn,模拟合作商的后端服务器
    * 端口82 为websoket 接口,优势实时性好,每秒上传一个温度数值(-10 - 30 的随机数)
    * 端口83 为ajax接口,优势服务器压力小,每次读数的时候返回一个温度数值 (-10 - 30 的随机数)
    * 本例子演示如何做ajax 和websoket数据对接
    */
    var app = new THING.App({
        url: 'models/storehouse'
    });
    // 界面组件
    var panel = new THING.widget.Panel({ name: '温度面板', hasTitle: true, });
    var dataObj = {
        t1: '21°C',
        t2: '21°C',
    };
    panel.add(dataObj, 't1').name('水温').isChangeValue(true);
    panel.add(dataObj, 't2').name('气温').isChangeValue(true);
    /********************* 以下为ajax数据对接 ********************/
    // 接收服务端数据时触发事件
    update = function (evt) {
        // ***如设置服务器的CORS,实现跨域访问。会更简单***
        // ***下例采用的不设置CORS的跨域实现方案*** 
        $.ajax({
            type: "get",
            url: "http://192.168.10.67:9090/ajax/getDbData",
            data: {
            "dburl":"jdbc:mysql://192.168.137.138:3306/outputDB?useUnicode=true&characterEncoding=UTF-8", //mysql地址
                "username":"root",  //mysql 用户名
                "password":"root",  //mysql 密码
                "sql":"select id,sceneid,kpi_key,kpi_value from scene_data where id=1",//设置收到下一条消息时间,单位ms,默认3000ms
                },
            dataType: "jsonp",
            jsonpCallback: "callback",
            success: function (d) {
                console.log('拉取数据:' +d);
                console.log('拉取数据:' + JSON.stringify(d));
                
                console.log('拉取数据:' +  d.data[0].kpi_value);
                // ***将获得的数据赋值到场景中***
                dataObj.t2 = d.data[0].kpi_value + '°C';
            }
        });
    };
    //每1秒更新一个数据
    setInterval(update, 5000);
接入ActiveMq数据

进入调试环境,选择官方列表中的数据,选择数据对接,使用如下图所示的ajax数据对接(支持跨域请求)。

目前对接ActiveMq支持使用ajax方式,在1处添加请求接口地址,2处对返回数据进行解析,接口格式定义如下

调试接口请求地址: http://192.168.10.67:9090/ajax/getMqData

如进行网络部署则为服务器实际IP及端口。

请求参数

必选/可选

参数类型

参数说明

参数示例

mqurl

必选

String

Mq地址

tcp://192.168.137.138:8094

username

必选

Int

ActiveMq 用户名

9090

password

必选

String

ActiveMq 密码

ws

chanelMode

必选

String

topic=1 queue=2

1

topicOrQueue

必须

String

订阅topic或queue名字

testOut123

timeout

必须

String

设置收到下一条消息时间,单位ms,默认3000ms

3000

请求数据示例:

代码语言:javascript
复制
[
    {
        "ciCode": "P211-E1-01",
        "metric": "CPU使用率",
        "instance": "cup0",
        "value": "50",
        "timestamp": "1500790703007"
    }
] 

返回数据示例:

[{"kpi_value":"251","sceneid":"20170109153114611633853","kpi_key":"temperature","id":"1"}]

调试代码示例;

1、ajax请求数据:

代码语言:javascript
复制
/**
* 说明:为模拟数据对接,ThingJS平台部署单独部署了一台服务器3dmmd.cn,模拟合作商的后端服务器
* 端口82 为websoket 接口,优势实时性好,每秒上传一个温度数值(-10 - 30 的随机数)
* 端口83 为ajax接口,优势服务器压力小,每次读数的时候返回一个温度数值 (-10 - 30 的随机数)
* 本例子演示如何做ajax 和websoket数据对接
**/
var app = new THING.App({
    url: 'models/storehouse'
});
// 界面组件
var panel = new THING.widget.Panel({ name: '温度面板', hasTitle: true, });
var dataObj = {
    t1: '21°C',
    t2: '21°C',
};
panel.add(dataObj, 't1').name('水温').isChangeValue(true);
panel.add(dataObj, 't2').name('气温').isChangeValue(true);


/********************* 以下为ajax数据对接 ********************/
// 接收服务端数据时触发事件
update = function (evt) {
    // ***如设置服务器的CORS,实现跨域访问。会更简单***
    // ***下例采用的不设置CORS的跨域实现方案*** 
    // 服务器返回的数据格式为 callback({"state":"success","data":29})
    $.ajax({
        type: "get",
        url: "http://192.168.10.67:9090/ajax/getMqData",

        data: {
            "mqurl":"tcp://192.168.137.138:8094", //mq地址
            "username":"admin",  //ActiveMq 用户名
            "password":"admin",  //ActiveMq 密码
            "chanelMode":"1",  //topic=1 queue=2
            "topicOrQueue":"testOut123",// 订阅tppic名字
            "timeout":"3000",//设置收到下一条消息时间,单位ms,默认3000ms
            },
        dataType: "jsonp",
        jsonpCallback: "callback",
        success: function (d) {
            console.log('拉取数据:' +d);
            console.log('拉取数据:' + JSON.stringify(d));
            console.log('拉取数据:' +  JSON.parse(d.data)[0].value);
            // ***将获得的数据赋值到场景中***
            dataObj.t2 =JSON.parse(d.data)[0].value+ '°C';
        }
    });
};
//每1秒更新一个数据
setInterval(update, 6000);

ws请求数据:

代码语言:javascript
复制
/**
* 说明:为模拟数据对接,ThingJS平台部署单独部署了一台服务器3dmmd.cn,模拟合作商的后端服务器
* 端口82 为websoket 接口,优势实时性好,每秒上传一个温度数值(-10 - 30 的随机数)
* 端口83 为ajax接口,优势服务器压力小,每次读数的时候返回一个温度数值 (-10 - 30 的随机数)
* 本例子演示如何做ajax 和websoket数据对接
*/
var app = new THING.App({
    url: 'models/storehouse'
});
// 界面组件
var panel = new THING.widget.Panel({ name: '温度面板', hasTitle: true, });
var dataObj = {
    t1: '21°C',
    t2: '21°C',
};
panel.add(dataObj, 't1').name('水温').isChangeValue(true);
panel.add(dataObj, 't2').name('气温').isChangeValue(true);
/********************* 以下为websoket数据对接 ********************/
// 对接自有websoket服务器
var ws = new WebSocket('ws://192.168.10.67:9090/ws/testOut789');
// 建立 web socket 连接成功触发事件
ws.onopen = function () {
    console.log("websoket服务器连接成功...");
};
// 接收服务端数据时触发事件
ws.onmessage = function (evt) {
    console.log(evt+'');
    console.log("websoket接收数据:" + toString(evt));
    var s =JSON.stringify(evt.data)
    console.log('拉取数据ss:' + s);
            console.log('拉取数据:' + JSON.parse(evt.data)[0].kpi_value );
    // ***将获得的数据赋值到场景中***
    dataObj.t1 = JSON.parse(evt.data)[0].kpi_value + '°C';
};   
发布ThingJS场景

代码调试完成后,点击下图1处演示按钮,2处电脑演示会弹出新的浏览器窗口,复制下图3处地址栏中的url地址给其他人就可以看到场景中的数据变化

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • DIX系统
    • DIX介绍
      • 数据接入
        • 接收MySQL数据
        • 接收ActiveMq数据
        • 接收Syslog数据
      • 数据处理
        • 处理MySQL数据
        • 处理activemq数据
        • 处理syslog数据
      • 数据输出
        • 输出到MySQL
        • 输出ActiveMq
      • DIP启动
        • 保存
        • 启动
        • 运行
        • 查看日志
    • 场景接入数据源
      • CamBuilder API调试环境实时数据接口接入
        • CamBuilder调试环境使用介绍
        • 接入MySQL数据
        • 接入ActiveMq数据
        • 发布模模搭场景
      • ThingJS调试环境接入
        • ThingJS调试环境使用介绍
        • 接入MySQL数据
        • 接入ActiveMq数据
        • 发布ThingJS场景
    相关产品与服务
    云数据库 SQL Server
    腾讯云数据库 SQL Server (TencentDB for SQL Server)是业界最常用的商用数据库之一,对基于 Windows 架构的应用程序具有完美的支持。TencentDB for SQL Server 拥有微软正版授权,可持续为用户提供最新的功能,避免未授权使用软件的风险。具有即开即用、稳定可靠、安全运行、弹性扩缩等特点。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档