当前位置：首页 > news >正文

3 种方式玩转网络继电器！W55MH32 实现网页 + 阿里云 + 本地控制互通

news 2025/8/17 6:05:51

1 前言

2 项目环境

2.1 硬件准备

2.2 软件准备

2.3 方案图示

3 例程修改

4 功能验证

5. 总结

1 前言

HTTP（超文本传输协议，HyperText Transfer Protocol）是一种用于分布式、协作式、超媒体信息系统的应用层协议，基于 TCP/IP 通信协议来传递数据，是万维网（WWW）的数据通信的基础。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法，通过 HTTP 或者 HTTPS 协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI）来标识。以上是HTTP协议的简介，如想深入了解该协议，请参考mozilla网站上的介绍： HTTP 概述 - HTTP | MDN

MQTT是一种轻量级通信协议，基于TCP/IP，采用发布-订阅模式，广泛应用于物联网领域。

MQTT的工作原理围绕着三个核心部分：发布者（Publishers）、代理（Broker，也称服务器）和订阅者（Subscribers）。发布者负责发送消息到特定的主题（Topic），代理则接收这些消息并将其转发给所有订阅了该主题的订阅者。这种模式允许设备间异步通信，且设备不需要直接了解彼此的存在，从而降低了系统的复杂性。

W55MH32 是 WIZnet 新推出的高性能以太网单片机。它采用高性能 Arm® Cortex-M3 内核，主频最高达 216MHz，内置 1024KB FLASH、96KB SRAM 。尤为突出的是，其搭载 WIZnet TCP/IP offload 引擎（TOE），集成全硬件 TCP/IP 协议栈、MAC 及 PHY ，还配备 32KB 独立以太网收发缓存，供 8 个硬件 socket 使用，是真正的All-in-One解决方案。

2 项目环境

2.1 硬件准备

W55MH32L-EVB
一根网线
USB Type-C

2.2 软件准备

例程链接：w5500.com/w55mh32.html
开发环境：keil uvision 5
飞思创串口助手
浏览器
阿里云

2.3 方案图示

3 例程修改

1.我们把HTTP_Server的例程和MQTT&Aliyun的例程下载下来，我们对先对HTTP_Server的例程进行修改，我们创建一个web_server.c和web_server.h,并在web_server.c添加头文件以及全局变量和初始化

#include "user_main.h"
#include "web_server.h"
#include <stdio.h>
#include <string.h>
// 全局变量
uint8_t txBuff[2048] = {0};  // 发送缓冲区
uint8_t rxBuff[2048] = {0};  // 接收缓冲区
uint8_t socketCount = 8;      // 支持的Socket数量
uint8_t socketList[] = {0,1}; // Socket列表// LED状态管理
uint8_t led_status = 0;       // 0:关灯 1:开灯
uint8_t status_content[2] = "0"; // 状态页内容

2.创建HTML用户界面,主要包含开/关控制按钮（JavaScript事件）,实时调试信息面板,状态轮询机制（每2秒更新）,时间戳日志功能

