閱讀447 返回首頁    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-阿裏雲