网站制作高手,住房及城乡建设部信息中心网站,crm管理营销,网站建设大企业作者#xff1a;Karl_wei 前言#xff1a;
Flutter作为跨平台的UI框架#xff0c;其可行性已经被市场所认可。UI跨端后#xff0c;我们自然会希望一些运行在终端的小服务也能跨端#xff0c;特别是当这个小服务还涉及到一些 UI 的展示。
我们希望Flutter能承担这个角色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 FutureString copyAssets() async {int now DateTime.now().millisecondsSinceEpoch;String folderPath /sdcard;final manifestContent await rootBundle.loadString(AssetManifest.json);final MapString, 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 FutureFile 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);FutureResponse userLogin(Request request) async {final requestBody await request.readAsString();final MapString, 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信息进行验证从而达到鉴权的目的。
FutureString 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);FutureResponse 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(rfilename([^]*)).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全家桶篇内含Composehttps://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
