天天看點

【微信小程式控制硬體 第13篇】安信可B站直播學習總結,微信小程式MQTT遠端控制ESP8266 NodeMCU,談談微信生态那些事;前言一、準備材料二、微信硬體雲初認識三、本項目實作原理四、本項目通訊協定五、百度天工伺服器 注冊六、ESP8266接入百度天工雲;七、微信小程式 websocket MQTT接入百度天工

【微信小程式控制硬體第1篇 】 全網首發,借助 emq 消息伺服器帶你如何搭建微信小程式的mqtt伺服器,輕松控制智能硬體!

【微信小程式控制硬體第2篇 】 開始微信小程式之旅,導入小程式Mqtt用戶端源碼,實作簡單的驗證和通訊于伺服器!

【微信小程式控制硬體第3篇 】 從軟體到硬體搭建一個微信小程式控制esp8266的項目,自定義通訊協定,為面試職位和比賽項目加分!

【微信小程式控制硬體第4篇 】 深度剖析微信公衆号配網 Airkiss 原理與過程,esp8266如何自定義回調參數給微信,實作綁定裝置第一步!

【微信小程式控制硬體第5篇 】理清接下來必須走的架構思想,學習下 JavaScript 的觀察者模式,在微信小程式多頁面同時接收到裝置推送事件!

【微信小程式控制硬體第6篇 】伺服器如何內建七牛雲存儲SDK,把使用者自定義裝置圖檔存儲在第三方伺服器!

【微信小程式控制硬體第7篇 】動起來做一個微信小程式Mqtt協定控制智能硬體的架構,為自己心裡全棧工程師夢想澆水!!

【微信小程式控制硬體第8篇 】微信小程式以 websocket 連接配接阿裡雲IOT物聯網平台mqtt伺服器,封裝起來使用就是這麼簡單!

【微信小程式控制硬體第9篇 】巧借阿裡雲物聯網平台的免費連接配接,從微信小程式顔色采集控制 esp8266 輸出七彩燈效果,中秋節來個直播如何?!

【微信公衆号控制硬體 第10篇 】如何在微信公衆号網頁實作連接配接mqtt伺服器教程!!

【微信小程式控制硬體 第11篇 】全網首發,微信小程式ble藍牙控制esp32,實作無需網絡也可以控制亮度開關。

【微信小程式控制硬體 第12篇 】微信小程式藍牙控制硬體應如何開發?為您全面解析微信小程式藍牙API的使用。

【微信小程式控制硬體 第13篇 】安信可B站直播學習總結,微信小程式MQTT遠端控制ESP8266 NodeMCU,談談微信生态那些事。

文章目錄

  • 前言
  • 一、準備材料
  • 二、微信硬體雲初認識
    • 總結
  • 三、本項目實作原理
  • 四、本項目通訊協定
  • 五、百度天工伺服器 注冊
  • 六、ESP8266接入百度天工雲;
    • 6.1 初始化LED驅動代碼
    • 6.2 初始化MQTT連接配接
    • 6.3 接受到伺服器下發資料的解析處理動作:
    • 6.4 裝置上報
  • 七、微信小程式 websocket MQTT接入百度天工
    • 另外,不要把我的部落格作為學習标準,我的隻是筆記,難有疏忽之處,如果有,請指出來,也歡迎留言哈!
【微信小程式控制硬體 第13篇】安信可B站直播學習總結,微信小程式MQTT遠端控制ESP8266 NodeMCU,談談微信生态那些事;前言一、準備材料二、微信硬體雲初認識三、本項目實作原理四、本項目通訊協定五、百度天工伺服器 注冊六、ESP8266接入百度天工雲;七、微信小程式 websocket MQTT接入百度天工

前言

    上周日晚上七點到九點,我在B站直播了一場 《微信小程式MQTT遠端控制ESP8266 NodeMCU》,過程中我已盡力講解目前微信硬體雲的各條術語,以及應用技術;然而在下發控制資料到 ESP8266 時候,竟然翻車了,後面自己私下仔細找bug,發現這個bug是之前遇過的,隻是當時頭腦不夠清晰去回憶和查找;

    總的來說,上半場我是挺滿意的,算是把一些術語理論帶給了大家,畢竟微信硬體雲也是很久沒維護了,現在出來了《騰訊連連》的微信小程式,支援配網和控制ESP8266,但是,微信硬體雲內建了微信公衆号的全部優勢,已經是成熟的方案了,這個面向個人和公司,都有很大的商業價值哦!

    然而,我發現過程中,還是有帶目的性來的噴子來帶節奏噴安信可如何如何不好,這種事情發現在我直播間,我是淡定的;因為,不管哪行哪業,都有這樣的人存在,包括最近的 “明星捐款道德綁架” ,看得直播越多,你就越發現:

    内心強大的人,是可以無視這種噴子,隻管做好自己即可!

    下面給大家看看直播回放:

