当前位置:   article > 正文

Android+MQTT(Android APP 连接至MQTT服务器)_android mqtt

android mqtt

这段时间因为毕设的需求,接触学习了一下用Android app连接MQTT服务器,然后对下位机(STM32/ESP8266)进行数据通讯的一个小设计,本篇文章介绍app+MQTT服务器这一段。

实现原理:

这里设计的是一个监测控制智能风扇的APP,可以实时监测当前温度、湿度及下位机的传感器、控制器件的一些状态。

一、设计流程:

  1. Android app项目创建;
  2. UI控制界面设计;
  3. 导入MQTT jar包;
  4. 配置联网权限;
  5. 配置MQTT服务器连接参数;
  6. MQTT.fx实现联调;

二、设计实现

1、Android app项目创建

项目创建这里就不过多赘述了!

2、UI控制界面设计

我这里主要是以毕设的需求设计的,所以比较简单;

模拟器界面

 手机app界面

 

这个显示界面代码相对简单,有需要的可以参考一下,代码如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:orientation="vertical"
  8. tools:context=".MainActivity">
  9. <LinearLayout
  10. android:layout_width="match_parent"
  11. android:orientation="vertical"
  12. android:background="#078307"
  13. android:layout_height="match_parent">
  14. <LinearLayout
  15. android:layout_width="match_parent"
  16. android:layout_height="78dp">
  17. <TextView
  18. android:layout_width="match_parent"
  19. android:layout_marginTop="10dp"
  20. android:text="智能温控风扇系统设计"
  21. android:textSize="24sp"
  22. android:layout_marginLeft="6dp"
  23. android:layout_gravity="center"
  24. android:textColor="@color/white"
  25. android:layout_height="wrap_content"/>
  26. </LinearLayout>
  27. <LinearLayout
  28. android:layout_width="match_parent"
  29. android:background="#FAF6F6"
  30. android:orientation="vertical"
  31. android:layout_height="710dp">
  32. <LinearLayout
  33. android:layout_width="match_parent"
  34. android:layout_marginTop="20dp"
  35. android:layout_height="wrap_content">
  36. <androidx.cardview.widget.CardView
  37. android:layout_width="match_parent"
  38. android:layout_height="200dp"
  39. android:layout_marginLeft="10dp"
  40. android:layout_marginRight="10dp"
  41. app:cardCornerRadius="20dp">
  42. <ImageView
  43. android:id="@+id/m_im_1"
  44. android:layout_width="wrap_content"
  45. android:src="@drawable/img_3"
  46. android:layout_height="wrap_content"/>
  47. </androidx.cardview.widget.CardView>
  48. </LinearLayout>
  49. <LinearLayout
  50. android:layout_width="match_parent"
  51. android:layout_marginTop="30dp"
  52. android:orientation="vertical"
  53. android:layout_height="300dp">
  54. <LinearLayout
  55. android:layout_width="match_parent"
  56. android:layout_marginTop="30sp"
  57. android:orientation="horizontal"
  58. android:layout_height="wrap_content">
  59. <TextView
  60. android:id="@+id/m_temp"
  61. android:layout_width="wrap_content"
  62. android:text="温度:0 ℃"
  63. android:textSize="16sp"
  64. android:layout_weight="1"
  65. android:textColor="@color/black"
  66. android:layout_marginLeft="30dp"
  67. android:layout_height="wrap_content"/>
  68. <TextView
  69. android:id="@+id/m_humi"
  70. android:layout_weight="1"
  71. android:layout_width="wrap_content"
  72. android:text="湿度:0 %"
  73. android:textSize="16sp"
  74. android:textColor="@color/black"
  75. android:layout_marginLeft="30dp"
  76. android:layout_height="wrap_content"/>
  77. </LinearLayout>
  78. <LinearLayout
  79. android:layout_width="match_parent"
  80. android:layout_marginTop="50dp"
  81. android:padding="30dp"
  82. android:layout_height="wrap_content">
  83. <TextView
  84. android:layout_width="wrap_content"
  85. android:text="MQTT连接状态:"
  86. android:textColor="@color/black"
  87. android:textSize="16sp"
  88. android:layout_height="wrap_content"/>
  89. <TextView
  90. android:id="@+id/m_mqtt"
  91. android:layout_width="wrap_content"
  92. android:text=" "
  93. android:textColor="@color/black"
  94. android:textSize="16sp"
  95. android:layout_height="wrap_content"/>
  96. </LinearLayout>
  97. </LinearLayout>
  98. </LinearLayout>
  99. <LinearLayout
  100. android:layout_width="match_parent"
  101. android:orientation="vertical"
  102. android:layout_height="match_parent">
  103. <LinearLayout
  104. android:layout_width="match_parent"
  105. android:layout_height="wrap_content">
  106. <ImageButton
  107. android:layout_width="30dp"
  108. android:layout_marginLeft="10dp"
  109. android:layout_marginRight="10dp"
  110. android:layout_weight="1"
  111. android:layout_height="40dp"/>
  112. <ImageButton
  113. android:layout_width="30dp"
  114. android:layout_marginRight="10dp"
  115. android:layout_weight="1"
  116. android:layout_height="40dp"/>
  117. <ImageButton
  118. android:layout_width="30dp"
  119. android:layout_marginRight="10dp"
  120. android:layout_weight="1"
  121. android:layout_height="40dp"/>
  122. <ImageButton
  123. android:layout_width="30dp"
  124. android:layout_marginRight="10dp"
  125. android:layout_weight="1"
  126. android:layout_height="40dp"/>
  127. </LinearLayout>
  128. <LinearLayout
  129. android:layout_width="match_parent"
  130. android:orientation="horizontal"
  131. android:layout_height="wrap_content">
  132. <TextView
  133. android:layout_width="wrap_content"
  134. android:text="我的"
  135. android:gravity="center"
  136. android:textSize="16sp"
  137. android:layout_weight="1"
  138. android:layout_marginLeft="10dp"
  139. android:textColor="@color/white"
  140. android:layout_height="wrap_content"/>
  141. <TextView
  142. android:layout_width="wrap_content"
  143. android:text="我的"
  144. android:gravity="center"
  145. android:textSize="16sp"
  146. android:layout_weight="1"
  147. android:layout_marginLeft="10dp"
  148. android:textColor="@color/white"
  149. android:layout_height="wrap_content"/>
  150. <TextView
  151. android:layout_width="wrap_content"
  152. android:text="我的"
  153. android:gravity="center"
  154. android:textSize="16sp"
  155. android:layout_weight="1"
  156. android:layout_marginLeft="10dp"
  157. android:textColor="@color/white"
  158. android:layout_height="wrap_content"/>
  159. <TextView
  160. android:layout_width="wrap_content"
  161. android:text="我的"
  162. android:gravity="center"
  163. android:textSize="16sp"
  164. android:layout_weight="1"
  165. android:layout_marginRight="10dp"
  166. android:layout_marginLeft="10dp"
  167. android:textColor="@color/white"
  168. android:layout_height="wrap_content"/>
  169. </LinearLayout>
  170. </LinearLayout>
  171. </LinearLayout>
  172. </LinearLayout>

