Как использовать MQTT в проекте Electron

Электрон — это программная среда с открытым исходным кодом, разработанная и поддерживаемая GitHub. Он позволяет разрабатывать приложения с графическим интерфейсом для настольных компьютеров с использованием веб-технологий: он сочетает в себе механизм рендеринга Chromium и среду выполнения Node.js. Electron является основной структурой графического интерфейса, стоящей за несколькими известными проектами с открытым исходным кодом, включая Atom, GitHub Desktop, Light Table, Visual Studio Code и WordPress Desktop.

Базовый Electron включает в себя три файла: package.json (метаданные) main.js (код) и index.html (графический пользовательский интерфейс). Фрейм предоставляется исполняемым файлом Electron (electron.exe в Windows, electro.app в macOS, electronic в Linux). Разработчики могут свободно добавлять флаги, настраивать значки, переименовывать или редактировать исполняемые файлы Electron.

Эта статья в основном знакомит с тем, как использовать MQTT в проектах Electron и завершить простой настольный клиент MQTT, а также реализовать подключение, подписку, отмену подписки, обмен сообщениями и другие функции между клиентом и MQTT-брокер.

Инициализация проекта

Новый проект

Есть много способов построить новый проект, но вот краткий список некоторых из них:

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

cd your-project

npm init

npm i -D electron@lates

Кроме того, обратитесь к следующей документации за шагами по сборке проекта.

Адрес:

Быстрая разработка с официальными шаблонными проектами electron-qucik-start.

Адрес: 

# Clone this repository
  git clone 
  # Go into the repository
  cd electron-quick-start
  # Install dependencies
  npm install
  # Run the app
  npm start

Быстрая разработка сборок с шаблонным проектом electron-react-bolierplateкоторый можно разработать с помощью React.js.

Адрес: 

git clone --depth 1 --single-branch .git your-project-name
cd your-project-name
yarn

Быстрая разработка сборки проекта через electron-vue будет сочетаться с инициализацией проекта с использованием vue-cli инструмент, который может быть разработан с использованием Vue.js.

Адрес: 

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev

В этой статье официальный шаблон проекта электронного быстрого запуска будет использоваться для инициализации проекта, чтобы быстро построить пример проекта.

Зависимости установки

Установка через командную строку

npm install mqtt --save

После установки зависимостей, если вы хотите открыть консоль для отладки, вам нужно изменить код в main.js и раскомментировать win.webContents.openDevTools().

// Open the DevTools.
mainWindow.webContents.openDevTools()

В этом случае локально установленный MQTT.js модуль не может быть загружен непосредственно в renderer.js без использования построителя внешнего интерфейса для упаковки страницы внешнего интерфейса. Помимо использования метода инструмента сборки, есть еще два способа решить эту проблему:

nodeIntegration может быть установлено значение true в webPreferences. При наличии этого свойства webview будет иметь интеграцию с узлом и API-интерфейсы узла, такие как require а также process может использоваться для доступа к низкоуровневым системным ресурсам. Интеграция узла отключена по умолчанию.

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })

MQTT.js модуль можно импортировать в preload.js. Если нет интеграции узла, этот скрипт по-прежнему может получить доступ ко всем API-интерфейсам узла. Однако, когда выполнение этого скрипта завершится, глобальные объекты, внедренные через Node, будут удалены.

Использование MQTT

Подключиться к брокеру MQTT

В этой статье будет использоваться бесплатный публичный MQTT-брокер предоставлено EMQX. Этот сервис создан на базе EMQX Облачная платформа Интернета вещей MQTT. Информация о доступе к брокеру следующая:

  • Маклер: Broker.emqx.io
  • TCP-порт: 1883 г.
  • Порт веб-сокета: 8083

Для большей наглядности ключевой код подключения для примера будет записан в файле renderer.js. С учетом безопасности установленный модуль MQTT будет загружен с помощью метода require API-интерфейса Node.js в файле preload.js (используя метод 2 выше). Кроме того, этот метод внедряет его в объект глобального окна, чтобы к загруженному модулю можно было получить доступ непосредственно в renderer.js.

// preload.js
const mqtt = require('mqtt')
window.mqtt = mqtt
  • Настроить и протестировать модуль MQTT
// renderer.js
const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8)

const host="mqtt://broker.emqx.io:1883"

const options = {
  keepalive: 30,
  clientId: clientId,
  protocolId: 'MQTT',
  protocolVersion: 4,
  clean: true,
  reconnectPeriod: 1000,
  connectTimeout: 30 * 1000,
  will: {
    topic: 'WillMsg',
    payload: 'Connection Closed abnormally..!',
    qos: 0,
    retain: false
  },
  rejectUnauthorized: false
}