【直播回放】微信小程式MQTT遠端控制安信可NodeMCU ESP8266。(上)

一、準備材料

材料
NodeMCU ESP8266子產品
微信小程式賬号
百度天工伺服器

二、微信硬體雲初認識

    這裡我們務必熟悉微信端控制裝置的各種接入方案和技術,就要從微信硬體雲熟悉:

  1. 微信公衆号配網: airkiss技術,功能為 通過 微信公衆号 帶WiFI功能的裝置模組快速連接配接到指定的路由器; ESP8266、ESP32和RTL8710等模組支援;
  2. 微信公衆号通訊: airsync技術,功能為 通過 微信公衆号與帶 藍牙功能的裝置模組互相通訊,比如我們常見的微信公衆号列印相片;
  3. 微信公衆号近場發現:也稱為 AirKiss區域網路發現功能,顧名思義,就是區域網路内可以發現已連接配接路由器的裝置。注意:這種隻能單向通訊, 裝置 ----> 公衆号!
  4. 微信公衆号 JS- SDK :微信公衆号開發也是網頁開發的一種,是以微信有專門的 微信公衆号 JS- SDK 開發資源包提供,能夠在網頁H5端調起配網接口使您的裝置連接配接路由器;
  5. 裝置直連微信硬體雲SDK:顧名思義,即為裝置直連微信硬體雲平台,打通硬體雲的生态連結;
  6. 裝置商雲連接配接微信硬體雲:廠商雲連接配接微信硬體雲方案是指裝置廠商使用自己的雲或第三方雲和微信硬體雲對接的方案。比如 蜂巢掃碼取快遞!

    裝置商雲連接配接微信硬體雲和裝置直連微信硬體雲的流程圖:

【微信小程式控制硬體 第13篇】安信可B站直播學習總結,微信小程式MQTT遠端控制ESP8266 NodeMCU,談談微信生态那些事;前言一、準備材料二、微信硬體雲初認識三、本項目實作原理四、本項目通訊協定五、百度天工伺服器 注冊六、ESP8266接入百度天工雲;七、微信小程式 websocket MQTT接入百度天工

總結

  1. 裝置商雲連接配接微信硬體雲務必 有自己的伺服器業務邏輯對接微信硬體雲! 大多數業務邏輯是在私有伺服器完成!
  2. 裝置直連微信硬體雲,那麼公司的嵌入式開發工程師務必熟透 裝置端SDK API的使用,因為這是根據微信硬體雲的入門文檔而開發!

以上2個方案接入,都要熟悉其 SDK文檔開發流程,有沒有一種标準的協定自己開發,不用直連微信硬體雲就可以控制呢?

答案:有!

三、本項目實作原理

【微信小程式控制硬體 第13篇】安信可B站直播學習總結,微信小程式MQTT遠端控制ESP8266 NodeMCU,談談微信生态那些事;前言一、準備材料二、微信硬體雲初認識三、本項目實作原理四、本項目通訊協定五、百度天工伺服器 注冊六、ESP8266接入百度天工雲;七、微信小程式 websocket MQTT接入百度天工

    注意角色:(裝置 --> esp8266,裝置商雲 --> 伺服器,微信用戶端 --> 微信小程式):

    先上圖,也請認真觀看上圖,這是我本篇實作的控制過程,也是我想到的控制過程!

概述:

  • ①:伺服器我們不用微信硬體雲,而是我們自己的伺服器,上位機就是微信用戶端,我們是在微信的環境下開發的,也就避免不了和微信打交道,避免不了要遵循微信開發的規範!是以要有一定的前端開發知識哦!也就是H5+css+javaSrcipt,微信的小程式開發和這個非常相似!如果想入門微信小程式開發,自己可以去琢磨!
  • ②:裝置商雲也就是我們的伺服器,僅僅做一個中轉信号處理,不做任何的消息存儲和分析哈!
  • ③:通訊過程是 esp8266上報消息到伺服器,伺服器轉發消息到微信小程式!反過來,微信小程式控制下發,先發送消息到伺服器,然後到esp8266!
  • ④:既然伺服器僅僅是一個中轉信号處理,那麼我們的微信小程式和esp8266的通訊協定,自己拟定就好,下面是我拟定的,也是本文項目的協定!