3、导入MQTT jar包

进入正题,开始导入MQTT所需要的jar包:

jar包链接 链接:https://pan.baidu.com/s/1hLt1xiL67dhbJ3v3MKfUlw 
提取码:wmmh

下载jar包后直接复制这个jar包

 

然后给粘贴至libs目录下

 点击OK即可

 导入

 

然后鼠标右键给它添加依赖

点击OK

 

等待构建完成即可.

此时我们来到java代码界面敲MQTT就可以看到很多方法

 

 好,到了这一步就可以添加MQTT的配置代码了

在onCreate后面添加下列代码

 添加代码

  1. // MQTT初始化
  2. private void Mqtt_init()
  3. {
  4. try {
  5. //host为主机名,test为clientid即连接MQTT的客户端ID,一般以客户端唯一标识符表示,MemoryPersistence设置clientid的保存形式,默认为以内存保存
  6. client = new MqttClient(host, mqtt_id,
  7. new MemoryPersistence());
  8. //MQTT的连接设置
  9. MqttConnectOptions options = new MqttConnectOptions();
  10. //设置是否清空session,这里如果设置为false表示服务器会保留客户端的连接记录,这里设置为true表示每次连接到服务器都以新的身份连接
  11. options.setCleanSession(false);
  12. //设置连接的用户名
  13. options.setUserName(userName);
  14. //设置连接的密码
  15. options.setPassword(passWord.toCharArray());
  16. // 设置超时时间 单位为秒
  17. options.setConnectionTimeout(10);
  18. // 设置会话心跳时间 单位为秒 服务器会每隔1.5*20秒的时间向客户端发送个消息判断客户端是否在线,但这个方法并没有重连的机制
  19. options.setKeepAliveInterval(20);
  20. //设置回调
  21. client.setCallback(new MqttCallback() {
  22. @Override
  23. public void connectionLost(Throwable cause) {
  24. //连接丢失后,一般在这里面进行重连
  25. System.out.println("connectionLost----------");
  26. //startReconnect();
  27. }
  28. @Override
  29. public void deliveryComplete(IMqttDeliveryToken token) {
  30. //publish后会执行到这里
  31. System.out.println("deliveryComplete---------"
  32. + token.isComplete());
  33. }
  34. @Override
  35. public void messageArrived(String topicName, MqttMessage message)
  36. throws Exception {
  37. //subscribe后得到的消息会执行到这里面
  38. System.out.println("messageArrived----------");
  39. Message msg = new Message();
  40. msg.what = 3; //收到消息标志位
  41. // msg.obj = topicName + "---" +message.toString();
  42. msg.obj = message.toString();
  43. handler.sendMessage(msg); // hander 回传
  44. }
  45. });
  46. } catch (Exception e) {
  47. e.printStackTrace();
  48. }
  49. }
  50. // MQTT连接函数
  51. private void Mqtt_connect() {
  52. new Thread(new Runnable() {
  53. @Override
  54. public void run() {
  55. try {
  56. if(!(client.isConnected()) ) //如果还未连接
  57. {
  58. MqttConnectOptions options = null;
  59. client.connect(options);
  60. Message msg = new Message();
  61. msg.what = 31;
  62. handler.sendMessage(msg);
  63. }
  64. } catch (Exception e) {
  65. e.printStackTrace();
  66. Message msg = new Message();
  67. msg.what = 30;
  68. handler.sendMessage(msg);
  69. }
  70. }
  71. }).start();
  72. }
  73. // MQTT重新连接函数
  74. private void startReconnect() {
  75. scheduler = Executors.newSingleThreadScheduledExecutor();
  76. scheduler.scheduleAtFixedRate(new Runnable() {
  77. @Override
  78. public void run() {
  79. if (!client.isConnected()) {
  80. Mqtt_connect();
  81. }
  82. }
  83. }, 0*1000, 10 * 1000, TimeUnit.MILLISECONDS);
  84. }
  85. // 订阅函数 (下发任务/命令)
  86. private void publishmessageplus(String topic,String message2)
  87. {
  88. if (client == null || !client.isConnected()) {
  89. return;
  90. }
  91. MqttMessage message = new MqttMessage();
  92. message.setPayload(message2.getBytes());
  93. try {
  94. client.publish(topic,message);
  95. } catch (MqttException e) {
  96. e.printStackTrace();
  97. }
  98. }
  99. /* ========================================================================================== */

