全部产品
存储与CDN 数据库 安全 应用服务 数加·人工智能 数加·大数据基础服务 互联网中间件 视频服务 开发者工具 解决方案 物联网 钉钉智能硬件
消息队列 MQ

JavaScript 接入示例

更新时间:2017-12-15 20:40:18

本文主要介绍如何使用 JavaScript 客户端收发 MQTT 消息,并给出示例代码供前期开发测试参考。

注意:

本文给出的实例均基于 Eclipse Paho JavaScript SDK 实现,该 SDK 下载请参见MQTT 接入准备。如使用其他第三方的客户端,请适当修改。

1. 资源申请

使用 MQ 提供的 MQTT 服务,首先需要核实应用中使用的 Topic 资源是否已经申请,如果没有请先去控制台申请 Topic,Group ID 等资源。

申请资源时需要根据需求选择对应的 Region,例如,MQTT 需要使用华北2的接入点,那么 Topic 等资源就在华北2 申请,资源申请具体请参见申请 MQ 资源

注意: MQTT 使用的多级子 Topic 不需要申请,代码里直接使用即可,没有限制。

2. MQTT 收发消息

本段示例代码演示如何使用 JavaScript 客户端收发 MQTT 消息。

config.js 文件

host = 'XXX.mqtt.aliyuncs.com';// 设置当前用户的接入点域名,接入点获取方法请参考接入准备章节文档,先在控制台申请实例
port = 80;//WebSocket 协议服务端口,如果是走 HTTPS,设置443端口
topic = 'XXXXXXX';//需要操作的 Topic
useTLS = false;//是否走加密 HTTPS,如果走 HTTPS,设置为 true
accessKey = 'XXXXXX';//账号的 AccessKey,在阿里云控制台查看
secretKey = 'XXXXXX=';//账号的的 SecretKey,在阿里云控制台查看
cleansession = true;
groupId='GID_XXXX';
clientId=groupId+'@@@XXXX';//GroupId@@@DeviceId,由控制台申请的 Group ID 和自己指定的 Device ID 组合构成

收发消息程序:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Aliyun Mqtt Websockets</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="mqttws31.js" type="text/javascript"></script>
    <script src="config.js" type="text/javascript"></script>
    <script src="crypto-js.js" type="text/javascript"></script>
    <script type="text/javascript">
    var mqtt;
    var reconnectTimeout = 2000;
    var username =accessKey;
    var password=CryptoJS.HmacSHA1(groupId,secretKey).toString(CryptoJS.enc.Base64);
    function MQTTconnect() {
    mqtt = new Paho.MQTT.Client(
            host,//MQTT 域名
            port,//WebSocket 端口,如果使用 HTTPS 加密则配置为443,否则配置80
            clientId//客户端 ClientId
        );
        var options = {
            timeout: 3,
            onSuccess: onConnect,
            onFailure: function (message) {
                setTimeout(MQTTconnect, reconnectTimeout);
            }
        };

        mqtt.onConnectionLost = onConnectionLost;
        mqtt.onMessageArrived = onMessageArrived;

        if (username != null) {
            options.userName = username;
            options.password = password;
            options.useSSL=useTLS;//如果使用 HTTPS 加密则配置为 true
        }
        mqtt.connect(options);
    }

    function onConnect() {
        // Connection succeeded; subscribe to our topic
        mqtt.subscribe(topic, {qos: 0});
        message = new Paho.MQTT.Message("Hello mqtt!!");//set body
        message.destinationName =topic;// set topic
        mqtt.send(message);
    }

    function onConnectionLost(response) {
        setTimeout(MQTTconnect, reconnectTimeout);
    };

    function onMessageArrived(message) {

        var topic = message.destinationName;
        var payload = message.payloadString;
        console.log("recv msg : "+topic+"   "+payload);
    };
    MQTTconnect();
    </script>
  </head>
</html>
本文导读目录