四、本項目通訊協定

  • 微信小程式下發控制的通訊協定:
主題 發送端 接收端 消息(JSON格式) 消息含義
/light/deviceOut 微信小程式 esp8266 “{“change”:“power”,“value”:true}” 開燈
“{“change”:“power”,“value”:“false”}” 關燈
“{“change”:“pwm”,“value”:50}” 調節亮度:value為亮度值 ,範圍 [0,100]
“{“change”:“query”,“value”:0}” 微信小程式主動請求最新狀态
  • esp8266上報同步的通訊協定:
主題 發送端 接收端 消息(JSON格式) 消息含義
/light/deviceIn esp8266 微信小程式 “{“power”:“false”,“brightNess”:50}” power為燈的狀态,brightNess是亮度值,範圍 [0,100]

五、百度天工伺服器 注冊

     注冊了之後,要拿到 MQTT 連接配接的參數,包括:

  • ESP8266 TCP MQTT 連接配接百度天工雲的參數:包括 域名、端口号、UserName、Password、clientId;
  • 微信小程式端 WebSocket MQTT 連接配接百度天工雲的參數:包括 域名、端口号、UserName、Password、clientId;

     具體的流程請看視訊回放;

六、ESP8266接入百度天工雲;

6.1 初始化LED驅動代碼

這裡我手上的安信可正版NodeMCU 上的藍色是GPIO2連接配接,并且低電平有效,非高電平有效哦!!其他的不知道哦!

//PWM 周期 100us(也就是10Khz)
#define PWM_PERIOD (100)
//pwm gpio口配置
#define CHANNLE_PWM_TOTAL 1 //一共1個通道
#define CHANNLE_PWM 0
#define PWM_OUT_IO_NUM 2 //燈管腳 也就是我們NodeMCU的藍燈
// pwm pin number
const uint32_t pinNum[CHANNLE_PWM_TOTAL] = {PWM_OUT_IO_NUM};
// don't alter it !!! dutys table, (duty/PERIOD)*depth , init
uint32_t setDuties[CHANNLE_PWM_TOTAL] = {50};
//相位設定,不懂的或者不需要的全部為0即可
int16_t phase[CHANNLE_PWM_TOTAL] = {
    0,
};

void TaskGpio(void *p)
{
    pwm_init(PWM_PERIOD, setDuties, CHANNLE_PWM_TOTAL, pinNum);
    //設定相位:具體有什麼用? 通路了解 https://blog.csdn.net/xh870189248/article/details/88526251#PWM_143
    pwm_set_phases(phase);
    //我司安信可出品的 NodeMCU的藍燈是低電平有效,設定反相低電平有效
    pwm_set_channel_invert(1ULL<< 0);
    //設定50%亮度
    pwm_set_start(50);
    vTaskDelete(NULL);
}
           

6.2 初始化MQTT連接配接

static void mqtt_app_start(void)
{
    esp_mqtt_client_config_t mqtt_cfg = {
        .event_handle = mqtt_event_handler,
        .host = "xxxxxx.mqtt.iot.gz.baidubce.com",
        .username = "xxxxxx/device",
        .password = "LXSFzu50zI5ezBrl",
        .port = 1883,
        .keepalive = 200,
    };
    esp_mqtt_client_handle_t client = esp_mqtt_client_init(&mqtt_cfg);
    esp_mqtt_client_start(client);
}
           

6.3 接受到伺服器下發資料的解析處理動作:

務必看準協定,再敲代碼!