不出意外,这里会出现一堆报红

 

不用慌,这是因为有一些方法还没构建,有一些参数还没声明,我们一步一步来;

光标放置后按alt+Enter后,有部分参数就会自动构建,开干

 然后把下列处理代码添加至主函数(这个位置)

 

  1. Mqtt_init();
  2. startReconnect();
  3. handler = new Handler(Looper.myLooper()) {
  4. @SuppressLint("SetTextI18n")
  5. public void handleMessage(Message msg) {
  6. super.handleMessage(msg);
  7. switch (msg.what){
  8. case 1: //开机校验更新回传
  9. break;
  10. case 2: // 反馈回传
  11. break;
  12. case 3: //MQTT 收到消息回传 UTF8Buffer msg=new UTF8Buffer(object.toString());
  13. System.out.println(msg.obj.toString()); // 显示MQTT数据
  14. break;
  15. case 30: //连接失败
  16. Toast.makeText(MainActivity.this,"连接失败" ,Toast.LENGTH_SHORT).show();
  17. break;
  18. case 31: //连接成功
  19. Toast.makeText(MainActivity.this,"连接成功" ,Toast.LENGTH_SHORT).show();
  20. try {
  21. client.subscribe(mqtt_sub_topic,1);
  22. } catch (MqttException e) {
  23. e.printStackTrace();
  24. }
  25. break;
  26. default:
  27. break;
  28. }
  29. }
  30. };
  31. /* -------------------------------------------------------------------------------------- */

