3. 对接数据

ThingJS PaaS 平台支持以下四种数据对接方式，可与第三方物联网系统进行通信（数据传输）。

数据对接_Ajax

Ajax 的本质是通过浏览器的 XMLHttpRequest 对象向服务器发送 HTTP 请求，得到服务器返回的数据后进行数据处理的数据交互方式。

对于原生的 Ajax 来说，包括以下几个步骤：

1.创建 XMLHttpRequest 实例；

2.发出 HTTP 请求；

3.接收服务器传回的数据；

4.处理数据，更新页面。

在 ThingJS 在线开发环境中，内置了 JQuery 库，可以直接使用 JQurey 封装的 Ajax 方法进行数据对接，例如：

$.ajax({
    type: "get",
    url: "https://3dmmd.cn/getMonitorDataById",
    data: { "id":1605 },
    dataType: "json", // 返回的数据类型 json
    success: function (d) {
console.log(d.data)
    }
});

下图所示为 Ajax 数据对接示例。

数据对接_JSONP

JSONP 的基本原理就是利用 script 标签没有跨域限制的特点，通过 script 标签向服务器请求数据；服务器收到请求后，将数据放在一个指定名字的回调函数里返回给浏览器。

由于 JQuery 的 Ajax 请求对 JSONP 进行了封装，因此我们可以直接使用相关方法请求 JSONP 数据，例如：

$.ajax({
    type: "get",
    url: "https://3dmmd.cn/monitoringData",
    data: { "id": 1605 },
    dataType: "jsonp", // 返回的数据类型，设置为JSONP方式
    jsonpCallback: "callback", // 设置回调函数名 与返回数据的 函数名一致
    success: function (d) {
console.log(d.data)
    }
});

注意事项 > JSONP 仅支持 GET 请求，使用 JQuery 的 Ajax 方法 发起多个 jsonp 请求时，回调函数名不要重复（即 jsonpCallback 的设置不要重复），否则可能会导致回调函数 undefined 。

数据对接_WebSocket

WebSocket 是 HTML5 一种新的协议，实现了浏览器与服务器之间的全双工通信。

其本质是先通过 HTTP/HTTPS 协议进行握手后创建一个用于交换数据的 TCP 连接，服务端与客户端通过此 TCP 连接进行数据的双向实时传输，直到有一方主动发送关闭连接请求或出现网络错误才会关闭连接。

WebSocket 最大的优点在，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，真正实现了数据的实时双向通信。并且 WebSocket 通信不受同源策略的限制，即不存在跨域问题。

var webSocket = new WebSocket('wss://3dmmd.cn/wss');
// 建立 websocket 连接成功触发事件
webSocket.onopen = function () {
    console.log("websoket服务器连接成功...");
};

// 接收服务端数据时触发事件
webSocket.onmessage = function (ev) {
    console.log(ev.data);
};

webSocket.onclose = function (evt) {
    console.log("websoket关闭...");
    webSocket = null;
}

// 当连接成功后，可利用 send() 方法向服务器发送数据，例如：
// var dataObj = { 'id': 89785 };
// send 数据类型可以是 字符串 或 二进制对象（Blob 对象、ArrayBuffer 对象）
// webSocket.send(JSON.stringify(dataObj));

数据对接_MQTT

MQTT是一个轻量级协议，使用MQTT协议的中心是broker（服务器/代理），客户端通过订阅消息和发布消息进行数据交互。使用MQTT方式的步骤如下：

1.直接连接MQTT服务器（需支持websocket访问，Mosquitto支持websocket的配置可自行百度）

2.引用第三方 mqtt库

3.MQTT数据对接

浏览器端的一个简单示例如下：

// 引用第三方 mqtt 库，详见 https://github.com/mqttjs/MQTT.js
THING.Utils.dynamicLoad(['https://www.thingjs.com/static/lib/mqtt.js'], function () {
    init();
});
var client = null;
// 创建一个Mosquitto连接
client = mqtt.connect("wss:www.3dmmd.cn:8086");
client.subscribe("/public/TEST/dev1");
// 连接成功后发送数据
client.on("message", function (topic, payload) {
    console.log('data:' + payload);
    obj.setAttribute("monitorData/温度", payload);
    changeColor(obj);
});
// 关闭连接
client.end();

在客户端可调用 end() 方法主动关闭 Mosquitto 连接。