#贸泽硬件搭子活动- FRDM-MCXN947从环境搭建到HTTP_RGB 点击：35 | 回复：0

精华：0帖
求助：0帖
帖子：1帖 | 0回
年度积分：0
历史总积分：0
注册：2026年3月15日

发表于：2026-03-17 12:31:37

楼主

FRDM-MCXN947 实战：用 VS Code 搭建开发环境，并通过 HTTP + WebSocket 控制板载 RGB LED

大家好，这是我整理出的一篇从 0 到 1 的实战教程。写这个教程的目标，不是单纯为了教大家怎么把 FRDM-MCXN947 跑起来，而是想带你基于 NXP 官方的示例工程，亲手打通一条清晰的控制链路：浏览器发送命令 -> WebSocket 传输 -> 开发板解析指令 -> 板载 RGB LED 实时响应。
如果你也想和我一样，同时摸清 NXP MCX 平台、MCUXpresso for VS Code 的工作流，顺便接触一下 FreeRTOS、lwIP 和前端网页控制，那我强烈推荐你跟着试试。

一、先说结论：这个项目值不值得做

1.1 这个项目能学到什么

跟我一起跑通这个项目，你至少能收获下面这几件事：

• 在 Windows 上搭好 FRDM-MCXN947 + MCUXpresso for Visual Studio Code 开发环境

• 导入并运行 NXP 官方示例 lwip_httpsrv_freertos_cm33_core0

• 理解 HTTP 页面和 WebSocket 命令通道在嵌入式网页项目里的分工

• 完成一次比较完整的“板级初始化 + 网络联调 + 前端交互 + GPIO 控制”练习

1.2 项目难度评价

如果把“纯点灯”算作 1/5，把“从零自建 TCP/IP 服务并设计通信协议”算作 5/5，那么这个项目大致可以评为：

• 整体难度：3/5

• 适合人群：已经有一点 C 语言基础，想开始接触嵌入式网络项目的读者

老实讲，它做起来并不算难，主要是因为我帮大家挑了一个好起点：咱们不需要从空白工程手撸代码，而是直接站在官方 HTTPSRV 示例的肩膀上去改。
我后来在帮身边朋友复现时发现，大家真正容易卡住的往往是下面这些坑：

• 工具链没有装全，导致无法编译或烧录

• PC 和开发板不在同一网段，浏览器无法访问

• 修改点分散在板级目录和通用 httpsrv_common 目录里

• 网页资源改完之后，还需要重新打包生成 httpsrv_fs_data.c

1.3 这个项目的亮点

和单纯的“死循环点灯”比起来，我之所以要把这个项目单独梳理出来，是因为它有几个非常棒的亮点：

• 闭环完整：从开发环境、网络栈、网页交互到硬件响应，一次走完整条链路

• 可视化强：浏览器点击按钮后，网页日志和板载 RGB 会同时变化，反馈非常直观

• 技术跨度适中：既能接触 RTOS 和 lwIP，又不会一下子陷入过深的协议细节

• 扩展空间大：后续可以继续接 MQTT、传感器、REST API，甚至改成局域网控制台

二、先补几条背景知识

2.1 FRDM-MCXN947 是什么

FRDM-MCXN947 是 NXP 面向 MCX N 系列推出的一块开发板。结合我在 NXP 官网翻的资料，这块板子非常适合用来做这篇实战演练，主要因为下面几个硬件优势：

• 主控属于 MCX N94 系列

• 采用 Arm Cortex-M33

• 主频最高可到 150 MHz

• 片上资源达到 2 MB Flash / 512 KB SRAM

• 板载 MCU-Link，不需要额外调试器就能下载和调试

• 板上带 RJ45 网络接口，适合直接做以太网实验

我觉得对我们这种想快速上手的开发者来说，这块板子最大的好处绝不只是“性能足够强”，而是它自带了“免驱下载器、千兆网口、三色 RGB 跑马灯”，免去了咱们飞线和买模块的麻烦。 alt text FRDM-MCXN947 相关界面示意

2.2 为什么这里用 MCUXpresso for VS Code

我发现很多朋友（包括从别的 MCU 切过来的我）第一次玩 NXP 平台时，光是在“到底该装哪个 IDE”上就容易纠结半天。
我带大家直接选用 MCUXpresso for Visual Studio Code，原因非常实在：

• 它是 NXP 官方提供的 VS Code 工作流

• SDK 导入、工具安装、编译、烧录、调试可以尽量放在同一套界面里完成

• 对于想把嵌入式开发流程现代化、轻量化的人来说，上手成本比传统重型 IDE 更低

