Изучение решения Flutter IM — MQTT

Flutter

Демонстрационные визуализации

Android 效果图 iOS 效果图

Выбор решения — MQTT

  Прежде чем начать эту статью, позвольте мне представить наших двух главных героев сегодня🤪:
Основной канал №1 (IM): Обмен мгновенными сообщениями
Главный герой № 2 (MQTT): MQTT (Message Queuing Telemetry Transport, Message Queuing Telemetry Transport Protocol) — это «облегченный» коммуникационный протокол, основанный на модели публикации/подписки, основанной на соглашении TCP/IP, выпущенном IBM в 1999. Самым большим преимуществом MQTT является то, что он может предоставлять надежные службы сообщений в режиме реального времени для подключения удаленных устройств с очень небольшим количеством кода и ограниченной пропускной способностью.
   На самом деле есть много вариантов при реализации функции IM в проекте, зачем выбиратьMQTTШерстяная ткань? 🤔 Прежде всего, учитывая мультитерминальность нашего проекта, наш проект имеет несколько терминалов, в одном из терминалов принято решение MQTT и функция успешно подключена и реализована, а мультитерминальный диалог может будет открыт в будущем, поэтому я нахожусь в своем собственном терминале. Проект также намерен использоватьMQTT➕消息推送строить планы. Есть еще одна важная причина: у MQTT есть библиотеки! Есть библиотеки!

ты это видел? Блестящая библиотека, высокая популярность + высокое внимание + высокие лайки, в полной мере продемонстрировали, насколько он ароматен. Некоторые гангстеры могут сказать: у вас нет технического содержания в использовании сторонней библиотеки, и настройка сторонней библиотеки невелика, Балабала~. Но 👴 Разве это не глядя на исходники для кастомизации?У великанов есть плечи, на них не наступишь, на них надо наступить, может однажды ты станешь великаном, но я стал великаном на плечах великанов, Олли! 🚀Готовы взлететь на плечах гигантов?

Доступ к клиенту MQTT

Step1:MQTTAppConnectionState

   В первую очередь необходимо уточнить статус подключения MQTT.В этой части разобраться несложно.В возможном статусе MQTT есть подключено,не подключено,подключено. Перечислите их все путем перечисления.

    enum MQTTAppConnectionState { connected, disconnected, connecting }

отлично! Первый шаг пройден, и идея постепенно проясняется 👀

Step2:MQTTAppState

   После получения статуса подключения MQTT, что еще нужно? Какова цель нашего знания состояния соединения? Конечно, это отправка и получение сообщений при успешном соединении и прекращение отправки и получения сообщений при отключении соединения, а когда мы получаем сообщение, нам нужно знать, какое сообщение мы получили. Тогда все, что нам нужно, это такой класс, мы назовем его MQTTAppState.

    class MQTTAppState with ChangeNotifier{
  MQTTAppConnectionState _appConnectionState = MQTTAppConnectionState.disconnected;
  String _receivedText = '';
  String _historyText = '';

  void setReceivedText(String text) {
    _receivedText = text;
    _historyText = _historyText + '\n' + _receivedText;
    notifyListeners();
  }
  void setAppConnectionState(MQTTAppConnectionState state) {
    _appConnectionState = state;
    notifyListeners();
  }

  String get getReceivedText => _receivedText;
  String get getHistoryText => _historyText;
  MQTTAppConnectionState get getAppConnectionState => _appConnectionState;
}

В этом классе вы можете видеть, что мы определяем сообщение, которое мы получаем в данный момент.receivedTextи исторические сообщения, которые мы получаем_historyText, Мы определяем эти два сообщения. Наше историческое сообщение на самом деле представляет собой процесс укладки и упаковки. Каждый раз, когда мы получаем новое сообщение, мы добавляем это новое сообщение на исходной основе, чтобы сформировать новое историческое сообщение. В то же время мы также определяем методы для управления MQTTAppConnectionState. 🚩Этот наш класс унаследовал ChangeNotifier, и студенты, знакомые с Flutter, могут это догадаться. Это для нашего удобства в управлении глобальным состоянием в будущем. Да, здесь также используется техническое решение Provider.

