ESP32 web 对接华为云平台--MQTT协议

文章目录

  • 前言
  • 一、MQTT协议
  • 二、如何使用MQTT协议对接华为云
    • 1.注册华为云账号
    • 2.设备接入中创建资源空间
    • 3.如何连接
    • 4.通过MQTT.fx工具做初步对接
      • 4.1 设置连接信息
      • 4.2 连接平台
    • 5.查看平台设备信息
  • 三. 设备测对接平台
    • 1.ESP测引入MQTT库
    • 2.编码
      • 2.1前端编码修改
      • 2.2 后端接口修改
    • 3.MQTT编码
    • 4.添加编译文件
    • 5.正常编译烧写
    • 6. 结果展示
  • 总结

前言

今天这篇文章，对于刚接触物联网协议或者刚接触ESP这款模组并且想对接云平台的人特别有帮助。还希望大家耐心的看完。
在今天的实验里面，你需要有三个概念。
第一什么是MQTT协议，
第二 MQTT协议又是如何连接的，
第三点如何在官方的web demo上添加后端服务和前端页面的接口，实验在线MQTT数据传输。

一、MQTT协议

MQTT协议是一个物联网协议，简单来说就是设备和云平台之间的一种通信传输方式，就好比，在中国大家用中国话来交流，在美国用美国话交流。这就对应着两种通信协议。具体的细节，我的建议还是去百度看看。对于初学者，有这个通信的概念即可。

二、如何使用MQTT协议对接华为云

1.注册华为云账号

这个就不说了，去百度找华为云的官方，免费注册。

2.设备接入中创建资源空间

这个可以百度一下华为云设备接入MQTT设备注册

3.如何连接

首先，我们要参考文档 。在这个文档里面，我们可以看到，我们连接的时候需要填写设备ID，用户名和密码。
在这里插入图片描述

其次，怎么获取这一套数据，是目前我们要思考的问题。好在官方直接给出了加密运算的方式。参数计算链接

在下图中，重点关注设备ID和密钥，密钥是在你创建设备的时候就有的
在这里插入图片描述

注意上图和下图的设备ID不一样，这是因为我想要告诉大家这个密钥在什么地方，单独创建了一下。

在这里插入图片描述

通过下面的页面，我们填入上述的设备ID和密钥，获取新的三元素，我们就可以对接设备。

在这里插入图片描述

4.通过MQTT.fx工具做初步对接

4.1 设置连接信息

在这里插入图片描述

4.2 连接平台

在这里插入图片描述

5.查看平台设备信息

在这里插入图片描述

三. 设备测对接平台

1.ESP测引入MQTT库

官方的MQTT demo路径 /esp/esp-idf/examples/protocols/mqtt

在上述的方案中，我们已经完成了电脑模拟设备对接的过程。接下来，我们要用我们的ESP模组完成云平台的对接。还是用之前的web demo。

2.编码

2.1前端编码修改

注意我是将Chart.vue中的内容注释掉替换成了下面的内容

<template><v-container><v-layout text-xs-center wrap><v-flex xs12 sm6 offset-sm3><v-card hover><v-card-title style="font-weight: 800; font-size: 18px">阿里云平台数据发送测试</v-card-title><div style="width: 90%; margin: 0 auto; padding: 20px"><v-text-fieldv-model="mesdata"label="测试数据"hint="输入测试数据"></v-text-field><v-btnblockcolor="success"size="large"type="submit"@click="submitdata">提交</v-btn></div></v-card></v-flex></v-layout></v-container>
</template><script>
export default {data() {return {mesdata: null,};},methods: {submitdata() {this.$ajax.post("/api/v1/mqtt/echo", {data: this.mesdata,}).then((data) => {console.log(data);}).catch((error) => {console.log(error);});this.mesdata = "";},},destroyed() {},mounted() {},
};
</script>

2.2 后端接口修改

加入一个后端接口,方便前端界面传输数据