uint8_t *contentName = "index.html";
uint8_t content[] = 
"<!doctype html>\n"
"<html lang=\"en\">\n"
"<head>\n"
"    <meta charset=\"GBK\">\n"
"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n"
"    <title>LED Control</title>\n"
"    <style>\n"
"        #light {\n"
"            width: 100px; height: 100px; border-radius: 50%;\n"
"            margin: 20px auto; border: 2px solid #333;\n"
"            transition: background-color 0.5s;\n"
"        }\n"
"        .light-on { background-color: yellow; box-shadow: 0 0 20px yellow; }\n"
"        .light-off { background-color: #ccc; }\n"
"        .btn { padding: 10px 20px; margin: 5px; }\n"
"        #debug { margin-top: 20px; padding: 10px; border: 1px solid #ccc; font-family: monospace; max-height: 200px; overflow-y: auto; }\n"
"    </style>\n"
"</head>\n"
"<body>\n"
"    <h1>LED Control Panel</h1>\n"
"    <button class=\"btn\" onclick=\"controlLED(1)\">开灯</button>\n"
"    <button class=\"btn\" onclick=\"controlLED(0)\">关灯</button>\n"
"    <div id=\"debug\">Debug information will appear here...</div>\n"
"    <script>\n"
"        const light = document.getElementById('light');\n"
"        const debugDiv = document.getElementById('debug');\n"
"        \n"
"        // 调试函数 - 在页面上显示调试信息\n"
"        function log(message) {\n"
"            console.log(message);\n"
"            debugDiv.innerHTML += '<p>' + new Date().toLocaleTimeString() + ': ' + message + '</p>';\n"
"            debugDiv.scrollTop = debugDiv.scrollHeight; // 自动滚动到底部\n"
"        }\n"
"        \n"
"        // 初始加载时获取状态\n"
"        fetchStatus();\n"
"        \n"
"        function controlLED(state) {\n"
"            log('Sending control: ' + state);\n"
"            fetch(`/control?action=${state ? '1' : '0'}&t=${Date.now()}`)\n"
"                .then(response => {\n"
"                    log(`Control response: ${response.status}`);\n"
"                    if (response.ok) {\n"
"                        log('Control command successful');\n"
"                        fetchStatus();\n"
"                    } else {\n"
"                        log('Control command failed');\n"
"                    }\n"
"                })\n"
"                .catch(error => {\n"
"                    log('Control error: ' + error);\n"
"                });\n"
"        }\n"
"        \n"
"        function fetchStatus() {\n"
"            const url = '/status?t=' + Date.now();\n"
"            log('Fetching status: ' + url);\n"
"            \n"
"            fetch(url)\n"
"                .then(response => {\n"
"                    log(`Status response: ${response.status}`);\n"
"                    if (!response.ok) {\n"
"                        throw new Error('Bad status: ' + response.status);\n"
"                    }\n"
"                    return response.text();\n"
"                })\n"
"                .then(status => {\n"
"                    log('Received status: ' + status);\n"
"                    updateLight(status.trim()); // 确保去除空白字符\n"
"                })\n"
"                .catch(error => {\n"
"                    log('Status error: ' + error);\n"
"                });\n"
"        }\n"
"        \n"
"        function updateLight(status) {\n"
"            if (status === '1') {\n"
"                light.className = 'light-on';\n"
"                log('Light ON - UI updated');\n"
"            } else if (status === '0') {\n"
"                light.className = 'light-off';\n"
"                log('Light OFF - UI updated');\n"
"            } else {\n"
"                log('Invalid status: ' + status);\n"
"            }\n"
"        }\n"
"        \n"
"        // 每2秒轮询一次状态\n"
"        setInterval(fetchStatus, 2000);\n"
"        \n"
"        // 初始日志\n"
"        log('Control panel initialized');\n"
"        log('Waiting for status updates...');\n"
"    </script>\n"
"</body>\n"
"</html>";

3.添加URL解析与控制逻辑

static uint8_t parse_url_action(uint8_t *url) {// 从URL中提取action参数uint8_t *pAction = (uint8_t *)strstr((char *)url, "action=");return *(pAction + 7); // 返回action值
}
// 根据action执行LED操作
static void do_led_action(uint8_t action)
{if (action == '1')  // 开灯{printf("[LED] Turning ON\n");
       led_status = 1;
       status_content[0] = '1';}else if (action == '0')  // 关灯{printf("[LED] Turning OFF\n");
        led_status = 0;
        status_content[0] = '0';}else{printf("[LED] Unknown action: %c\n", action);}// 打印当前状态printf("[STATUS] Current LED status: %d\n", led_status);
}

4.添加初始化WEB服务器函数

// 初始化Web服务器
void WebServer_Init(void)
{// 初始化http服务器httpServer_init(txBuff, rxBuff, socketCount, socketList);// 注册html页面reg_httpServer_webContent(contentName, content);// 注册状态页面 - 关键修复：确保状态页正确注册reg_httpServer_webContent("status", status_content);// 注册控制端点reg_httpServer_webContent("control", (uint8_t *)"OK");printf("[WEB] Server initialized\n");printf("[STATUS] Initial LED status: %d\n", led_status);
}

5. 添加web服务器

// 启动Web服务器
void WebServer_Start(void)
{for (uint8_t i = 0; i < sizeof(socketList); i++){httpServer_run(i);} 
}

6. 添加处理核心函数