Step3:MQTTManager

   Вам нужен доступ к функции и библиотеке классов. Прежде всего, у вас должна быть глобальная идея управления. В противном случае в таком фреймворке, как Flutter, вам будет сложно отличить свой UI и бизнес-логику. Целью MQTTManager здесь является единообразное управление отправкой и получением сообщений IM, а также подпиской на сообщения. В качестве глобального класса менеджера первое, что нам нужно, — это определить конструктор. Конструктор обычно размещает необходимое содержимое класса. MQTT, a Какие обязательные классы? Здесь всем нужно базовое понимание MQTT.Вот я напишу ответ вам первым.

 MQTTManager({
    @required String host,
    @required String topic,
    @required String identifier,
    @required MQTTAppState state
  }
      ): _identifier = identifier, _host = host, _topic = topic, _currentState = state ;

Самая базовая конфигурация MQTT включаетhost(host地址),topic(订阅主题),identifier(用户身份),state(连接状态)На самом деле это несложно понять, если хорошенько подумать: это некая базовая конфигурация, позволяющая нам отправлять и получать сообщения и различать получателей и отправителей.
   Так же нам нужен MQTT сервер! 🔧, так же нам нужно добавить базовую конфигурацию сервера

  void initializeMQTTClient(){
    _client = MqttServerClient(_host,_identifier);
    _client.port = 1883;
    _client.keepAlivePeriod = 20;
    _client.onDisconnected = onDisconnected;
    _client.secure = false;
    _client.logging(on: true);

    _client.onConnected = onConnected;
    _client.onSubscribed = onSubscribed;

    final MqttConnectMessage connMess = MqttConnectMessage()
        .withClientIdentifier(_identifier)
        .withWillTopic('willtopic')  set a will message
        .withWillMessage('My Will message')
        .startClean()
        .withWillQos(MqttQos.atLeastOnce);
    _client.connectionMessage = connMess;
  }

   Для такого простого сервера мы уже настроили для него базовую конфигурацию, такую ​​как номер порта, время удержания соединения и т.д. После того, как вся информация настроена, мы можем добавить в менеджер некоторые основные методы управления.

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

  С нашими неустанными усилиями, описанными выше, все в будущем кажется само собой разумеющимся, просто расслабьтесь🚅, в сочетании с нашими знаниями о странице. Мы можем реализовать наше соединение MQTT через Manager

  _connectMQTT()
  {
    manager = MQTTManager(
        host: "test.mosquitto.org",
        topic: "flutter/amp/cool",
        identifier: _userName,
        state: currentAppState);
    manager.initializeMQTTClient();
    manager.connect();
  }

  В то же время, поскольку мы интегрировали ChangeNaotifier, мы можем динамически отслеживать сообщения, на которые мы подписываемся🦀, легко, две строки кода.

//当前收到的消息
appState.getReceivedText
//所有历史消息
appState.getHistoryText

Отправить сообщение тоже очень просто, одна строчка кода, получай~😏

mqttManager.publish(message);

Вся структура MQTT завершена, с классной страницей входа и интерфейсом чата в стиле WeChat, эффект очень хороший.

адрес проекта

Ты подарил мне свою звезду🌟! хахахаха
MQTT Demo

конец

На самом деле, это просто простое решение для реализации MQTT. Вы можете столкнуться с проблемой задержки отправки и получения сообщений во время опыта. Хотя это не очевидно, это также повлияет на работу пользователя. В чем причина? 🤨Поскольку мы забыли нашего хорошего друга - внутреннего партнера, в реальной разработке нам приходится сотрудничать с внутренним партнером в нашей стратегии обмена мгновенными сообщениями, которая часто заключается в отправке мгновенных сообщений через внутренний интерфейс и инкапсуляции нашего контрольная часть. Я буду продолжать обновлять конкретный план в процессе последующей разработки, пожалуйста, обратите внимание~🤩

Категории