ESP_LOGI(TAG, "MQTT_EVENT_DATA");
        {
            首先整體判斷是否為一個json格式的資料
            cJSON *pJsonRoot = cJSON_Parse(event->data);
            //如果是否json格式資料
            if (pJsonRoot == NULL)
            {
                break;
            }
            cJSON *pChange = cJSON_GetObjectItem(pJsonRoot, "change");
            cJSON *pValue = cJSON_GetObjectItem(pJsonRoot, "value");

            //判斷字段是否pChange格式
            if (pChange && pValue)
            {
                //用來列印伺服器的topic主題
                ESP_LOGI(TAG, "xQueueReceive topic: %.*s ", event->topic_len, event->topic);
                //列印用于接收伺服器的json資料
                ESP_LOGI(TAG, "xQueueReceive payload: %.*s",event->data_len, event->data);
                ESP_LOGI(TAG, "esp_get_free_heap_size : %d \n", esp_get_free_heap_size());

                //判斷字段是否string類型
                if (cJSON_IsString(pChange))
                    printf("get pChange:%s \n", pChange->valuestring);
                else
                    break;

                //擷取最新的狀态,對應的擷取溫濕度按鈕
                if (strcmp(pChange->valuestring, "query") == 0)
                {
                }
                //收到伺服器的開關燈指令
                else if (strcmp(pChange->valuestring, "power") == 0)
                {
                    //開燈
                    if (strcmp(pValue->valuestring, "true") == 0)
                    {
                        pwm_set_start(100);
                    }
                    //關燈
                    else
                    {
                        pwm_set_start(0);
                    }
                }
                //收到伺服器的調節亮度燈指令
                else if (strcmp(pChange->valuestring, "pwm") == 0)
                {
                    pwm_set_start(pValue->valueint);
                    // 主動發送數組到序列槽
                }
                //每次下發成功控制都要主動上報給伺服器
                post_data_to_clouds();
            }
            else
                printf("get pChange failed \n");
             //删除cjson,釋放記憶體
            cJSON_Delete(pJsonRoot);
           

6.4 裝置上報

/**
 * @description: 上報資料給伺服器
 * @param {type} 
 * @return: 
 */
static void post_data_to_clouds()
{

    cJSON *pRoot = cJSON_CreateObject();
    uint32_t duty_p = 0;
    //擷取目前的pwm輸出百分比
    if (pwm_get_duty(CHANNLE_PWM, &duty_p) != ESP_OK)
    {
        printf("Error in getting period...\n\n");
    }
    //是否為0,否則就是開燈狀态!
    if (duty_p != 0)
        cJSON_AddBoolToObject(pRoot, "power", true);
    else
        cJSON_AddBoolToObject(pRoot, "power", false);
    //上報pwm百分比,作為亮度參數給伺服器
    cJSON_AddNumberToObject(pRoot, "brightNess", duty_p);
    //格式化為字元串
    char *s = cJSON_Print(pRoot);
    //釋出消息
    esp_mqtt_client_publish(client, MQTT_DATA_PUBLISH, s, strlen(s), 1, 0);
    //删除json結構體,釋放記憶體
    cJSON_free((void *)s);
    cJSON_Delete(pRoot);
}
           

這時候,我們可以在背景模拟小程式連接配接伺服器,進而控制 ESP8266 ;

【微信小程式控制硬體 第13篇】安信可B站直播學習總結,微信小程式MQTT遠端控制ESP8266 NodeMCU,談談微信生态那些事;前言一、準備材料二、微信硬體雲初認識三、本項目實作原理四、本項目通訊協定五、百度天工伺服器 注冊六、ESP8266接入百度天工雲;七、微信小程式 websocket MQTT接入百度天工

七、微信小程式 websocket MQTT接入百度天工

上面的裝置 ESP8266 是通過TCP MQTT接入天工,而 微信小程式是屬于網頁前端,是以走 websocket MQTT協定;

這裡已有一個開源庫,內建了 實作微信小程式連接配接mqtt伺服器,可控制esp8266智能硬體等需求。

https://github.com/xuhongv/WeChatMiniEsp8266

下載下傳之後,導進 微信小程式開發工具,打開檔案

WeChatMiniEsp8266/pages/simpleDemo

修改連接配接參數:伺服器域名,使用者名、密碼等參數;

如需,美化UI等操作,請自行修改UI設計或內建代碼到您項目去哦!

另外,不要把我的部落格作為學習标準,我的隻是筆記,難有疏忽之處,如果有,請指出來,也歡迎留言哈!

  • 玩轉

    esp8266

    帶你飛、加群

    QQ

    群,不喜的朋友勿噴勿加:434878850
  • 個人郵箱:[email protected] 24小時線上,有發必回複!
  • esp8266源代碼學習彙總(持續更新,歡迎star):https://github.com/xuhongv/StudyInEsp8266
  • esp32源代碼學習彙總(持續更新,歡迎star):https://github.com/xuhongv/StudyInEsp32
  • 關注下面微信公衆号二維碼,幹貨多多,第一時間推送!
【微信小程式控制硬體 第13篇】安信可B站直播學習總結,微信小程式MQTT遠端控制ESP8266 NodeMCU,談談微信生态那些事;前言一、準備材料二、微信硬體雲初認識三、本項目實作原理四、本項目通訊協定五、百度天工伺服器 注冊六、ESP8266接入百度天工雲;七、微信小程式 websocket MQTT接入百度天工
下一篇: python style