关于flutter与django建立mqtt的研究

1. 使用mosquitto

这是一个mqtt服务器,用于广播数据

安装过程省略(有很多教程),安装完成后,可以在终端输入mosquitto,接下来就可以模拟这个一对多的发布者订阅模式了

订阅(topic1是订阅的主题,也可以是别的):mosquitto_sub -v -t topic1

发布:mosquitto_pub -t topic1 -m 消息内容

如下,是一个模拟过程:

首先,打开三个终端,这三个终端都输入"mosquitto_sub -v -t t1"表示这三个终端都订阅了这个主题:(图片放错啦,请将下面的topic1换成t1)

接着,再来一个终端,输入

bash 复制代码
mosquitto_pub -t t1 -m "Hello, MQTT!"

消息内容,去发布消息(接着这三个订阅这个主题的终端都可以接受到这个消息):

2. mosquitto设置局域网可访问

在mosquitto的安装目录,如"C:\Program Files\mosquitto"下,找到"mosquitto.conf"文件,插入两行:(分别表示端口和局域网可访问)

接下来,我们换一种方式去使用mosquitto,在"C:\Program Files\mosquitto"下打开终端,输入:

bash 复制代码
mosquitto -c mosquitto.conf -v

这就表示按照配置去运行mosquitto服务器啦,接着我们来换一种方式模拟,开几个终端,输入如下:(实际上还应该输入-h mosquitto服务器的ip,但是现在是在一台电脑上的操作,就省事儿了)

接着我们再起一个终端,用于发布消息,如下:(输入:"mosquitto_pub -t t334 -p 8889 -m 这是给t334QQQQQQQ的消息!"等消息)

3. flutter使用mqtt

话不多说,安装:

javascript 复制代码
mqtt_client: ^10.3.0

使用:(运行,服务端会检测到)

【注】:如果是真机有问题(貌似需要配置ssl)目前只能电脑本地模拟器运行,等评论区大佬解决😂(等作者解决估计要很久)

Dart 复制代码
import 'package:flutter/material.dart';
import 'package:mqtt_client/mqtt_client.dart';
import 'package:mqtt_client/mqtt_server_client.dart';

main(){runApp(const MaterialApp(home: H(),));}
class H extends StatefulWidget {
  const H({super.key});

  @override
  State<H> createState() => _HState();
}

class _HState extends State<H> {
  final client = MqttServerClient.withPort('192.168.101.21', "small_sun", 8889);
  String _resStr = "";
  Future<void> initClient() async {

    client.logging(on: false); //是否开启日志,这里就不看看日志了
    client.keepAlivePeriod = 20; //设置超时时间
    try {
      // await client.connect(username, password); //开始连接
      await client.connect();// 一般需要输入密码,如:client.connect(username, password);
      print('mqtt连接啦');
    } catch (e) {
      client.disconnect();
    }
    if (client.connectionStatus?.state == MqttConnectionState.connected) {
    } else {
      client.disconnect();
    }

    client.subscribe("t1", MqttQos.atMostOnce);// 订阅的主题1
    client.subscribe("t2", MqttQos.atMostOnce);// 订阅的主题2
    //监听服务器发来的信息
    client.updates?.listen((List<MqttReceivedMessage<MqttMessage>> c) {
      final MqttPublishMessage recMess = c[0].payload as MqttPublishMessage;
      // 返回的数据
      final String pt = MqttPublishPayload.bytesToStringAsString(recMess.payload.message);
      print('订阅的主题:${c[0].topic}');
      print('服务器返回的数据信息:$pt');
      setState(() {
        _resStr = pt;
      });
    });
  }
  @override
  void initState() {
    super.initState();
    initClient();

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:const  Text("MQTT test",),backgroundColor: Colors.green,),
      body: Center(child: Text(_resStr,style: const TextStyle(fontSize: 40)),),
    );
  }
}

显示:

模仿第二点,向mosquitto发送代理后,手机显示:

本文参考资料:(感谢这位大佬!)Flutter框架高阶------使用MQTT协议进行信息传输_flutter mqtt-CSDN博客

相关推荐
伯伯熊勞5 小时前
GetX 巢狀路由教學:用三層 Navigator 做桌面多欄佈局
flutter
传奇开心果编程10 小时前
【现代声明式UI学与练】第9课 性能优化——渲染优化、列表优化、内存优化、启动优化
学习·flutter·react native·ui·性能优化·swiftui·android jetpack
m0_7381858212 小时前
Flutter 鸿蒙化实战:foundation_fluttify 适配 OpenHarmony,Fluttify 桥接层
flutter·华为·harmonyos·鸿蒙
m0_7381858212 小时前
Flutter 鸿蒙化实战:http_proxy 适配 OpenHarmony,HTTP 代理
flutter·http·华为·harmonyos·鸿蒙
m0_7381858212 小时前
Flutter 鸿蒙化实战:headset_connection_event 适配 OpenHarmony,耳机插拔监听
flutter·华为·harmonyos·鸿蒙
恋猫de小郭2 天前
Android CLI 支持 AI Agent 通过 Device Streaming 调试云真机
android·前端·flutter
m0_738185822 天前
Flutter 鸿蒙化实战:flutter_scankit 适配 OpenHarmony,华为 ScanKit 扫码
flutter·华为·harmonyos·鸿蒙
事圆则缓2 天前
Flutter 开发鸿蒙实战:从 OpenHarmony 适配版到 HAP 构建与插件接入
flutter·华为·harmonyos
天空之城--3 天前
Android一周动态:Android 18首次官宣、Compose Material3 1.4转正(5趋势+5资讯)
android·人工智能·flutter·架构·android jetpack
恋猫de小郭3 天前
Meta 分享怎么用 AI 迁移 Compose 项目不烧心
android·前端·flutter