全部产品
弹性计算 会员服务 网络 安全 移动云 数加·大数据分析及展现 数加·大数据应用 管理与监控 云通信 阿里云办公 培训与认证 智能硬件
存储与CDN 数据库 域名与网站(万网) 应用服务 数加·人工智能 数加·大数据基础服务 互联网中间件 视频服务 开发者工具 解决方案 物联网 更多
消息队列 MQ

JavaScript 接入示例

更新时间:2018-07-19 19:02:27

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

注意:

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

1. 资源创建

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

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

注意: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. mqttVersion:4,
  25. onFailure: function (message) {
  26. setTimeout(MQTTconnect, reconnectTimeout);
  27. }
  28. };
  29. mqtt.onConnectionLost = onConnectionLost;
  30. mqtt.onMessageArrived = onMessageArrived;
  31. if (username != null) {
  32. options.userName = username;
  33. options.password = password;
  34. options.useSSL=useTLS;//如果使用 HTTPS 加密则配置为 true
  35. }
  36. mqtt.connect(options);
  37. }
  38. function onConnect() {
  39. // Connection succeeded; subscribe to our topic
  40. mqtt.subscribe(topic, {qos: 0});
  41. message = new Paho.MQTT.Message("Hello mqtt!!");//set body
  42. message.destinationName =topic;// set topic
  43. mqtt.send(message);
  44. }
  45. function onConnectionLost(response) {
  46. setTimeout(MQTTconnect, reconnectTimeout);
  47. };
  48. function onMessageArrived(message) {
  49. var topic = message.destinationName;
  50. var payload = message.payloadString;
  51. console.log("recv msg : "+topic+" "+payload);
  52. };
  53. MQTTconnect();
  54. </script>
  55. </head>
  56. </html>
本文导读目录