Используйте кратные элементы в массиве с помощью JS и с помощью MQTT

#javascript #html #node.js #mqtt

Вопрос:

Я использую 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: amp;quot;Roboto Slabamp;quot;; font-size: 11px; font-weight: 900; white-space: pre;" x="167.376"
        y="4.014">{showroom/ABC001/temperature}</text>
    <text style="font-family: amp;quot;Roboto Slabamp;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());

        });
    })
}

Итак, проблема в том, что покажите мне один и тот же первый результат для всех элементов в моем массиве

Фактический результат :

Ожидаемый результат:

Не понимаю, почему, если кто-то может мне помочь 🙂

1. где находится открывающий svg тег?

2. Не был ли задан тот же самый вопрос (и, по-видимому, удален?) выступал вчера? 🤔

3. Да sry я решил удалить и дать более подробную информацию в этом 🙂

Ответ №1:

Цикл по tabTopic массиву на самом деле не делает того, что вы думаете.

Установка включения connect reconnect и message многократные обратные вызовы не сделают ничего разумного.

Вы должны один раз просмотреть список тем в режиме connect обратного вызова, чтобы позвонить client.subscribe() по одному разу для каждой темы.

Затем вам нужно включить логику в message обратный вызов, чтобы выполнять разные действия для каждого типа сообщений в зависимости от значения переданного topic параметра.

1. Если я понимаю, мне нужно вставить петлю для подключения внутри. И я не понимаю, что вы подразумеваете под «включением логики»?

2. При обратном вызове будет только одно message , оно должно быть в состоянии обрабатывать ВСЕ входящие сообщения, проверяя, по какой теме поступило текущее сообщение.