void handler_user_function(uint8_t *url)
{printf("[HTTP] Request received: %s\n", url);// 检查是否为控制请求if (strstr((char *)url, "control") != NULL) {// 1. 从URL里提取出action的值uint8_t action = parse_url_action(url);// 2. 根据action的值，执行相应的LED操作do_led_action(action);// 调试输出printf("[CONTROL] Processed action: %c\n", action);}// 检查是否为状态请求else if (strstr((char *)url, "status") != NULL){// 确保返回最新的状态值printf("[STATUS] Request received. Returning: %s\n", status_content);// 更新状态页内容 - 确保返回最新值reg_httpServer_webContent("status", status_content);}
}
// 状态获取函数 
uint8_t* get_led_status(void)
{return status_content;
}// 状态更新通知 
void update_led_status(void)
{// 当LED状态改变时调用此函数reg_httpServer_webContent("status", status_content);printf("[STATUS] Updated status page to: %s\n", status_content);
}

7.添加web_server.函数

#ifndef __WEB_SERVER_H
#define __WEB_SERVER_H
#include "httpServer.h"
#include <string.h>
// 初始化Web服务器
void WebServer_Init(void);
// 启动Web服务器
void WebServer_Start(void);
extern uint8_t led_status; // 0:关灯 1:开灯
extern uint8_t status_content[2]; // 状态页内容
#endif

8. 接下来我们把MQTT&Aliyun中的函数添加到HTTP_Server中去，如图所示，把所需要的文件添加进来。

9. 在do_mqtt.c函数中把clientid、passwd以及username修改为自己的参数，把post主题和set主题中的产品名称以及，设备名称修改为自己的。

mqttconn mqtt_params = {
    .mqttHostUrl = "iot-06z00h54zbdynx7.mqtt.iothub.aliyuncs.com",
    .server_ip = {
        0,
    },                                                                   /*Define the Connection Server IP*/
    .port = 1883,                                                   /*Define the connection service port number*/
    .clientid = "k18mmode=2,signmethod=hmacsha256,timestamp=1751966302834|", /*Define the client ID*/
    .username = "zhao&k18maZe3w1u",                                         /*Define the user name*/
    .passwd = "1f0069321cb554e432ad893177919fc65579c227a65a9a420b303b7bf8301778", /*Define user passwords*/
    .pubtopic = "/sys/k18maZe3w1u/zhao/thing/event/property/post",           /*Define the publication message*/
    .subtopic = "/sys/k18maZe3w1u/zhao/thing/service/property/set",          /*Define subscription messages*/
    .pubQoS = QOS0,                                 /*Defines the class of service for publishing messages*/
};

10. 修改函数使数据定时上传到云平台，在PUB_MESSAGE和RECV中进行更改。

#define PUBLISH_COUNTER_MAX 500  // 10秒间隔（假设主循环周期为10ms）
static uint32_t publish_counter = 0;
    case PUB_MESSAGE:
    {
        pubmessage.qos = QOS0;
        char buffer[128]; // 确保缓冲区足够大
        snprintf(buffer, sizeof(buffer), 
     "{\"id\":\"123\",\"version\":\"1.0\",\"params\":{\"LEDSwitch\":%d},\"method\":\"thing.event.property.post\"}", 
                led_status);
        pubmessage.payload = buffer;
        pubmessage.payloadlen = strlen(pubmessage.payload);        ret = MQTTPublish(&c, (char *)&(mqtt_params.pubtopic), &pubmessage); /* Publish message */
        if (ret != SUCCESSS) {
            run_status = ERR;
        } else {
            printf("publish:%s,%s\r\n\r\n", mqtt_params.pubtopic, (char *)pubmessage.payload);
            publish_counter = 0;  // 重置计数器
            run_status = RECV;  // 转到接收/心跳状态
        }
        break;
    }
    case RECV:  // 合并心跳和接收处理
    {
        // 保持MQTT连接活跃
        if (MQTTYield(&c, 30) != SUCCESSS) {
            run_status = ERR;
            break;
        }
        // 处理接收到的消息
        if (mqtt_recv_flag) {
            mqtt_recv_flag = 0;
            json_decode(mqtt_recv_msg);
        }
        // 计数器方案：检查是否到达发布间隔
        publish_counter++;
        if(publish_counter >= PUBLISH_COUNTER_MAX) {
            run_status = PUB_MESSAGE;  // 重新进入发布状态
        }
        break;
    }

11. 接收函数，打印出LED的状态的时候，要改变led_status的数值，在第17行和第22行进行添加，此目的是为了让云平台数据和网页数据进行统一。