2.3 HTTP 和 WebSocket 在本项目里的分工

这也是我觉得这个项目里，最值得拿出来和家人们科普的一个知识点。

• HTTP：负责把网页发给浏览器

• WebSocket：负责在网页和开发板之间建立一条长连接，用来实时发送控制命令

如果只用 HTTP，每点一次按钮都要重新发一次请求。
而 WebSocket 更像一条持续在线的双向通道，浏览器和开发板都可以通过它实时发消息。在“网页控制硬件”这种场景里，它比轮询式方案更直接，也更适合做交互演示。

2.4 为什么选择 lwip_httpsrv_freertos_cm33_core0

请注意，这可不是我一通瞎选的示例，这是我翻遍了所有代码后排雷排出来的“成功率最高”的起始模板。

因为它已经具备：

• FreeRTOS

• lwIP

• HTTP 服务

• WebSocket 示例接口

换句话说，网络栈和网页服务都已经搭好了，我们只需要把“回显 demo”改成“控制 RGB 的业务逻辑”即可。这比从 hello_world 开始堆功能，效率高得多。

三、本文环境与路径约定

3.1 本文验证环境

为了保证你别跟着我翻车，我已经用下面这套软硬件环境反复验证好几次了：

• 开发板：FRDM-MCXN947

• 操作系统：Windows

• 编辑器：Visual Studio Code

• NXP 扩展：MCUXpresso for Visual Studio Code

• SDK：25.12.00

说明：

• 本文以 25.12.00 为示例版本

• 如果你使用更新版本，界面文案或个别目录结构可能略有差异，但整体思路不变

3.2 硬件准备

• FRDM-MCXN947 开发板

• USB Type-C 数据线

• RJ45 网线

• Windows 电脑一台

3.3 本文统一使用相对路径

大家应该都很讨厌那种路径里带着别人电脑文件名的死板教程。为了你的阅读体验，我在下文中彻底抛弃了盘符绝对路径，统一用大家都能看得懂的两类相对路径来标记文件：

1. 相对于 SDK 根目录

这里的“SDK 根目录”指你解压后的 SDK 目录，例如：

SDK_25_12_00_FRDM-MCXN947/

当文中写到：

mcuxsdk/examples/_boards/frdmmcxn947/lwip_examples/lwip_httpsrv/freertos/cm33_core0/app.h

意思就是“从你的 SDK 根目录继续往下找这个文件”。

2. 相对于工程包根目录

这里的“工程包根目录”指：

FRDM-MCXN947_HTTP_RGB_工程包/

工程包目录结构如下：

FRDM-MCXN947_HTTP_RGB_工程包/
|-- README_先看这个.md
|-- 教程/
|-- 代码附录/
\-- 源码覆盖包/

工程包里的覆盖文件都放在：

源码覆盖包/mcuxsdk/...

所以，只要文中给出某个 SDK 相对路径，你都可以在工程包里用“前面加上源码覆盖包/”的方式找到对应覆盖文件。

四、安装 VS Code 与 MCUXpresso 扩展

4.1 安装 VS Code

从 VS Code 官网下载并安装 Windows 版本。

4.2 安装 MCUXpresso for Visual Studio Code

1. 打开 VS Code

2. 按 Ctrl + Shift + X 打开扩展市场

3. 搜索并安装 MCUXpresso for Visual Studio Code

4. 安装完成后，左侧边栏会出现 NXP 相关入口

4.3 安装开发依赖组件

切换到 MCUXpresso 视图后，在 Quickstart Panel 里打开 MCUXpresso Installer，按向导安装依赖组件。

建议至少安装：

• MCUXpresso SDK Developer

• Debug Probes Software -> LinkServer

如果你后续还要继续做 FreeRTOS、网络协议或更多外设实验，保持推荐组件即可。

安装完成后，建议重启一次 VS Code，再回到 MCUXpresso 视图检查是否还有缺失依赖提示。

五、获取并导入 FRDM-MCXN947 SDK

5.1 通过 SDK Builder 构建 SDK

建议通过 MCUXpresso SDK Builder 获取与你板卡匹配的 SDK。本文以 25.12.00 为例。

步骤如下：

1. 打开 MCUXpresso SDK Builder

2. 搜索并选择 FRDM-MCXN947

3. 选择本文验证过的 25.12.00

4. 勾选或确认包含：

– FreeRTOS

– lwIP

5. 点击构建并下载

5.2 解压 SDK

SDK 解压到哪里并不重要，重要的是下面三点：

• 路径尽量不要太深

• 路径里尽量不要有空格