好,把这个配置代码加上去

  1. private ScheduledExecutorService scheduler;
  2. private MqttClient client;
  3. private Handler handler;
  4. private String host = "tcp://114.132.53.92:1883"; // TCP协议
  5. private String userName = "aixin123456";
  6. private String passWord = "aixin123456";
  7. private String mqtt_id = "1353023461";
  8. private String mqtt_sub_topic = "mqtt135";
  9. private String mqtt_pub_topic = "esp135";

 

那么到达这一步就不会有报错了!  解决

4、配置联网权限

在事件清单中添加联网权限

  1. <!--允许程序打开网络套接字-->
  2. <uses-permission android:name="android.permission.INTERNET" />
  3. <!--允许程序获取网络状态-->
  4. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

5、配置服务器参数

这里的服务器连接的参数注意一定要修改,这里连接服务器地址可以填写我的服务器地址(“tcp://114.132.53.92:1883”),当然也可以使用官方公用的MQTT服务器地址或者用别人的都是可以的;然后就是用户名和密码,一定不要用这里我填写的这个,可以用自己的QQ加上一些英文,或者自定义一些内容都是可以的,注意不要用我这里填写的这个!!! 然后就是订阅和发布号可以随意起,建议不用下面这些!


    private String host = "tcp://114.132.53.92:1883";     // TCP协议
    private String userName = "aixin123456";
    private String passWord = "aixin123456";
    private String mqtt_id = "1353023461";
    private String mqtt_sub_topic = "mqtt135";
    private String mqtt_pub_topic = "esp135";

好!配置完以上步骤之后,咱们就可以下载到模拟机或者真机测试一下了,这里我用的真机测试,不用慌!直接下载运行,弹窗弹出连接成功!完美

真机运行画面

 

那么到这里我们的app已经成功连接了MQTT服务器了!

6、MQTT.fx实现联调

这里需要使用到一个测试软件 MQTT.fx

这里不提供软件安装包(我的找不到按转包在哪了),网上有教程,也可以去官网下载

这里的连接服务器地址填114.132.53.92或者是你自己app中连接的地址,端口1883,clientld_ID可以自己填

 用户名和密码也可以自己填写(需要注意的是,这里填写的这些其实是模拟你下位机的连接用户信息,也就是你STM32通过ESP8266连接MQTT服务器的信息) 

点击这里,填写发布号以及填写要发往app中的信息,点击Publish

 

然后就可以看的到Android Studio调试台下的接收到了数据,到了这里是不是就实现了下位机上传数据至MQTT服务器至客户端手机APP

这里再介绍一种简单的Json格式数据处理吧!

简单的Json数据格式模拟下位机数据

{"name":"ESP135","Temp":"26","Humi":"78"} 

这里我们就要在app中添加一个Json数据处理的函数,形参就是需要处理的字符串

  1. // Json数据解析
  2. private void parseJsonobj(String jsonobj){
  3. // 解析json
  4. try {
  5. JSONObject jsonObject = new JSONObject(jsonobj);
  6. String name = jsonObject.getString("name");
  7. String temp = jsonObject.getString("Temp");
  8. String humi = jsonObject.getString("Humi");
  9. m_temp.setText("温度: "+temp+" ℃ ");
  10. m_humi.setText("湿度: "+humi+" % ");
  11. } catch (JSONException e) {
  12. e.printStackTrace();
  13. }
  14. }

app中接收到的数据

 经过处理后就可以在我们app的控件中以指定格式显示

 这样是不是感觉就出来了!好到此那么我们上位机数据接收就差不多了

嗯,那么app向下位机发送数据呢!其实也就是订阅号与STM32+ESP的信息关联后,经过一个函数就可以下发数据了,下一篇下位机(STM32+ESP)再详细介绍吧!发送的函数已经添加在上述的代码中了;这里贴出来一个示例代码,简单介绍一下,一个按键然后下发数据 publishmessageplus(mqtt_pub_topic,"{\"set_curtain\": \"fB}");

  1. // 关闭控件点击事件
  2. private void button_guan(View v){
  3. if(curtain_flag == 0){
  4. curtain_flag = 1;
  5. // 发送指令让下位机关闭窗帘
  6. publishmessageplus(mqtt_pub_topic,"{\"set_curtain\": \"fB}");
  7. }
  8. mtv_1.setText("关闭");
  9. }

最后,嗯就这样!第一次写这么长篇的学习记录,也是对自己所学内容的一种巩固,希望能帮到有需要的同志,如果有错误的地方还请多多见谅!谢谢!!!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/502664
推荐阅读
相关标签
  

闽ICP备14008679号