全部产品
存储与CDN 数据库 安全 应用服务 数加·人工智能 数加·大数据基础服务 互联网中间件 视频服务 阿里云办公 培训与认证 物联网
消息队列 MQ

JavaScript 接入示例

更新时间:2017-08-29 15:33:55   分享:   

本文主要介绍如何使用 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 = 'XXX.mqtt.aliyuncs.com';// 设置当前用户的接入点域名,接入点获取方法请参考接入准备章节文档,先在控制台申请实例
  2. port = 80;//WebSocket协议服务端口,如果是走HTTPS,设置443端口
  3. topic = 'XXXXXXX';//需要操作的Topic
  4. useTLS = false;//是否走加密HTTPS,如果走HTTPS,设置为true
  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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://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端口,如果使用HTTPS加密则配置为443,否则配置80
  19. clientId//客户端ClientId
  20. );
  21. var options = {
  22. timeout: 3,
  23. onSuccess: onConnect,
  24. onFailure: function (message) {
  25. setTimeout(MQTTconnect, reconnectTimeout);
  26. }
  27. };
  28. mqtt.onConnectionLost = onConnectionLost;
  29. mqtt.onMessageArrived = onMessageArrived;
  30. if (username != null) {
  31. options.userName = username;
  32. options.password = password;
  33. options.useSSL=useTLS;//如果使用HTTPS加密则配置为true
  34. }
  35. mqtt.connect(options);
  36. }
  37. function onConnect() {
  38. // Connection succeeded; subscribe to our topic
  39. mqtt.subscribe(topic, {qos: 0});
  40. message = new Paho.MQTT.Message("Hello mqtt!!");//set body
  41. message.destinationName =topic;// set topic
  42. mqtt.send(message);
  43. }
  44. function onConnectionLost(response) {
  45. setTimeout(MQTTconnect, reconnectTimeout);
  46. };
  47. function onMessageArrived(message) {
  48. var topic = message.destinationName;
  49. var payload = message.payloadString;
  50. console.log("recv msg : "+topic+" "+payload);
  51. };
  52. MQTTconnect();
  53. </script>
  54. </head>
  55. </html>
本文导读目录
本文导读目录
以上内容是否对您有帮助?