• 路径里尽量不要有中文

你完全可以使用类似下面这样的目录名：

SDK_25_12_00_FRDM-MCXN947/

5.3 导入 SDK 到 VS Code

1. 回到 VS Code 的 MCUXpresso 视图

2. 在 Imported Repositories 区域点击 Import Repository

3. 选择你刚刚解压好的 SDK 目录

从 Quickstart 导入 Repository 导入成功后在 Imported Repositories 中看到 SDK

六、导入本项目的基线工程

6.1 选择哪一个示例

本项目的基线工程不是 hello_world，而是：

lwip_examples/lwip_httpsrv_freertos_cm33_core0

原因很简单：

• 它已经自带以太网和 HTTP 服务

• 它已经具备 WebSocket 示例能力

• 它非常适合作为“网页控制 RGB”项目的母体

6.2 导入时的关键配置

右键已导入的 SDK Repository，选择：

Import Example Application from an Imported Repository...

然后按下面填写：

• Board：FRDM-MCXN947

• Template：lwip_examples/lwip_httpsrv_freertos_cm33_core0

• App type：Repository application

• Toolchain：ARM GCC / MCUXpresso for VS Code

七、配置静态 IP

7.1 本文使用的网络参数

为了便于演示，本文固定使用下面这组参数：

开发板 IP     : 192.168.137.102
子网掩码      : 255.255.255.0
网关          : 192.168.137.1

你的电脑网卡也需要处于同一网段，否则浏览器无法访问开发板网页。

7.2 修改哪个文件

相对于 SDK 根目录，需要修改的文件是：

mcuxsdk/examples/_boards/frdmmcxn947/lwip_examples/lwip_httpsrv/freertos/cm33_core0/app.h

相对于 工程包根目录，对应的覆盖文件是：

源码覆盖包/mcuxsdk/examples/_boards/frdmmcxn947/lwip_examples/lwip_httpsrv/freertos/cm33_core0/app.h

7.3 关键配置示例

/* IP address configuration. */
#ifndef configIP_ADDR0
#define configIP_ADDR0 192
#endif
#ifndef configIP_ADDR1
#define configIP_ADDR1 168
#endif
#ifndef configIP_ADDR2
#define configIP_ADDR2 137
#endif
#ifndef configIP_ADDR3
#define configIP_ADDR3 102
#endif

/* Netmask configuration. */
#ifndef configNET_MASK0
#define configNET_MASK0 255
#endif
#ifndef configNET_MASK1
#define configNET_MASK1 255
#endif
#ifndef configNET_MASK2
#define configNET_MASK2 255
#endif
#ifndef configNET_MASK3
#define configNET_MASK3 0
#endif

/* Gateway address configuration. */
#ifndef configGW_ADDR0
#define configGW_ADDR0 192
#endif
#ifndef configGW_ADDR1
#define configGW_ADDR1 168
#endif
#ifndef configGW_ADDR2
#define configGW_ADDR2 137
#endif
#ifndef configGW_ADDR3
#define configGW_ADDR3 1
#endif

八、编译、烧录与基础联通验证

8.1 编译

导入工程并修改配置后，执行：

1. Build

2. 等待工程编译完成

Build 成功界面

8.2 烧录

1. 用 Type-C 数据线连接开发板 J17

2. 确认板载 MCU-Link 已被识别

3. 点击 Flash

4. 烧录完成后按一下 RESET

Flash 操作界面

8.3 串口参数

串口工具使用下面这组参数即可：

• 波特率：115200

• 数据位：8

• 校验位：None

• 停止位：1

• 流控：None

8.4 网口前置条件

如果网页一直打不开，先检查这些基础条件：

• RJ45 网线已接好

• JP13 = 2-3

• R274 已焊接

如果你的板卡版本和本文不完全一致，请以板卡丝印、原理图或官方硬件资料为准。

8.5 正常串口输出

正常情况下，串口会看到类似输出：

HTTP Server example
IPv4 Address : 192.168.137.102
IPv4 Subnet mask : 255.255.255.0
IPv4 Gateway : 192.168.137.1

串口输出示意

8.6 浏览器验证

浏览器访问：

http://192.168.137.102

如果网页已经能打开，说明你前面最关键的几步都已经打通了：

• 工程导入正常

• 编译正常

• 烧录正常

• 以太网联通正常

• HTTP 服务正常

浏览器访问开发板网页

九、网页控制 RGB 的使用方法

本项目最终把网页改成了一个单页 RGB 控制台，不再保留原始示例里的左侧菜单和 iframe 结构。

使用步骤：

1. 打开 http://192.168.137.102

