在 MAUI 应用中嵌入 PicoServer 构建本地 HTTP 服务

在本地应用中嵌入 Web Server。这样应用本身就可以提供 HTTP 服务例如本地 REST APIWeb Admin 管理后台WebView Hybrid App局域网设备控制PWA 离线系统在 .NET 生态中我们可以利用.NET MAUI PicoServer实现这一架构。本系列将通过完整实战构建一套MAUI 嵌入式 Web 架构体系。通过这个系列你将学会在 MAUI 中运行本地 Web Server构建 REST API 框架开发 Web Admin 管理后台构建 Hybrid App 架构实现 PWA 离线系统本篇作为系列第一篇将首先完成最基础的一步在 MAUI 应用中运行 PicoServer 本地 HTTP 服务。一、核心架构在 MAUI 中嵌入 Web Server 后应用架构会变成Browser / WebView │ │ HTTP ▼ PicoServer │ Local REST API │ MAUI App也就是说MAUI 应用不仅是客户端同时也是一个 Web 服务端。这种架构的优势非常明显优势说明跨平台Windows / Android / iOS本地 APIWebView 直接调用开发简单Web 技术构建 UI扩展性强可构建完整 Web Admin后续章节中我们会逐步扩展这一架构。二、技术简介1 .NET MAUI.NET MAUIMulti-platform App UI是微软推出的跨平台应用开发框架用于构建WindowsAndroidiOSmacOS应用程序。开发者可以使用C#XAML构建跨平台 UI并共享大量业务代码。.NET MAUI 的核心特点包括单一项目结构多平台编译原生性能深度整合 .NET 生态支持 WebView / Blazor / ASP.NET Core官网https://dotnet.microsoft.com/en-us/apps/mauiPicoServerPicoServer 是一个基于 .NET 的轻量级嵌入式 Web 服务器组件。它的设计目标是在应用程序内部快速启动 HTTP 服务。PicoServer 基于HttpListener实现具有以下特点轻量级嵌入式 Web Server支持 HTTP 路由映射适合本地 API支持 Web Admin支持局域网访问典型应用场景包括本地设备控制接口Web 管理后台Hybrid App API调试接口官网https://picoserver.cn三、在 MAUI 中嵌入 PicoServer下面我们通过一个简单示例演示如何在 MAUI 应用中运行 PicoServer。配套源码https://github.com/densen2014/MauiPicoAdmin四、创建 MAUI 项目首先创建一个标准 MAUI 项目。在 Visual Studio 中File → New Project → .NET MAUI App创建后会得到一个默认示例页面。示例页面如下五、安装 PicoServer接下来通过 NuGet 安装 PicoServer。操作步骤1 右键项目2 管理 NuGet 包3 搜索PicoServer4 点击安装六、启动 PicoServer接下来我们在应用启动时运行 PicoServer。打开文件MauiProgram.cs在MauiApp.CreateBuilder()之前加入var picoAdmin new PicoAdmin();这样在应用启动时就会运行 PicoServer。七、创建 PicoServer 服务接下来创建一个简单的服务器类public class PicoAdmin { private readonly WebAPIServer MyAPI new WebAPIServer(); public PicoAdmin() { MyAPI.AddRoute(/, Hello); MyAPI.StartServer(); } private async Task Hello(HttpListenerRequest request, HttpListenerResponse response) { await response.WriteAsync(Hello PicoServer); } }代码逻辑非常简单步骤说明创建服务器WebAPIServer添加路由/处理请求Hello()启动服务StartServer()八、运行测试首先运行Windows 平台。启动程序后在浏览器访问http://127.0.0.1:8090如果页面显示Hello PicoServer说明MAUI 应用启动成功PicoServer 已成功运行本地 HTTP 服务工作正常九、移动平台运行该示例不仅可以运行在 Windows。同样可以运行在AndroidiOSmacOS在 Android 或 iOS 上运行后可以通过http://设备IP:8090iOSAndroid十、运行原理整个运行流程如下MAUI App Start │ ▼ PicoAdmin │ ▼ PicoServer │ ▼ HttpListener │ ▼ HTTP Request也就是说MAUI 应用在启动时同时启动了一个本地 Web Server。之后所有 HTTP 请求都会由 PicoServer 处理。十一、总结通过本篇内容我们完成了一个关键步骤在 MAUI 应用中嵌入 PicoServer Web 服务。实现内容包括在 MAUI 中运行 HTTP Server添加简单路由浏览器访问本地 API跨平台运行测试虽然这个示例非常简单但它为整个系列打下了基础。在后续文章中我们将继续扩展 PicoServer 的能力构建 REST API