Flutter实现Service + UI 全面跨平台

作者：Karl_wei

前言：

Flutter作为跨平台的UI框架，其可行性已经被市场所认可。UI跨端后，我们自然会希望一些运行在终端的小服务也能跨端，特别是当这个小服务还涉及到一些 UI 的展示。

我们希望Flutter能承担这个角色，让其跨端能力更进一步。

需求背景

我们希望在整机设备上，运行一个后台服务，用户通过ip地址即可调用运行在设备上的能力，同时这个服务还能唤起一些UI视图。
举个例子：假如路由器有Android、windows、mac三个系统的终端，需要提供一个管理后台供用户设置，那么路由器的后台服务能力最好是能够跨这三个系统的。

web后台框架

Dart是支持编写后台服务的，它提供了 shelf 库，以处理HTTP请求。整个项目，我们都是围绕shelf库的能力集进行开发的。

静态资源 → shelf_static

从需求我们可以了解到，我们需要提供给用户一个web管理后台进行管理，web的资源自然是放在服务端的。这里我们使用 shelf_static 库，使用非常的简单，就一个创建静态资源操作器的接口。

import 'package:shelf/shelf_io.dart' as io;
import 'package:shelf_static/shelf_static.dart';void main() {var handler = createStaticHandler('example/files',defaultDocument: 'index.html');io.serve(handler, 'localhost', 8080);
}

需要注意的是，必须传入本地的绝对路径，指定默认的文件入口。Flutter中，资源一般以asset的方式导入，在编译过程中以二进制的形式打包在应用中，并不是普通格式的文件，那么如何传入给createStaticHandler？
我们通过AssetBundle获取到这些文件的字节流，并转化成File保存到指定路径，这个路径就是静态资源的路径。

static Future<String> copyAssets() async {int now = DateTime.now().millisecondsSinceEpoch;String folderPath = '/sdcard';final manifestContent = await rootBundle.loadString('AssetManifest.json');final Map<String, dynamic> manifestMap = json.decode(manifestContent);final assetList = manifestMap.keys.where((String key) => key.startsWith('assets/web')).toList();for (final asset in assetList) {await copyAsset(asset, folderPath);}print('移动文件耗时 = ${DateTime.now().millisecondsSinceEpoch - now}毫秒');return '$folderPath/assets/web';
}static Future<File> copyAsset(String assetName, String localPath) async {int lastSeparatorIndex = assetName.lastIndexOf('/');Directory directory = Directory('$localPath${Platform.pathSeparator}${assetName.substring(0, lastSeparatorIndex)}');if (!directory.existsSync()) directory.createSync(recursive: true);ByteData data = await rootBundle.load(assetName);Uint8List bytes = data.buffer.asUint8List();final file = File('$localPath${Platform.pathSeparator}$assetName');await file.writeAsBytes(bytes);return file;
}

调用copyAssets可以拿到路径，整个过程一般不会超过500ms，视文件体积而定。

路由 → shelf_route

现在我们已经可以访问静态资源了，接下来需要提供一系列的接口供前端调用，这个时候我们需要用到 shelf_route 库。
shelf_route 支持 RESTful 风格的路由，可以处理客户端的 GET、POST、PUT、DELETE 等 HTTP 请求，也可以从 HTTP 路径中自动提取参数。每个路由会提供request请求体，最终返回Response的构造函数即可。
用法很简单，下面简单演示下如何编写一个登录接口。

import 'package:shelf_router/shelf_router.dart' as self_router;self_router.Router app = self_router.Router();// TODO：使用mount，前缀使用模块命名
app.post(Apis.login, userLogin);
app.post(Apis.resetPwd, resetPassword);
app.post(Apis.signOut, singOutHandle);

