开发者中心

Hello MQTT JavaScript

概述

在本教程中,您将了解如何配合立子云预定义的消息(称为"静态模板")来使用 JavaScript版本的MQTT客户端。

前提条件

为了更好的使用本教程,请检查以下必备条件:

  • 您需要有一个有效的租户,用户名和密码,以访问立子云平台。

开发"Hello, MQTT world!" 客户端

开发一个非常简单的“Hello,world !“quarkioe MQTT客户端,您需要:

  • 创建一个JavaScript应用程序。
  • 运行应用程序。

创建一个JAVASCRIPT应用程序

创建一个html文件,例如“hello_mqtt_js.html”,内容如下:


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"></meta>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
    <script type="text/javascript">
        var undeliveredMessages = []

        var client = new Paho.MQTT.Client("<<serverUrl>>", "<<clientId>>");
        client.onMessageArrived = onMessageArrived;
        client.onMessageDelivered = onMessageDelivered;

        function onMessageArrived(message) {
            log('Received operation "' + message.payloadString + '"');
            if (message.payloadString.indexOf("510") == 0) {
                log("Simulating device restart...");
                publish("s/us", "501,c8y_Restart");
                log("...restarting...");
                setTimeout(function() {
                    publish("s/us", "503,c8y_Restart");
                }, 1000);
                log("...done...");
            }
        }

        function onMessageDelivered(message) {
            log('Message "' + message.payloadString + '" delivered');
            var undeliveredMessage = undeliveredMessages.pop();
            if (undeliveredMessage.onMessageDeliveredCallback) {
                undeliveredMessage.onMessageDeliveredCallback();
            }
        }

        function createDevice() {
            //create device
            publish("s/us", "100,JS MQTT,c8y_MQTTDevice", function() {
                //set hardware information
                publish("s/us", "110,S123456789,MQTT test model,Rev0.1", function() {
                    //listen for operation
                    client.subscribe("s/ds");
                    //send temperature measurement
                    setInterval(function() {
                        publish("s/us", "211,25");
                    }, 3000);
                });
            });
        }

        function publish(topic, message, onMessageDeliveredCallback) {
            message = new Paho.MQTT.Message(message);
            message.destinationName = topic;
            message.qos = 2;
            undeliveredMessages.push({
                message: message,
                onMessageDeliveredCallback: onMessageDeliveredCallback
            });
            client.send(message);
        }

        function init() {
            client.connect({
                userName: "<<tenant>>/<<username>>",
                password: "<<password>>",
                onSuccess: createDevice
            });
        }

        function log(message) {
            document.getElementById('logger').insertAdjacentHTML('beforeend', '<div>' + message + '</div>');
        }
    </script>
</head>
<body onload="init();"><div id="logger"></div></body>
</html>
                    

根据您的需要替换"<<clientId>>", "<<serverUrl>>", "<<tenant>>", "<<username>>", "<<password>>"。

Cumulocity MQTT协议同时支持不安全的TCP和安全的SSL连接(例如 ws://mqtt.quarkioe.com/mqtt 或 wss://mqtt.quarkioe.com/mqtt ),因此 "<<serverUrl>>"可以选择适合您的那个。

这些代码做什么的?

  • 配置MQTT连接。
  • 注册 onMessageArrived 一个回调函数,将打印所有传入的消息,并在 c8y_Restart 操作的 情况下,将模拟设备重新启动。
  • 注册 onMessageDelivered 一个回调函数,在发布发布消息之后会调用它。
  • 页面完全加载后调用 init 通过MQTT协议与Cumulocity连接的函数。 连接建立后调用一个 createDevice 函数。
  • 创建一个 JS MQTT 名称和 c8y_MQTTDevice 类型的新设备。
  • 通过放置 S123456789 串行, MQTT test model 模型和 Rev0.1 修订更新设备硬件信息。 订阅设备的静态操作模板 - 这将在 onMessageArrived 每次创建新操作时去进行方法调用。
  • 每3秒发送一次温度测量值。

请注意,订阅是在设备创建后建立的,否则如果没有设备给定 clientId ,服务器将不会接受它。

运行

在浏览器中打开“hello_mqtt_js.html”。之后,您应该可以在设备列表中看到QuarkIoE应用程序中 的新设备。此外,如果将为该设备创建新的操作,(例如 c8y_Restart )关于它的信息将被打印在 浏览器页面中。

改善代理

现在您已经完成了第一步,接下来您可以查看Hello MQTT章节,学习更多的Quarkioe MQTT相关知识,改进您的应用程序。