ThingJS 数据对接说明

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

数据对接方式 说明
Ajax Asynchronous JavaScript and XML,异步的 JavaScript 与 XML 技术,指的是一套综合了多项技术的浏览器端网页开发技术。
JSONP JSON with Padding,是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域获取资料。另一个解决这个问题的新方法是跨来源资源共享-Cross-origin resource sharing(CORS)。
WebSocket 是一种网络传输协议,可在单个 TCP 连接上进行全双工通信,位于 OSI 模型的应用层。WebSocket 协议在2011年由 IETF 标准化为 RFC 6455,后由 RFC 7936 补充规范。Web IDL 中的 WebSocket API 由 W3C 标准化。
MQTT Message Queuing Telemetry Transport,消息队列遥测传输,是 ISO 标准(ISO/IEC PRF 20922)下基于发布 (Publish)或订阅 (Subscribe)范式的消息协议,可视为“资料传递的桥梁”。

数据对接_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 连接。

该文件修订时间: 2022-09-08 14:42:59

results matching ""

    No results matching ""