// mqtt_send_data_toserver 是我自己封装的一个发送函数,代码都会给大家
extern void mqtt_send_data_toserver(char *message);
static esp_err_t mqtt_echo_handler(httpd_req_t *req)
{int total_len = req->content_len;int cur_len = 0;char message[256] = {0};char *buf = ((rest_server_context_t *)(req->user_ctx))->scratch;int received = 0;if (total_len >= SCRATCH_BUFSIZE){/* Respond with 500 Internal Server Error */httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "content too long");return ESP_FAIL;}while (cur_len < total_len){received = httpd_req_recv(req, buf + cur_len, total_len);if (received <= 0){/* Respond with 500 Internal Server Error */httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Failed to post control value");return ESP_FAIL;}cur_len += received;}buf[total_len] = '\0';cJSON *root = cJSON_Parse(buf);//注意这里,这边是为了解析前端页面的数据strcpy(message, cJSON_GetObjectItem(root, "data")->valuestring);cJSON_Delete(root);httpd_resp_sendstr(req, "Post control value successfully");mqtt_send_data_toserver(message);return ESP_OK;
}

在start_rest_server 函数中添加下面的代码 (注册解析前端方法到系统中)

    httpd_uri_t mqtt_post_uri = {.uri = "/api/v1/mqtt/echo",.method = HTTP_POST,.handler = mqtt_echo_handler,.user_ctx = rest_context};httpd_register_uri_handler(server, &mqtt_post_uri);

3.MQTT编码


/** SPDX-FileCopyrightText: 2022-2023 Espressif Systems (Shanghai) CO LTD** SPDX-License-Identifier: Apache-2.0*/#include <stdio.h>
#include <stdint.h>
#include <stddef.h>
#include <string.h>
#include "esp_system.h"
#include "nvs_flash.h"
#include "esp_event.h"
#include "esp_netif.h"
#include "cJSON.h"
#include "esp_log.h"
#include "mqtt_client.h"#define CLIENTID ""
#define USERNAME ""
#define PASSWORD ""
#define SERVERURL "mqtt://121.36.42.100:1883"#define PUSHTOPIC "$oc/devices/你的设备ID/sys/properties/report"esp_mqtt_client_handle_t mqtt_client;static const char *MQTTTAG = "MQTT";static void log_error_if_nonzero(const char *message, int error_code)
{if (error_code != 0){ESP_LOGE(MQTTTAG, "Last error %s: 0x%x", message, error_code);}
}void mqtt_send_data_toserver(char *message)
{int msg_id;char obj_name[10] = {0};double rounded = 0;cJSON *root = cJSON_CreateObject();// 创建数组对象cJSON *array = cJSON_CreateArray();// 创建对象cJSON *obj = cJSON_CreateObject();cJSON_AddStringToObject(obj, "service_id", "echo");cJSON *values = cJSON_CreateObject();cJSON_AddStringToObject(values, "read", message);cJSON_AddItemToObject(obj, "properties", values);// 将对象添加到数组中cJSON_AddItemToArray(array, obj);// 将数组添加到根节点中cJSON_AddItemToObject(root, "services", array);const char *sys_info = cJSON_Print(root);ESP_LOGI(MQTTTAG, "%s", sys_info);msg_id = esp_mqtt_client_publish(mqtt_client, PUSHTOPIC, sys_info, 0, 1, 1);free((void *)sys_info);cJSON_Delete(root);return;
}static void mqtt5_event_handler(void *handler_args, esp_event_base_t base, int32_t event_id, void *event_data)
{ESP_LOGD(MQTTTAG, "Event dispatched from event loop base=%s, event_id=%" PRIi32, base, event_id);esp_mqtt_event_handle_t event = event_data;esp_mqtt_client_handle_t client = event->client;int msg_id;switch ((esp_mqtt_event_id_t)event_id){case MQTT_EVENT_CONNECTED:ESP_LOGI(MQTTTAG, "MQTT_EVENT_CONNECTED");mqtt_send_data_toserver("sadsadsadas");break;case MQTT_EVENT_DISCONNECTED:ESP_LOGI(MQTTTAG, "MQTT_EVENT_DISCONNECTED");esp_mqtt_client_reconnect(client);break;case MQTT_EVENT_SUBSCRIBED:ESP_LOGI(MQTTTAG, "MQTT_EVENT_SUBSCRIBED, msg_id=%d", event->msg_id);break;case MQTT_EVENT_UNSUBSCRIBED:/* 退订绑定的服务，目前先不处理 */ESP_LOGI(MQTTTAG, "MQTT_EVENT_UNSUBSCRIBED, msg_id=%d", event->msg_id);break;case MQTT_EVENT_PUBLISHED:/* 推送绑定的事件 */ESP_LOGI(MQTTTAG, "MQTT_EVENT_PUBLISHED, msg_id=%d", event->msg_id);break;case MQTT_EVENT_DATA:/* 数据下发，先不处理 */ESP_LOGI(MQTTTAG, "MQTT_EVENT_DATA");break;case MQTT_EVENT_ERROR:ESP_LOGI(MQTTTAG, "MQTT_EVENT_ERROR return code %d", event->error_handle->connect_return_code);if (event->error_handle->error_type == MQTT_ERROR_TYPE_TCP_TRANSPORT){log_error_if_nonzero("reported from esp-tls", event->error_handle->esp_tls_last_esp_err);log_error_if_nonzero("reported from tls stack", event->error_handle->esp_tls_stack_err);log_error_if_nonzero("captured as transport's socket errno", event->error_handle->esp_transport_sock_errno);ESP_LOGI(MQTTTAG, "Last errno string (%s)", strerror(event->error_handle->esp_transport_sock_errno));}break;default:ESP_LOGI(MQTTTAG, "Other event id:%d", event->event_id);break;}
}int mqtt5_app_start(void)
{esp_mqtt_client_config_t mqtt_cfg = {.broker.address.uri = SERVERURL,.credentials.client_id = CLIENTID,.credentials.username = USERNAME,.credentials.authentication.password = PASSWORD,.network.disable_auto_reconnect = true};ESP_LOGI(MQTTTAG, "MQTT Server url:%s Client Id %s", mqtt_cfg.broker.address.uri, mqtt_cfg.credentials.client_id);mqtt_client = esp_mqtt_client_init(&mqtt_cfg);if (mqtt_client == NULL){return 1;}/* The last argument may be used to pass data to the event handler, in this example mqtt_event_handler */esp_mqtt_client_register_event(mqtt_client, ESP_EVENT_ANY_ID, mqtt5_event_handler, NULL);esp_mqtt_client_start(mqtt_client);return 0;
}

4.添加编译文件

在这里插入图片描述

5.正常编译烧写

这个就不再叙述了,查看以往的案例

6. 结果展示

平台端的显示

在这里插入图片描述

网页端的发送 (注意 我是修改的Chart.vue 这个文件的内容)

在这里插入图片描述

后台日志显示 (按照这个报文形势发送)

在这里插入图片描述

{"services": [{"service_id": "echo","properties": {"read": "xxxxx"}}]
}

总结

今天完成了ESP 对接华为云的案例,里面还是有点弯弯绕的.有疑问就提出来,我都会回复.
后面再有好玩的案例,再发出来看.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/713831.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

element-plus+vue3表单含图片（可预览）（线上图片）

element-plus+vue3表单含图片（可预览）（线上图片）

一、要实现的效果&#xff1a; 二、如果期间出现这样的效果&#xff08;表格穿透过来了&#xff09;&#xff0c;加上了这行代码就可以了&#xff1a; preview-teleported“true” 如果仅测试用&#xff0c;建议使用线上图片链接的形式&#xff0c;免得本地地址不生效&#xf…
阅读更多...
yolov9从头开始训练

yolov9从头开始训练

yolov9从头开始训练 一、准备数据集 数据集相关文件存放布局如下 yolov9-datasets ├── train │ ├── images │ │ ├── image.jpg │ │ ├── │ └── labels │ ├── image.txt │ ├── ├── valid │ ├── images │ │ ├── image.jpg │ │ ├─…
阅读更多...
吴恩达deeplearning.ai:模型选择交叉验证测试集的训练方法

吴恩达deeplearning.ai:模型选择交叉验证测试集的训练方法

以下内容有任何不理解可以翻看我之前的博客哦&#xff1a;吴恩达deeplearning.ai专栏 在上一节中&#xff0c;我们了解了如何利用测试集来评估模型性能。今天我们来进一步完善这个想法&#xff0c;让你使用该技术自动选择一个更好的模型。 文章目录 模型选择交叉验证 Cross Va…
阅读更多...
SpringBoot 框架(上)

SpringBoot 框架(上)

SpringBoot SpringBoot概述依赖管理自动配置SpringBoot 注解使用ConfigurationImport(value {Cat.class,Dog.class})ImportResource(locations "classpath:beans.xml") yaml 标记语言概述基本语法数据类型字面量对象数组 使用细节 Rest 风格请求处理概述注意事项 接…
阅读更多...
vue2 开发记录

vue2 开发记录

el-select 如何修改选择项的样式/el-select-dropdown__item 文字上下显示 测试代码 <div stylemargin-left: 100px><!-- 测试代码--><el-select filterablesizemini><div classxxx-el-select><el-optionv-foritem in [{key:1,des:2,…
阅读更多...
AVT Prosilica GC Vision Cameras 相机视觉说明使用安装。具体详情内容可参看PDF目录内容。

AVT Prosilica GC Vision Cameras 相机视觉说明使用安装。具体详情内容可参看PDF目录内容。

AVT Prosilica GC Vision Cameras 相机视觉说明使用安装。具体详情内容可参看PDF目录内容。
阅读更多...
TikTok矩阵系统功能怎么写?常用源代码是什么?

TikTok矩阵系统功能怎么写?常用源代码是什么?

TikTok矩阵系统的功能是如何编写的?又有哪些常用的源代码支撑这些功能呢?本文将通过五段源代码的分享&#xff0c;为大家揭开TikTok矩阵系统的神秘面纱。 一、TikTok矩阵系统的核心功能 TikTok的矩阵系统涵盖了多个核心功能&#xff0c;包括但不限于用户管理、内容分发、推…
阅读更多...
【接口测试】HTTP协议介绍

【接口测试】HTTP协议介绍

目录 介绍 HTTP状态码 HTTP报文 请求方法 HTTP版本 HTTP标头 通用标头 请求标头 响应标头 get 编码 post 编码 RESTful风格 HTTPS 绝大多数的Web服务接口都是基于HTTP协议进行通信的&#xff0c;包括RESTful API和SOAP等。了解HTTP协议可以帮助测试人员理解接口的…
阅读更多...
【多线程】CAS详解

【多线程】CAS详解

目录 &#x1f334;什么是 CAS&#x1f338;CAS 伪代码 &#x1f38d;CAS 是怎么实现的&#x1f340;CAS 有哪些应⽤&#x1f338;实现原子类&#x1f338;实现自旋锁 &#x1f333;CAS 的 ABA 问题&#x1f338;**什么是 ABA 问题**&#xff1f;&#x1f338;ABA 问题引来的 B…
阅读更多...
智慧城市建设的新里程碑：公共服务电子支付大屏

智慧城市建设的新里程碑：公共服务电子支付大屏

随着科技的飞速发展&#xff0c;我们的生活正在经历前所未有的变革。电子支付的出现&#xff0c;无疑是这场变革中的一大亮点&#xff0c;它不仅改变了我们日常的支付方式&#xff0c;更成为智慧城市建设的重要一环&#xff0c;为公众提供了更加便捷、高效的服务体验。 在以前&…
阅读更多...
政府采购标书制作的要点解析

政府采购标书制作的要点解析

导语&#xff1a;政府采购是政府为满足公共利益&#xff0c;按照法定程序和标准&#xff0c;通过招标、竞争性谈判等方式&#xff0c;购买商品、工程和服务的行为。标书作为政府采购活动中的重要文件&#xff0c;其制作质量直接影响到项目的顺利进行。本文将围绕政府采购标书制…
阅读更多...
二路归并排序的算法设计和复杂度分析and周记

二路归并排序的算法设计和复杂度分析and周记

数据结构实验报告 实验目的: 通过本次实验&#xff0c;了解算法复杂度的分析方法&#xff0c;掌握递归算法时间复杂度的递推计算过程。 实验内容&#xff1a; 二路归并排序的算法设计和复杂度分析 实验过程&#xff1a; 1.算法设计 第一步&#xff0c;首先要将数组进行…
阅读更多...
【网站项目】314学生二手书籍交易平台

【网站项目】314学生二手书籍交易平台

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…
阅读更多...
JVM相关面试题（2024大厂高频面试题系列）

JVM相关面试题（2024大厂高频面试题系列）

一、JVM的组成 1、JVM由哪些部分组成&#xff0c;运行流程是什么&#xff1f; 回答&#xff1a;在JVM中共有四大部分&#xff0c;分别是Class Loader&#xff08;类加载器&#xff09;、Runtime Data Area&#xff08;运行时数据区&#xff0c;内存分区&#xff09;、Execut…
阅读更多...
MyBatis的补充用法

MyBatis的补充用法

说明&#xff1a;之前介绍过MyBatis的用法&#xff0c;像 用注解和Mapper.xml操作数据库、在Mapper.xml里写动态SQL。最近在一次用MyBatis批量更新数据库对象的场景中&#xff0c;意识到对MyBatis的一些标签用法不太熟悉&#xff0c;所以去 MyBatis官网 看了一些文档&#xff0…
阅读更多...
php httpfs链接hdfs

php httpfs链接hdfs

一.代码&#xff08;有bug&#xff09; GitHub - michaelbutler/php-WebHDFS: A PHP client for WebHDFS 二.调用代码 1.代码1.代码 require_once(../webhdfs/src/org/apache/hadoop/WebHDFS.php);require_once(../webhdfs/src/org/apache/hadoop/tools/Curl.php); require_o…
阅读更多...
什么是人才储备？如何做人才储备？

什么是人才储备？如何做人才储备？

很多小伙伴都会有企业面试被拒的情况&#xff0c;然后HR会告诉你&#xff0c;虽然没有录用你&#xff0c;但是你进入了他们的人才储备库&#xff0c;那么这个储备库有什么作用和特点呢&#xff1f;我们如何应用人才测评系统完善人才储备库呢&#xff1f; 人才储备一般有以下三…
阅读更多...
Python打发无聊时光：12.用PyQt实现简易的心电起搏器界面

Python打发无聊时光：12.用PyQt实现简易的心电起搏器界面

第一步&#xff1a;装PyQt库 pip install PyQt5 第二步&#xff1a;复制代码 import sys from PyQt5.QtWidgets import (QApplication, QMainWindow, QPushButton, QVBoxLayout,QWidget, QLabel, QProgressBar, QSlider, QLineEdit, QHBoxLayout) from PyQt5.QtCore import …
阅读更多...
软件分层(数据结构/软件逻辑上分层+举例),相连节点的概念+如何相连,为什么是层状结构(软件分层,网络协议分层+梳理协议顺序),协议分层(打电话例子)

软件分层(数据结构/软件逻辑上分层+举例),相连节点的概念+如何相连,为什么是层状结构(软件分层,网络协议分层+梳理协议顺序),协议分层(打电话例子)

目录 软件分层 介绍 举例 类的继承 虚拟文件系统 线程接口封装 虚拟地址空间 总结 为什么是层状的 软件分层 网络协议 原因 梳理协议顺序 相连节点 协议分层 引入 示例 实际上 逻辑上 制定出协议 软件分层 介绍 通过将软件系统划分为不同的层次,每一层都有…
阅读更多...
uniApp 调整小程序 单个/全部界面横屏展示效果

uniApp 调整小程序 单个/全部界面横屏展示效果

我们打开uni项目 小程序端运行 默认是竖着的一个效果 我们打开项目的 pages.json 给需要横屏的界面 的 style 属性 加上 "mp-weixin": {"pageOrientation": "landscape" }界面就横屏了 如果是要所有界面都横屏的话 就直接在pages.json 的 gl…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023