2. 点击 Connect

3. 点击 Red On / Red Off / Green On / Green Off / Blue On / Blue Off / All On / All Off / Status

4. 或者直接在输入框里发送文本命令

页面收到回显之后，会同时发生三件事：

• 网页中的 RGB 状态被更新

• 日志区显示发送记录和回显结果

• 板载 RGB LED 实际亮灭

这也是我实物联调时最开心的瞬间：点一下网页的按钮，立刻就能看到板子上的灯跟着亮起来，成就感直接拉满。

十、核心代码改动说明

如果你只是想以最快速度看个效果，大可不必死磕每一个字母的修改。
因为我已经在一个单独的工程包里给大家备好了“覆盖即用”的现成文件，你可以先跟着我的思路明白每段代码的用意，再去拿我写好的直接覆盖进去。

10.1 改动文件总览

相对于 SDK 根目录，本项目主要修改了这些文件：

mcuxsdk/examples/_boards/frdmmcxn947/lwip_examples/lwip_httpsrv/freertos/cm33_core0/app.h
mcuxsdk/examples/_boards/frdmmcxn947/lwip_examples/lwip_httpsrv/freertos/cm33_core0/hardware_init.c
mcuxsdk/examples/_boards/frdmmcxn947/lwip_examples/lwip_httpsrv/freertos/pin_mux.h
mcuxsdk/examples/_boards/frdmmcxn947/lwip_examples/lwip_httpsrv/freertos/pin_mux.c
mcuxsdk/examples/lwip_examples/httpsrv_common/freertos/httpsrv_freertos.c
mcuxsdk/examples/lwip_examples/httpsrv_common/fs_data/webpage/index.html
mcuxsdk/examples/lwip_examples/httpsrv_common/fs_data/webpage/httpsrv.css
mcuxsdk/examples/lwip_examples/httpsrv_common/fs_data/webpage/websocket.html
mcuxsdk/examples/lwip_examples/httpsrv_common/fs_data/httpsrv_fs_data.c

相对于 工程包根目录，它们都可以在下面找到：

源码覆盖包/mcuxsdk/...

10.2 hardware_init.c：初始化 RGB 所需资源

文件：

mcuxsdk/examples/_boards/frdmmcxn947/lwip_examples/lwip_httpsrv/freertos/cm33_core0/hardware_init.c

这里主要做三件事：

• 打开 GPIO0 和 GPIO1 时钟

• 初始化板载 RGB 引脚

• 设置 RGB 上电默认熄灭

核心思路是把 LED 初始化放进板级硬件初始化流程里，这样系统启动后，RGB 就已经处于可控状态。

10.3 pin_mux.h / pin_mux.c：把 RGB 引脚配置补齐

文件：

mcuxsdk/examples/_boards/frdmmcxn947/lwip_examples/lwip_httpsrv/freertos/pin_mux.h
mcuxsdk/examples/_boards/frdmmcxn947/lwip_examples/lwip_httpsrv/freertos/pin_mux.c

这部分的作用很直接：

• 在头文件里声明 BOARD_InitLEDsPins()

• 在 pin_mux.c 里完成 RGB 对应引脚的配置

对这个项目来说，pin_mux.c 的价值不是“写法复杂”，而是它把网页命令最终落到了真实硬件引脚上。

10.4 httpsrv_freertos.c：把 WebSocket 回显改成 LED 控制逻辑

文件：

mcuxsdk/examples/lwip_examples/httpsrv_common/freertos/httpsrv_freertos.c

这是整个项目最关键的业务改动点。

这里做了几件事：

• 接收 WebSocket 文本命令

• 解析 red on、all off、status 等字符串

• 改变 LED 状态

• 继续保留原始 echo 行为，让前端仍然能收到回显

关键状态变量示例：

static bool s_led_red_on = false;
static bool s_led_green_on = false;
static bool s_led_blue_on = false;

关键处理思路示例：

static void ws_handle_led_command(const char *command)
{
    if (strcmp(command, "red on") == 0)
    {
        s_led_red_on = true;
        ws_apply_led_state();
        PRINTF("Command executed: red on\r\n");
    }
    else if (strcmp(command, "all off") == 0)
    {
        s_led_red_on = false;
        s_led_green_on = false;
        s_led_blue_on = false;
        ws_apply_led_state();
        PRINTF("Command executed: all off\r\n");
    }

    ws_print_led_state();
}

这一层打通之后，浏览器里发出的文本命令就不再只是“回显测试”，而是变成了真正能驱动板载外设的控制指令。

10.5 前端页面：从示例页改成单页 RGB 控制台

文件：

mcuxsdk/examples/lwip_examples/httpsrv_common/fs_data/webpage/index.html
mcuxsdk/examples/lwip_examples/httpsrv_common/fs_data/webpage/httpsrv.css
mcuxsdk/examples/lwip_examples/httpsrv_common/fs_data/webpage/websocket.html

这一部分的改造重点是：

• index.html 改成单页控制台

• httpsrv.css 重写页面样式

• websocket.html 简化为跳转或辅助页面

从文章表达角度看，这一部分也是项目的“观感加分项”，因为它让一个原本偏底层的网络 demo 变成了可以直接展示的交互作品。

10.6 httpsrv_fs_data.c：网页资源打包结果

文件：

mcuxsdk/examples/lwip_examples/httpsrv_common/fs_data/httpsrv_fs_data.c

这个 C 文件是网页资源（HTML、CSS、JS）通过工具重新打包出来的结果。实测过程中我需要提醒大家避坑两点：

• 它通常不适合手写维护

• 如果你改了 HTML、CSS 或 JS，通常需要重新生成这个文件

不过别担心，如果你懒得自己配置 Python 环境去打包网页，直接去工程包里把做好的这个 C 文件覆盖进去就行。

十一、工程包应该怎么使用

我非常理解有些小伙伴只想要最后的结果（笑）。如果你不想一边看文章一边苦哈哈地找文件到处改，那就直接按照我下面的步骤做一下“拿来主义”吧：

1. 先按本文步骤导入官方示例工程

2. 再把工程包里的源码覆盖包/ 覆盖到你本地 SDK 中对应位置

3. 回到 VS Code 重新执行 Build

4. 再执行 Flash

5. 浏览器访问 http://192.168.137.102

工程包中三个目录的职责分别是：

• 教程/：完整图文说明

• 代码附录/：关键文件的完整版本，方便核对和写报告

• 源码覆盖包/：实际拿来覆盖 SDK 的文件

十二、最终验证标准

如果整个项目已经跑通，至少应该满足下面这些条件：

1. 串口能看到 IP 信息

HTTP Server example
IPv4 Address : 192.168.137.102

2. 浏览器能打开：

http://192.168.137.102

3. 点击 Connect 后可以正常建立连接

4. 点击 Red On 后板载红灯点亮

5. 串口能打印：

Command executed: red on
RGB state: red=on green=off blue=off

6. 点击 All Off 后三色灯全部熄灭

十三、总结

写到这里，这块板子算是被我们彻底玩明白了。我觉得这篇教程最大的意义，绝不在于教你“又多学会了一种点灯方法”，而是我希望能帮你把一套正儿八经的嵌入式网络开发流程完整地串起来：

• 用 VS Code 完成 NXP 工具链和 SDK 管理

• 基于官方示例快速起步

• 用 HTTP 提供网页，用 WebSocket 传输实时命令

• 把网页指令映射到开发板的板载 RGB 控制上

如果你跟我一样也是个爱折腾的创客，那么这套代码非常适合作为你下一个项目的基石：后续可以自然扩展到：

• 传感器数据上报

• PWM 调光

• REST API 或 MQTT

• 局域网控制面板

从“在自己电脑上跑通”到“整理成这篇希望所有人都能照着成功的文章”，其实花了我不少心思。踩过的坑我也尽量都在正文里标出来了，希望这篇笔记能实打实地帮你节省几十个小时的摸索时间呀！

参考资料

• NXP FRDM-MCXN947 开发板：https://www.nxp.com/design/design-center/development-boards-and-designs/FRDM-MCXN947

• NXP MCX N94/N54 系列介绍：https://www.nxp.com/products/processors-and-microcontrollers/arm-microcontrollers/general-purpose-mcus/mcx-microcontrollers/mcx-n-series-microcontrollers/high-performance-mcx-n94x-and-n54x-mcus-with-on-chip-neural-processing-unit-and-edgelock-security:MCX-N94X-N54X

• NXP MCUXpresso for Visual Studio Code：https://www.nxp.com/design/design-center/software/development-software/mcuxpresso-for-visual-studio-code:VSCode-for-MCUX

• NXP MCUXpresso SDK 文档：https://docs.mcuxpresso.nxp.com/en/latest/mcuxsdk/home.html

• MDN WebSocket API：https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

正在下载，请等待……

下载附件需1积分！

分享到：

邀请回答

回复楼主

楼主最近还看过

热门招聘

﻿#贸泽硬件搭子活动- FRDM-MCXN947从环境搭建到HTTP_RGB ﻿点击：35 | 回复：0