// Information about the mqtt module is available
console.log(mqtt)

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

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

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

client.on('connect', () => {
  console.log('Client connected:' + clientId)
  client.subscribe('testtopic/electron', {
    qos: 0
  })
  client.publish('testtopic/electron', 'Electron connection demo...!', {
    qos: 0,
    retain: false
  })
})

client.on('message', (topic, message, packet) => {
  console.log('Received Message: ' + message.toString() + '\nOn topic: ' + topic)
})

Мы можем увидеть следующий вывод в консоли после написания приведенного выше кода и запуска проекта:

Электронная консоль.png

Модуль MQTT работает нормально. После настройки модуля мы можем написать простой UI-интерфейс, чтобы вручную ввести конфигурацию, необходимую для подключения MQTT, и нажать кнопку подключения, чтобы подключиться к серверу MQTT, а также отключиться, подписаться на темы, отправлять и получать сообщения, и так далее.

Интерфейс приложения

электроника.png

Полный код доступен здесь: https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-Электрон.

Ключевой код

Соединять

let client = null

  const options = {
    keepalive: 30,
    protocolId: 'MQTT',
    protocolVersion: 4,
    clean: true,
    reconnectPeriod: 1000,
    connectTimeout: 30 * 1000,
    will: {
      topic: 'WillMsg',
      payload: 'Connection Closed abnormally..!',
      qos: 0,
      retain: false
    },
  }

  function onConnect () {
    const { host, port, clientId, username, password } = connection
    const connectUrl = `mqtt://${host.value}:${port.value}`
    options.clientId = clientId.value || `mqttjs_${Math.random().toString(16).substr(2, 8)}`
    options.username = username.value
    options.password = password.value
    console.log('connecting mqtt client')
    client = mqtt.connect(connectUrl, options)
    client.on('error', (err) => {
      console.error('Connection error: ', err)
      client.end()
    })
    client.on('reconnect', () => {
      console.log('Reconnecting...')
    })
    client.on('connect', () => {
      console.log('Client connected:' + options.clientId)
      connectBtn.innerText="Connected"
    })
  }

function onSub () {
    if (client.connected) {
      const { topic, qos } = subscriber
      client.subscribe(topic.value, { qos: parseInt(qos.value, 10) }, (error, res) => {
         if (error) {
           console.error('Subscribe error: ', error)
         } else {
           console.log('Subscribed: ', res)
         }
      })
    }
  }

function onUnsub () {
    if (client.connected) {
      const { topic } = subscriber
      client.unsubscribe(topic.value, error => {
        if (error) {
          console.error('Unsubscribe error: ', error)
        } else {
          console.log('Unsubscribed: ', topic.value)
        }
      })
    }
  }

Публикация сообщений

function onSend () {
    if (client.connected) {
      const { topic, qos, payload } = publisher
      client.publish(topic.value, payload.value, {
        qos: parseInt(qos.value, 10),
        retain: false
      })
    }
  }

Получать сообщения

// In the onConnect function
client.on('message', (topic, message) => {
  const msg = document.createElement('div')
  msg.setAttribute('class', 'message-body')
  msg.innerText = `${message.toString()}\nOn topic: ${topic}`
  document.getElementById('article').appendChild(msg)
})

Отключить

function onDisconnect () {
    if (client.connected) {
      client.end()
      client.on('close', () => {
        connectBtn.innerText="Connect"
        console.log(options.clientId + ' disconnected')
      })
    }
  }

Клиентский тест

На этом этапе мы тестируем отправку и получение сообщений с Клиентский инструмент MQTT 5.0 — MQTT Xтакже написанный на Electron.

При использовании MQTT X для отправки сообщения клиенту вы можете видеть, что сообщение получено правильно:

электронное сообщение.png

Отправьте сообщение в MQTT X с помощью клиента, который вы написали сами, и теперь вы можете видеть, что MQTT X также правильно получает сообщение:

mqttx.png

На данный момент мы завершили использование Electron для создания простого настольного клиента MQTT и моделирования сценариев подключения, обмена сообщениями, отмены подписки и отключения между клиентом и брокером MQTT. Также стоит отметить, что, поскольку проект Electron включает в себя как среду браузера, так и среду Node.js, можно использовать API WebSocket браузера для реализации соединения MQTT через WebSocket, изменив протокол соединения и номер порта в приведенном выше коде. .

Первоначально опубликовано на

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *