JavaScript 接入该如何实现？
注意：
本文给出的实例均基于 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>
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
看起来您正在尝试使用阿里云的MQTT服务，并且您已经准备好了一段基于Eclipse Paho JavaScript SDK的示例代码来实现MQTT消息的收发。下面我将帮助您理解这段代码的关键部分以及如何进行消息的发送和接收。
关键配置参数解释
-
host: 您需要设置为阿里云MQTT服务的接入点域名，这个域名会根据您选择的地域而变化，通常在控制台创建实例后可以获取到。
-
port: 80是WebSocket协议的默认端口，如果您的连接需要通过HTTPS，则应改为443。
-
topic: 这是您要订阅或发布的主题名称，用于区分不同的消息通道。在阿里云MQTT中，多级子Topic无需单独申请，直接在代码中使用即可。
-
useTLS: 设置为
true表示使用加密的TLS/SSL连接，即HTTPS；false则表示不加密，直接使用HTTP或WebSocket。 -
accessKey 和 secretKey: 这是阿里云账号的访问密钥对，用于身份验证。您可以在阿里云控制台的AccessKey管理页面生成和查看。
-
cleansession: 如果设置为
true，则客户端与服务器之间的会话状态（如未确认的消息）在断开连接后会被清除；如果是false，则会话状态会被保留。 -
groupId 和 clientId:
groupId是阿里云MQTT服务中的群组ID，clientId由群组ID和设备ID组成，用于唯一标识一个设备或客户端。
发送和接收消息
在实际应用中，您需要初始化客户端、连接到MQTT服务、订阅主题、然后开始发送和接收消息。以下是一个简化的流程：
// 引入Paho MQTT库
import { Client } from 'paho-mqtt';
// 使用config.js中的配置
const config = require('./config');
// 初始化客户端
const client = new Client(config.host, Number(config.port), config.clientId);
// 设置连接选项
client.connect({
keepAliveInterval: 60,
cleanSession: config.cleansession,
useSSL: config.useTLS,
userName: config.accessKey,
password: config.secretKey,
onSuccess: onConnect,
onFailure: onFailure
});
function onConnect() {
console.log('Connected to MQTT broker');
// 订阅主题
client.subscribe(config.topic, { qos: 1 }, (err) => {
if (!err) {
console.log(`Subscribed to topic '${config.topic}'`);
// 发布一条消息示例
client.publish(config.topic, 'Hello MQTT', { qos: 1 });
}
});
// 接收消息回调
client.onMessageArrived = onMessageArrived;
}
function onFailure(err) {
console.error('Connection failed:', err);
}
function onMessageArrived(message) {
console.log(`Received message on '${message.destinationName}': ${message.payloadString}`);
}
function disconnect() {
client.disconnect();
}
这段代码展示了如何使用Eclipse Paho JavaScript SDK连接到阿里云MQTT服务，订阅一个主题，发布消息，并监听接收到的消息。请确保您已正确导入了Paho MQTT库，并根据实际情况调整配置文件中的参数。