void json_decode(char *msg)
{
    cJSON *jsondata = NULL;
    cJSON *params = NULL;
    cJSON *LED = NULL;
    jsondata = cJSON_Parse(msg);
    if (jsondata == NULL)
    {
        printf("json parse fail.\r\n");
        return;
    }
    params = cJSON_GetObjectItem(jsondata, "params");
    LED = cJSON_GetObjectItem(params, "LEDSwitch");
    if (LED->valueint == 1)
    {printf("LED ON\r\n");led_status=1; status_content[0] = '1';
    }
    else
    {
        printf("LED OFF\r\n");led_status=0; status_content[0] = '0';
    }
    cJSON_Delete(jsondata);}

12. 在主函数为MQTT定义分配一路socket，然后添加一段PG6外部中断的代码，PG6作为本地控制继电器的开关。

#define SOCKET_ID4             4
void EXTI_Configuration(void)
{
    EXTI_InitTypeDef EXTI_InitStructure;
    GPIO_InitTypeDef GPIO_InitStructure;
    NVIC_InitTypeDef NVIC_InitStructure;// 1. 使能GPIOG时钟RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOG, ENABLE);// 2. 配置PG6为浮空输入
    GPIO_InitStructure.GPIO_Pin = GPIO_Pin_6;
    GPIO_InitStructure.GPIO_Mode = GPIO_Mode_IN_FLOATING;
    GPIO_InitStructure.GPIO_Speed = GPIO_Speed_50MHz;GPIO_Init(GPIOG, &GPIO_InitStructure);// 3. 使能AFIO时钟RCC_APB2PeriphClockCmd(RCC_APB2Periph_AFIO, ENABLE);// 4. 映射PG6到EXTI6GPIO_EXTILineConfig(GPIO_PortSourceGPIOG, GPIO_PinSource6);// 5. 配置EXTI6中断线
    EXTI_InitStructure.EXTI_Line = EXTI_Line6;
    EXTI_InitStructure.EXTI_Mode = EXTI_Mode_Interrupt;
    EXTI_InitStructure.EXTI_Trigger = EXTI_Trigger_Falling;  // 上升沿触发
    EXTI_InitStructure.EXTI_LineCmd = ENABLE;EXTI_Init(&EXTI_InitStructure);// 6. 配置NVIC
    NVIC_InitStructure.NVIC_IRQChannel = EXTI9_5_IRQn;  // EXTI5~9共享中断通道
    NVIC_InitStructure.NVIC_IRQChannelPreemptionPriority = 0;
    NVIC_InitStructure.NVIC_IRQChannelSubPriority = 0;
    NVIC_InitStructure.NVIC_IRQChannelCmd = ENABLE;NVIC_Init(&NVIC_InitStructure);
}
// EXTI9_5中断服务函数
void EXTI9_5_IRQHandler(void)
{// 检查EXTI6中断标志if (EXTI_GetITStatus(EXTI_Line6) != RESET){// 清除中断标志EXTI_ClearITPendingBit(EXTI_Line6);// 执行中断处理
        led_status = !led_status;
        status_content[0] = (status_content[0] == '0') ? '1' : '0'; if(led_status==0){printf("LED_OFF");}else{ printf("LED_ON");}}    }
}

13. 把do_mqtt()函数添加到循环中去，然后在main.c中添加#include "do_mqtt.h"头文件.

4 功能验证

1.硬件连接完毕，烧录程序上电打印如下信息：在浏览器输入192.168.2.22来进入html页面

2.我们同时打开串口助手，阿里云物联网平台以及HTML网页控制来进行观察，我们先使用网页控制查看现象，先进行打开

3.关闭LED

4. 我们再来使用阿里云进行控制，首先设置开启LED。

5. 关闭LED

6. 本地按键控制，查看阿里云物联网平台状态以及html网页变化。我们先测试打开

7. 我们再进行本地按键关闭测试

由上述可知，功能完好，可由阿里云，html网页和按键控制继电器开关，三种模式的开与管互通，这三种模式下都可以查看继电器的状态

5. 总结

本项目通过 W55MH32成功实现了 Web 网页以及云平台对继电器的远程控制，验证了基于以太网的嵌入式 Web 服务器方案和云平台控制的可行性。感谢大家的耐心阅读！如果您在阅读过程中有任何疑问，或者希望进一步了解这款产品及其应用，欢迎随时通过私信或评论区留言。我们会尽快回复您的消息，为您提供更详细的解答和帮助！