在 JS 和 MQTT 中使用数组中的多个元素

Question

我正在使用 mqtt 并想显示一些不同主题的数据

所以这是我的脚本，有一个这样的主题，它有效:

<!DOCTYPE html>
<html lang="fr">

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
<script>
    // Globally initializes an mqtt variable    
    const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8)

    
    const host = '***'

    let tabTopic = ["showroom/ABC001/temperature", "showroom/ABC002/temperature"]; //not using yet

    const options = {
            ***
            },
        }

    console.log('Connecting mqtt client')
    const client = mqtt.connect(host, options)

    client.on('error', (err) => {
        console.log('Connection error: ', err)
        client.end()
    })

    client.on('connect', () => {
        console.log('Client connected:' + clientId)
        client.subscribe('showroom/ABC001/temperature', { qos: 0 })

        // Subscribe
    })

    client.on('reconnect', () => {
        console.log('Reconnecting...')
    })

    client.on('message', (topic, message, packet) => {
        console.log('Received Message: ' + message.toString() + '\nOn topic: ' + topic);
        Array.from(document.querySelectorAll("svg > text")).forEach((element) => {
            element.textContent = element.textContent.replace("showroom/ABC001/temperature", message.toString());

        });
    })

</script>


<body>
   <svg>
    <text style="font-family: &quot;Roboto Slab&quot;; font-size: 11px; font-weight: 900; white-space: pre;" x="167.376"
        y="4.014">{showroom/ABC001/temperature}</text>
    <text style="font-family: &quot;Roboto Slab&quot;; font-size: 11px; font-weight: 900; white-space: pre;" x="376.274"
        y="9.483">{showroom/ABC002/temperature}}</text>
    </svg>
</body>

</html>

所以知道我想做什么，它是使用 tabTopic 数组并更改硬编码主题，所以我正在尝试这个：

client.on('error', (err) => {
    console.log('Connection error: ', err)
    client.end()
})

for (let i = 0; i < tabTopic.length; i++) {
    const selectedTopic = tabTopic[i];
    client.on('connect', () => {
        console.log('Client connected:' + clientId)
        client.subscribe(selectedTopic, { qos: 0 })

        // Subscribe
    })

    client.on('reconnect', () => {
        console.log('Reconnecting...')
    })

    client.on('message', (topic, message, packet) => {
        console.log('Received Message: ' + message.toString() + '\nOn topic: ' + topic);
        Array.from(document.querySelectorAll("svg > text")).forEach((element) => {
            element.textContent = element.textContent.replace(selectedTopic, message.toString());

        });
    })
}

所以问题是为我的数组中的所有元素显示相同的第一个结果

实际结果：

24
24

预期结果：

24
26

不明白为什么，如果有人能帮助我:)

Answer 1

tabTopic 数组的循环确实没有按照您的想法进行。

多次设置 on connect、reconnect 和 message 回调不会做任何明智的事情。

您应该在 connect 回调中循环一次主题列表，以便为每个主题调用一次 client.subscribe()。

然后您需要在 on message 回调中包含逻辑，以根据传入的 topic 参数的值对每种消息类型执行不同的操作。

在 JS 和 MQTT 中使用数组中的多个元素

Use multiples elements in array with JS and using MQTT

html

javascript

node.js

mqtt