How MQTT( Message Queuing Telemetry Transport) works entire flow ?

Overview

MQTT (Message Queuing Telemetry Transport) is a lightweight publish/subscribe messaging protocol designed for constrained devices and low-bandwidth, high-latency networks — commonly used in IoT.

MQTT Architecture

textCopy
┌──────────────────────────────────────────────────────┐
│                    MQTT Broker                       │
│              (e.g., HiveMQ, Mosquitto)               │
│  ┌──────────────────────────────────────────────┐   │
│  │  Topics: sensors/temp, home/lights/living     │   │
│  └──────────────────────────────────────────────┘   │
└──────────────────────────────────────────────────────┘
         ↑ publish              ↓ deliver
┌─────────────────┐    ┌──────────────────────┐
│   Publisher     │    │  Subscriber (Flutter) │
│ (Temperature    │    │  subscribed to        │
│  Sensor)        │    │  "sensors/temp"       │
└─────────────────┘    └──────────────────────┘

Entire MQTT Flow

textCopy
1. CONNECT
   Client → Broker: CONNECT packet (clientId, credentials, keepAlive, cleanSession)
   Broker → Client: CONNACK (Connection Acknowledged)

2. SUBSCRIBE
   Client → Broker: SUBSCRIBE (topic: "sensors/temperature", QoS: 1)
   Broker → Client: SUBACK (subscription confirmed)

3. PUBLISH (from device/publisher)
   Sensor → Broker: PUBLISH (topic: "sensors/temperature", payload: "25.5°C", QoS: 1)
   Broker → Client: PUBLISH (delivers to all subscribers of that topic)

4. ACKNOWLEDGE (QoS 1)
   Client → Broker: PUBACK

5. DISCONNECT
   Client → Broker: DISCONNECT

Flutter MQTT Implementation

dartCopy
import 'package:mqtt_client/mqtt_client.dart';
import 'package:mqtt_client/mqtt_server_client.dart';

class MqttService {
  late MqttServerClient client;

  Future<void> connect() async {
    client = MqttServerClient.withPort(
      'broker.hivemq.com',
      'flutter_${DateTime.now().millisecondsSinceEpoch}',
      1883,
    );

    client.keepAlivePeriod = 60;
    client.onConnected = onConnected;
    client.onDisconnected = onDisconnected;
    client.onSubscribed = onSubscribed;

    final connMessage = MqttConnectMessage()
        .withClientIdentifier('flutter_client')
        .startClean()
        .withWillQos(MqttQos.atLeastOnce);

    client.connectionMessage = connMessage;

    try {
      await client.connect();
    } catch (e) {
      client.disconnect();
      rethrow;
    }
  }

  void subscribe(String topic) {
    client.subscribe(topic, MqttQos.atLeastOnce);
  }

  Stream<String> get messageStream {
    return client.updates!.map((messages) {
      final msg = messages[0].payload as MqttPublishMessage;
      return MqttPublishPayload.bytesToStringAsString(msg.payload.message);
    });
  }

  void publish(String topic, String message) {
    final builder = MqttClientPayloadBuilder()..addString(message);
    client.publishMessage(topic, MqttQos.atLeastOnce, builder.payload!);
  }

  void disconnect() => client.disconnect();

  void onConnected() => print('Connected to MQTT broker');
  void onDisconnected() => print('Disconnected from MQTT broker');
  void onSubscribed(String topic) => print('Subscribed to $topic');
}

MQTT in Flutter Widget

dartCopy
class TemperatureScreen extends StatefulWidget {
  @override
  _TemperatureScreenState createState() => _TemperatureScreenState();
}

class _TemperatureScreenState extends State<TemperatureScreen> {
  final _mqtt = MqttService();
  String _temperature = '--';

  @override
  void initState() {
    super.initState();
    _initMqtt();
  }

  Future<void> _initMqtt() async {
    await _mqtt.connect();
    _mqtt.subscribe('sensors/temperature');
    _mqtt.messageStream.listen((message) {
      if (mounted) setState(() => _temperature = message);
    });
  }

  @override
  void dispose() {
    _mqtt.disconnect();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Live Temperature')),
      body: Center(
        child: Text('$_temperature', style: TextStyle(fontSize: 48)),
      ),
    );
  }
}

MQTT Topics (Wildcard)

textCopy
sensors/temperature        → exact topic
sensors/+                  → single-level wildcard (sensors/temp, sensors/humidity)
sensors/#                  → multi-level wildcard (all under sensors/)
home/floor1/room2/lights   → hierarchical topics

Use Cases: IoT sensors, smart home control, live tracking, real-time chat, fleet monitoring.