阅读447 返回首页    go 阿里云 go 技术社区[云栖]

JavaScript 发消息示例__JavaScript 接入示例_MQTT 接入(物联)_消息队列 MQ-阿里云

本文主要介绍如何使用 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 文件

  1. host = 'mqtt-test.cn-qingdao.aliyuncs.com';// MQTT公测Region的接入点域名，参考MQTT环境准备章节
  2. port = 80;//WebSocket协议服务端口
  3. topic = 'XXXXXXX';//需要操作的Topic
  4. useTLS = false;//是否走加密TLS协议
  5. accessKey = 'XXXXXX';//账号的AccessKey，在阿里云控制台查看
  6. secretKey = 'XXXXXX=';//账号的的SecretKey，在阿里云控制台查看
  7. cleansession = true;
  8. groupId='GID_XXXX';
  9. clientId=groupId+'@@@XXXX';//GroupId@@@DeviceId，由控制台申请的Group ID和自己指定的Device ID组合构成

发送程序：

  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="https://www.w3.org/1999/xhtml">
  4.   <head>
  5.     <title>Aliyun Mqtt Websockets</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <script src="mqttws31.js" type="text/javascript"></script>
  8.     <script src="config.js" type="text/javascript"></script>
  9.     <script src="crypto-js.js" type="text/javascript"></script>
  10.     <script type="text/javascript">
  11.     var mqtt;
  12.     var reconnectTimeout = 2000;
  13.     var username =accessKey;
  14.     var password=CryptoJS.HmacSHA1(groupId,secretKey).toString(CryptoJS.enc.Base64);
  15.     function MQTTconnect() {
  16.     mqtt = new Paho.MQTT.Client(
  17.             host,//MQTT域名
  18.             port,//WebSocket端口
  19.             clientId//客户端ClientId
  20.         );
  21.         var options = {
  22.             timeout: 3,
  23.             onSuccess: onConnect,
  24.             onFailure: function (message) {
  25.                 setTimeout(MQTTconnect, reconnectTimeout);
  26.             }
  27.         };
  29.         mqtt.onConnectionLost = onConnectionLost;
  30.         mqtt.onMessageArrived = onMessageArrived;
  32.         if (username != null) {
  33.             options.userName = username;
  34.             options.password = password;
  35.         }
  36.         mqtt.connect(options);
  37.     }
  39.     function onConnect() {
  40.         // Connection succeeded; subscribe to our topic
  41.         mqtt.subscribe(topic, {qos: 0});
  42.         message = new Paho.MQTT.Message("Hello mqtt!!");//set body
  43.         message.destinationName =topic;// set topic
  44.         mqtt.send(message);
  45.     }
  47.     function onConnectionLost(response) {
  48.         setTimeout(MQTTconnect, reconnectTimeout);
  49.     };
  51.     function onMessageArrived(message) {
  53.         var topic = message.destinationName;
  54.         var payload = message.payloadString;
  55.         console.log("recv msg : "+topic+"   "+payload);
  56.     };
  57.     MQTTconnect();
  58.     </script>
  59.   </head>
  60. </html>

最后更新：2016-12-19 15:59:50

  上一篇：go Android 收发消息示例__Android 接入示例_MQTT 接入(物联)_消息队列 MQ-阿里云
  下一篇：go MQ 客户端收发 MQTT 消息__Java 接入示例_MQTT 接入(物联)_消息队列 MQ-阿里云