Future<Response> userLogin(Request request) async {final requestBody = await request.readAsString();final Map<String, dynamic> body = json.decode(requestBody);Auth auth = Auth();var info = await auth.getUserInfo();if (info.$1 == body['username'] && info.$2 == body['password']) {String token = await auth.generateToken(body['username'], body['password']);return Response.ok(BaseResponse(Code.success, data: {'token': token}, msg: '登录成功').toString());} else {return Response.ok(BaseResponse(Code.reject, msg: '账号密码错误').toString());}
}

中间件 → helf_multipart

一般后台服务，都需要对部分接口进行鉴权操作，这部分的逻辑一般是通用的，一般开发过程中我们会用到中间件的机制。
中间件通常被用于拦截和处理请求与响应之间的过程，以实现一些公共的应用逻辑和功能，比如认证、日志记录、错误处理等等。
在Flutter中，我们使用 shelf_multipart 这个库，通过Pipeline可以加上Middleware，这个中间件是应用于所有路由的，因此某些接口不需要这个中间件操作，直接在白名单内过滤即可；innerHandler则是执行对应的响应操作。

var middleHandler = const Pipeline().addMiddleware(authMiddleware); // 添加中间件

Middleware authMiddleware = (Handler innerHandler) {return (Request request) async {String path = request.url.path.split('?').first;if (!whitelist.contains(path)) { // 过滤白名单String? token = request.headers['Authorization'];Auth auth = Auth();var authVerify = await auth.verifyToken(token); // 验证tokenif (!authVerify.$1) {return Response.unauthorized(BaseResponse(Code.reject, msg: authVerify.$2!).toString());} else {auth.updateTokenTime(); // 有操作则续费token时长}}final response = await innerHandler(request);return response;};
};

websocket → shelf_websocket

上面所写的都是提供HTTP服务的，在业务中也经常存在需要websocket，我们使用 shelf_websocket 库。跟静态资源一样，单一的能力只需要提供最简单的接口：webSocketHandler。

import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:shelf_web_socket/shelf_web_socket.dart';
import 'package:web_socket_channel/web_socket_channel.dart';void main() {var webSocketHandler = webSocketHandler((webSocket) {webSocket.stream.listen((message) {webSocket.sink.add("echo $message");});});shelf_io.serve(handler, 'localhost', 8080).then((server) {print('Serving at ws://${server.address.host}:${server.port}');});
}

最后我们需要把所有的handler都整合成一个服务，传给io.serve；

Handler cascadeHandler = Cascade().add(handler).add(app).add(webSocketHandler).handler; // 合并静态资源、路由、websocket// 合入中间件
// 创建本机服务，端口8888
await io.serve(middleHandler.addHandler(cascadeHandler), '0.0.0.0', 8888);

通用服务能力

用户鉴权

一般这种小型本机服务，登录用户都是互斥的，用户权限管理我们可以简单的使用：hive + JWT token。
采用hive来保存用户信息，通过 dart_jsonwebtoken 库生成token，然后在中间件拦截，对header中携带的token信息进行验证，从而达到鉴权的目的。

Future<String> generateToken(String userName, String password) async {Box box = await Hive.openBox(_boxName);JWT jwt = JWT({'userName': userName,'password': password,},jwtId: const Uuid().v4(),);String token = jwt.sign(SecretKey(_secretKey));await box.put(Constant.userNameKey, userName);await box.put(Constant.pwdKey, password);await box.put(Constant.tokenKey, token);updateTokenTime();return token;
}

文件上传

一般web后台，都会把文件资源存储在另一个文件服务中，比如：七牛云。不过既然是小服务，我们也希望dart能拥有这个能力。
文件上传的路由，参数一般都是form表单；当解析到request为isMultipart时，则对文件流进行读取，并写到本地路径中。
特别需要注意的是：Dart是单线程，写文件这种耗时io操作，必须使用IOSink + stream方式写入，不然内存会拉满，大文件会直接让应用崩溃。

app.post(Apis.upload, uploadFile);Future<Response> uploadFile(Request request) async {if (!request.isMultipart) {return Response.ok('Not a multipart request');} else if (request.isMultipartForm) {String? filename;String? path;await for (var part in request.parts) {var contentDisposition = part.headers['content-disposition'];filename = RegExp(r'filename="([^"]*)"').firstMatch(contentDisposition!)?.group(1);path = '${await CommonUtils.getDownloadPath()}$filename';File? file = File(path);IOSink sink = file.openWrite();await sink.addStream(part);await sink.flush();await sink.close();}return Response.ok(BaseResponse(Code.success, data: {"filePath": path}).toString());} 
}

运行机制：Service + UI

使用Flutter编写这种后台服务，还有一个好处是可以跨平台的展示UI。比如：需要后台弹出一些设置成功的toast，这个时候就非常的方便了。

Android平台，我们在Android Service上创建一个Flutter Engine，可以直接执行到Dart代码；当我们需要展示UI的时候，只需要通过我们的多窗口插件打开一个悬浮窗即可。

Windows平台，我们目前还没有在C++ 服务上运行dart代码，而是通过把窗口设置为0在后台运行着；当需要展示UI的时候，恢复窗口大小，然后进入指定的UI界面即可。

结语

在常规业务场景基本都不会使用dart开发后台服务；针对整机小型服务的需求，我认为Flutter还是挺香的，内存不存在隐患，还能前后端都跨平台。
本篇文章，分享了整个shelf框架编写web服务的经验，我认为在这个小众的类目中这篇文章算是非常齐全了；同时我们也验证了Flutter/Dart在web服务的可行性，Flutter的业务价值进一步提升~

Android 学习笔录

Android 性能优化篇：https://qr18.cn/FVlo89
Android 车载篇：https://qr18.cn/F05ZCM
Android 逆向安全学习笔记：https://qr18.cn/CQ5TcL
Android Framework底层原理篇：https://qr18.cn/AQpN4J
Android 音视频篇：https://qr18.cn/Ei3VPD
Jetpack全家桶篇（内含Compose）：https://qr18.cn/A0gajp
Kotlin 篇：https://qr18.cn/CdjtAF
Gradle 篇：https://qr18.cn/DzrmMB
OkHttp 源码解析笔记：https://qr18.cn/Cw0pBD
Flutter 篇：https://qr18.cn/DIvKma
Android 八大知识体：https://qr18.cn/CyxarU
Android 核心笔记：https://qr21.cn/CaZQLo
Android 往年面试题锦：https://qr18.cn/CKV8OZ
2023年最新Android 面试题集：https://qr18.cn/CgxrRy
Android 车载开发岗位面试习题：https://qr18.cn/FTlyCJ
音视频面试题锦：https://qr18.cn/AcV6Ap

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

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

相关文章

去除UI切图边缘上多余的线条

去除UI切图边缘上多余的线条

最近接到UI切图&#xff0c;放进项目&#xff0c;显示边缘有多余线条&#xff0c;影响UI美观。开始以为切图没切好&#xff0c;实则不是。如图&#xff1a; ->解决&#xff1a; 将该图片资源WrapMode改为Clamp
阅读更多...
2021年03月 C/C++（三级）真题解析#中国电子学会#全国青少年软件编程等级考试

2021年03月 C/C++（三级）真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;找和为K的两个元素 在一个长度为n(n < 1000)的整数序列中&#xff0c;判断是否存在某两个元素之和为k。 时间限制&#xff1a;1000 内存限制&#xff1a;65536 输入 第一行输入序列的长度n和k&#xff0c;用空格分开。 第二行输入序列中的n个整数&#xff…
阅读更多...
Rancher-RKE-install 部署k8s集群

Rancher-RKE-install 部署k8s集群

一、为什么用Rancher-RKE-install 1.CNCF认证的k8s安装程序。 2.有中文文档。 二、安装步骤 1.下载Rancher-Rke的二进制包-下面是项目的地址 GitHub - rancher/rke: Rancher Kubernetes Engine (RKE), an extremely simple, lightning fast Kubernetes distrib…
阅读更多...
探索树算法：C语言实现二叉树与平衡树

探索树算法：C语言实现二叉树与平衡树

探索树算法&#xff1a;C语言实现二叉树与平衡树 树是计算机科学中一个重要且广泛应用的数据结构&#xff0c;它在许多领域都有着重要作用。本篇博客将深入介绍两种常见的树算法&#xff1a;二叉树遍历和平衡二叉树&#xff08;AVL树&#xff09;&#xff0c;并提供在C语言中的…
阅读更多...
Python学习笔记_基础篇(五)_数据类型之字典

Python学习笔记_基础篇(五)_数据类型之字典

一.基本数据类型 整数&#xff1a;int 字符串&#xff1a;str(注&#xff1a;\t等于一个tab键) 布尔值&#xff1a; bool 列表&#xff1a;list 列表用[] 元祖&#xff1a;tuple 元祖用&#xff08;&#xff09; 字典&#xff1a;dict 注&#xff1a;所有的数据类型都存在想对…
阅读更多...
Python Opencv实践 - 图像平移

Python Opencv实践 - 图像平移

import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_COLOR)#图像平移 #cv.warpAffine(src, M, dsize[, dst[, flags[, borderMode[, borderValue]]]]) # M是仿射变换矩阵&#xff0c;对于平移来说M是一…
阅读更多...
《Zookeeper》源码分析（十五）之 选举算法

《Zookeeper》源码分析（十五）之 选举算法

FastLeaderElection FastLeaderElection实现了接口Election&#xff0c;选举方法为lookForLeader()&#xff0c;选举算法的核心逻辑也在该方法中。 数据结构 构造函数 start() 启动选举通信网络 lookForLeader() 选举核心算法 FastLeaderElection.logicalclock属性用于标…
阅读更多...
从零开发短视频电商 自动化测试WebUI端到端测试-Playwright

从零开发短视频电商 自动化测试WebUI端到端测试-Playwright

文章目录 Playwright是什么Playwright入门示例添加Maven依赖示例代码启动验证 功能自动等待内置Web断言可视化UI模式减慢操作截图录屏脚本录制 高级识别验证码 Playwright是什么 https://playwright.dev/ https://playwright.dev/java/ Playwright为现代 Web 应用程序提供可…
阅读更多...
linux 系统中vi 编辑器和库的制作和使用

linux 系统中vi 编辑器和库的制作和使用

目录 1 vim 1.1 vim简单介绍 1.2 vim的三种模式 1.3 vim基本操作 1.3.1命令模式下的操作 1.3.2 切换到文本输入模式 1.3.3 末行模式下的操作 2 gcc编译器 2.1 gcc的工作流程 2.2 gcc常用参数 3 静态库和共享&#xff08;动态&#xff09;库 3.1库的介绍 3.2静态…
阅读更多...
实现Java异步调用的高效方法

实现Java异步调用的高效方法

文章目录 为什么需要异步调用&#xff1f;Java中的异步编程方式1. 使用多线程2. 使用Java异步框架 异步调用的关键细节结论 &#x1f389;欢迎来到Java学习路线专栏~实现Java异步调用的高效方法 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈寒的博…
阅读更多...
Python 3 使用HBase 总结

Python 3 使用HBase 总结

HBase 简介和安装 请参考文章&#xff1a;HBase 一文读懂 Python3 HBase API HBase 前期准备 1 安装happybase库操作hbase 安装该库 pip install happybase2 确保 Hadoop 和 Zookeeper 可用并开启 确保Hadoop 正常运行 确保Zookeeper 正常运行3 开启HBase thrift服务 使用命…
阅读更多...
【EI复现】一种建筑集成光储系统规划运行综合优化方法（Matlab代码实现）

【EI复现】一种建筑集成光储系统规划运行综合优化方法（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
目标检测（Object Detection）

目标检测（Object Detection）

文章目录 1. 目标检测1.1 目标检测简要概述及名词解释1.2 IOU1.3 TP TN FP FN1.4 precision&#xff08;精确度&#xff09;和recall&#xff08;召回率&#xff09; 2. 边框回归Bounding-Box regression3. Faster R-CNN3.1 Faster-RCNN&#xff1a;conv layer3.2 Faster-RCNN&…
阅读更多...
跨境电商平台（例如阿里巴巴、虾皮）的商品数据如何收集？

跨境电商平台（例如阿里巴巴、虾皮）的商品数据如何收集？

跨境电商是指通过互联网&#xff0c;以跨越国家或地区边界的方式进行电子商务交易的商业行为。传统的电子商务通常是在同一国家或地区内进行&#xff0c;而跨境电商则侧重于跨国贸易。跨境电商通过在线平台&#xff08;如阿里巴巴、亚马逊等&#xff09;或第三方服务商&#xf…
阅读更多...
【数据结构】堆的实现，堆排序以及TOP-K问题

【数据结构】堆的实现，堆排序以及TOP-K问题

目录 1.堆的概念及结构 2.堆的实现 2.1初始化堆 2.2销毁堆 2.3取堆顶元素 2.4返回堆的大小 2.5判断是否为空 2.6打印堆 2.7插入元素 2.8堆的向上调整 2.9弹出元素 2.10堆的向下调整 3. 建堆时间复杂度 4. 堆的应用 4.1 堆排序 4.2 TOP-K问题 1.堆的概念及结构 …
阅读更多...
FFmpeg5.0源码阅读——VideoToobox硬件解码

FFmpeg5.0源码阅读——VideoToobox硬件解码

摘要&#xff1a;本文描述了FFmpeg中videotoobox解码器如何进行解码工作&#xff0c;如何将一个编码的码流解码为最终的裸流。   关键字&#xff1a;videotoobox,decoder,ffmpeg   VideoToolbox 是一个低级框架&#xff0c;提供对硬件编码器和解码器的直接访问。 它提供视频…
阅读更多...
WebRTC音视频通话-RTC直播本地视频及相册视频文件

WebRTC音视频通话-RTC直播本地视频及相册视频文件

WebRTC音视频通话-RTC直播本地视频及相册视频文件 WebRTC音视频通话-RTC直播本地视频文件效果图如下 WebRTC音视频通话-RTC直播本地视频文件时候&#xff0c;用到了AVPlayer、CADisplayLink。 一、通过AVPlayer播放本地视频 AVPlayer是什么&#xff1f; AVPlayer是基于AV…
阅读更多...
35_windows环境debug Nginx 源码-CLion配置CMake和启动

35_windows环境debug Nginx 源码-CLion配置CMake和启动

文章目录 生成 CMakeLists.txt 组态档35_windows环境debug Nginx 源码-CLion配置CMake和启动生成 CMakeLists.txt 组态档 修改auto目录configure文件，在 . auto/make 上边增加 . auto/cmake, 大概在 106 行。在 auto 目录下创建cmake 文件其内容如下： #!/usr/bin/env bash NG…
阅读更多...
从外部访问K8s中Pod的五种方式

从外部访问K8s中Pod的五种方式

hostNetwork、 hostPort、 NodePort、 LoadBalancer、 Ingress 暴露Pod与Service一样&#xff0c;因为Pod就是Service的backend 1、hostNetwork&#xff1a;true 这是一种直接定义 Pod 网络的方式。 如果在 Pod 中使用 hostNetwork:true 配置&#xff0c; pod 中运行的应用程序…
阅读更多...
C++头文件

C++头文件

C头文件 一般头文件特殊头文件windows.hbits/stdc.h 一般头文件 C头文件是一种包含预定义函数、类和变量声明的文件。它们通常用于在源代码文件中引入外部库或模块的功能。 头文件的作用是提供程序所需的声明信息&#xff0c;以便在源代码文件中使用这些声明。当你在源代码文…
阅读更多...
最新文章

Copyright @ 2022~2023