Flutter 终端模拟器组件 - 开源篇

前言

• 本文主要是介绍终端模拟器系列的相关开源。
• 代码仅供交流学习，所有代码的开源都选择了宽松的协议。代码都在大量测试中，谨慎引入到正式项目中使用。

开源列表

• dart_pty
• termare_ssh
• termare_pty
• termare_view

dart_pty

简介

创建一个伪终端并执行一个子进程。也是终端模拟器的底层实现。 与语言提供的执行进程不同，它不仅能够无缓冲的拿到 stdout、stderr 输出，还能拿到所有的终端序列，也能对进程进行交互。

起因

在各种语言都提供了创建子进程的函数，但这类函数都无法无缓冲的获得子进程在运行时得到的输出，并且无法与子进程交互。 例如： 在终端模拟器运行

python
复制代码

那么它应该输出

Python 3.8.6 (default, Oct  8 2020, 14:06:32) 
[Clang 12.0.0 (clang-1200.0.32.2)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> 
复制代码

而我们在 java 中使用：

Runtime.getRuntime().exec("python");
复制代码

python 中：

system("python");
复制代码

c 语言：

system("python");
复制代码

dart 中

Process.start("python");
复制代码

进程创建后，我们并不能够与子进程交互，并且无论是在哪一种语言，我们执行python都获取不到像终端一样的输出，这是由于缓冲还没有满 4096 字节(通常)，以上提到的函数获取子进程的输出都是通过管道的形式，而在管道中获取输出是全缓冲，全缓冲为4096字节，终端中为行缓冲1024字节，在进程不主动刷新缓冲的情况下，我们是获取不到它的输出的。

c 语言被编译成二进制后能交互，是因为 system 函数子进程与主进程是同一个输入输出。

原理解析

原理解析移步文章：Flutter 终端模拟器探索篇（二）| 完整终端模拟器

涉及东西有点多，不是本文关注的重点。

开始使用

这是一个纯 dart 项目，你可以集成到 dart 项目或者 flutter 项目中。

配置 yaml

  dart_pty:
    git: https://github.com/termare/dart_pty
复制代码

已经上传 dart package，在发布 1.0 版本前， dart package 上代码可能差异会很大。

导入包

import 'package:dart_pty/src/unix_pty_c.dart';
复制代码

创建 pty 对象

  Map<String, String> environment = {'TEST': 'TEST_VALUE'};
  UnixPtyC unixPthC = UnixPtyC(
    environment: environment,
    libPath: 'dynamic_library/libterm.dylib',
  );
复制代码

当对象创建的时候，就已经存在一个读写指向同一进程的文件描述符了，通过对这个文件描述符的写入即可实现与子进程的交互，读取即可获得子进程的输出，这个输出是无缓冲的。

读写子进程

  await Future.delayed(Duration(milliseconds: 100), () async {
    while (true) {
      print('请向终端输入一些东西');
      String input = stdin.readLineSync();
      unixPthC.write(input + '\n');
      await Future.delayed(Duration(milliseconds: 200));
      result = unixPthC.read();
      print('\x1b[31m' + '-' * 20 + 'result' + '-' * 20);
      print('result -> $result');
      print('-' * 20 + 'result' + '-' * 20 + '\x1b[0m');
      await Future.delayed(Duration(milliseconds: 100));
    }
  });
复制代码

缺点

• 需要引入 so 库。
• 还不支持 windows。

能不用集成 so 库就能实现本地终端吗？

使用 dart:ffi 来编写原来底层的逻辑，这样就能完全的脱离 c 语言部分，不用再为每一个平台编译一份本地库，与西南交大的大佬在 20 年暑假的时候其实就已经实现了，他采用了 isolate 来解决了读文件描述符会阻塞 UI 线程的问题，但isolate是不能热重载的，并且当终端数量过多的时候，vscode 就会显示一堆isolate runtime。

而我想要通过设置文件描述符非阻塞的方式来实现，终端的创建与子进程的 fork 都没有问题，但在执行以下代码的时候，发现了差异性。 在 PC 上能够正常的运行，而在 android 设备上失效，跟设备上flag的宏定义应该有关系，只要能找出O_NONBLOCK这个宏在安卓上的定义值就能解决。

除了以上问题，dart:ffi 在使用一些头文件的时候，在 android 端存在几率性 crash 的情况。

以下为 dart 代码：

  void setNonblock(int fd, {bool verbose = false}) {
    int flag = -1;
    flag = cfcntl.fcntl(fd, F_GETFL, 0); //获取当前flag
    if (verbose) print('>>>>>>>> 当前flag = $flag');
    flag |= O_NONBLOCK; //设置新falg
    if (verbose) print('>>>>>>>> 设置新flag = $flag');
    cfcntl.fcntl(fd, F_SETFL, flag); //更新flag
    flag = cfcntl.fcntl(fd, F_GETFL, 0); //获取当前flag
    if (verbose) print('>>>>>>>> 再次获取到的flag = $flag');
  }
复制代码

这段 dart 代码原本的 c 语言代码为：

void setNonblock(int fd)
{
    int flag = -1;
    flag = fcntl(fd, F_GETFL); //获取当前flag
    flag |= O_NONBLOCK;        //设置新falg
    fcntl(fd, F_SETFL, flag);  //更新flag
}
复制代码

• unix_pty：ffi 实现。
• term.c：底层实现。

关于 dart:ffi 的使用详见 Dart FFI 探索（三）| 新思路使用 FFI

termare_view

支持全平台的终端模拟器，使用 Flutter 开发，不依赖平台代码。

这是在“Flutter 终端模拟器探索篇（三）| 原理解析与集成”文章的探索后，持续开发维护后的代码仓库。

如果想得到更稳定的 flutter 终端模拟器，可以使用 xterm.dart，上面提到西南交大的大佬开发的，我选择自己开发一份主要是为了更多是适配移动端的表现，还有就是对这个终端花费了很多精力，自己项目的终端组件还是想要通过自己经手编写。

背景分析

需要维护一个自己的终端模拟器，这个模拟器需要集成到移动应用或者桌面应用，起初考虑用android-terminal-emulator，后来因为这个终端模拟器已经很久没有再维护过了，就转向了termux，termux在整个组织中都有非常丰富的开源，但如果完全使用termux代码集成到个人项目，在安卓端我可以跳转activity并通过am命令发送广播通知原生终端模拟器自动键入命令，但在桌面端就没有办法。

于是idea就出现了，如果用Flutter重写这个模拟器呢？一次编写，到处运行，想法很美好，但对我来说，的确很难，整个过程比较坎坷，随着技术的不断学习，很多实现也在逐渐向一种规范的方式靠近。

第一想到的是读termux的源码，注释极少，非常难理解，在移动端自定义源有非常多的坑，于是想着请教一些会知道整个开发流程的人，首先termux的作者肯定是会的，再就是neoterm的开发者，我认识她的时候她才高三。就已经上架了neoterm这个终端模拟器，目前下载量11w，所以在整个开发中她与xterm.dart的作者都很好的帮到了我。

前面开发的重大错误

• 我不应该将终端模拟器的上层渲染组件与本地底层的pseudo terminal强行整合起来，参考了xterm.js与xterm.dart后，终端应该是一个独立的上层组件，可以接收任何的输入流才对，除了本地终端的输入流，还可以是来自 ssh 的流，或者其他地方的输入。
• 不应该在未参考现有类似组件实现的情况下盲目编写，选用了上层为WidgetSpan这个组件。

重构后

• 使用 canvas 绘制整个终端模拟器。
• 将终端输入流的内容按终端序列解析成二维数组，在CustomPainter内部根据二维数组绘制内容与光标。

开始使用

引入项目

这是一个纯 flutter package，所以只需要在 yaml 配置文件的 dependencies 下引入:

termare_view:
  git: https://github.com/termare/termare_view
复制代码

创建终端控制器

TermareController controller = TermareController(
  showBackgroundLine: true,
);
复制代码

showBackgroundLine 属性是打开 debug 的格子背景开关。

使用组件

TermareView(
  controller: controller,
),
复制代码

让终端显示一些东西

controller.write('hello termare_view');
复制代码

运行如下：

你可能会发现，不就是画了一个格子背景，然后绘制了文本而已吗？

再执行：

controller.write('\x1B[1;31mhello termare_view\x1B[0m\n');
controller.write('\x1B[1;32mhello termare_view\x1B[0m\n');
复制代码

所以关于什么是终端序列的这一问题也能通过这个例子体现出来了，在来自任何终端的输出流中，都是通过类似“\x1B[1;31m”的序列来告知模拟器的绘制行为与其他行为。

详见 example 。

使用 dart 的 print 打印 '\x1B[1;31mhello termare_view\x1B[0m\n' 也有效果哦。

终端序列列表

取自 xterm.js。

termare_pty

这是一个用 pty 实现本地终端的例子。依赖 dart_pty与termare_view。

原理解析

通过第一个开源库dart_pty，去实现一个本地终端，再将终端的输入输出流与termare_view绑定起来。

创建 pty

    unixPtyC = widget.unixPtyC ??
        UnixPtyC(
          libPath: Platform.isMacOS
              ? '/Users/nightmare/Desktop/termare-space/dart_pty/dynamic_library/libterm.dylib'
              : 'libterm.so',
          rowLen: row,
          columnLen: column - 2,
          environment: <String, String>{
            'TERM': 'screen-256color',
            'PATH':
                '/data/data/com.nightmare/files/usr/bin:${Platform.environment['PATH']}',
          },
        );
复制代码

目前写得很死，传入的 libPath 就是依赖的 so 库，在dart_pty下有 linux、macos 已经编译好的库，在termare_pty中也有安卓四个架构的so库。

绑定到终端组件

    while (mounted) {
      final String cur = unixPtyC.read();
      if (cur.isNotEmpty) {
        controller.write(cur);
        controller.autoScroll = true;
        controller.notifyListeners();
        await Future<void>.delayed(const Duration(milliseconds: 10));
      } else {
        await Future<void>.delayed(const Duration(milliseconds: 100));
      }
    }
复制代码

这段代码应该是比较好理解的。controller 是 TermareController。

显示

  Widget build(BuildContext context) {
    return TermareView(
      keyboardInput: (String data) {
        unixPtyC.write(data);
      },
      controller: controller,
    );
  }
复制代码

运行截图

好像截图都有点大，

详见示例代码termare_pty.dart。

termare_ssh

这是一个用 ssh 连接服务器终端的例子，也可以连接 localhost 。

原理解析

通过dartssh这个纯 dart 的package来获得一个连接到服务器的输出流，并将输入输出绑定到termare_view。

连接到服务器

void connect() {
    controller.write('connecting ${widget.hostName}...\n');
    client = SSHClient(
      hostport: Uri.parse('ssh://' + widget.hostName + ':22'),
      login: widget.loginName,
      print: print,
      termWidth: 80,
      termHeight: 25,
      termvar: 'xterm-256color',
      getPassword: () => Uint8List.fromList(utf8.encode(widget.password)),
      response: (SSHTransport transport, String data) {
        controller.write(data);
      },
      success: () {
        controller.write('connected.\n');
      },
      disconnected: () {
        controller.write('disconnected.');
      },
    );
复制代码

controller 是 TermareController。

显示

  Widget build(BuildContext context) {
    return TermareView(
        controller: controller,
        keyboardInput: (String data) {
          client?.sendChannelData(Uint8List.fromList(utf8.encode(data)));
        },
    );
  }
复制代码

运行截图

Android

Linux

Macos

Windows

Ios

详见示例代码termare_ssh.dart。

总结

开源仅为交流学习，交流学习。

读完的朋友已经很不错了，可能会想说“啥呀，怎么一点用也没有”，有这种想法也是正常的，但如果你对终端模拟器有兴趣，欢迎跟我一起贡献这些仓库，随时与我交流，对这些有任何疑问欢迎评论区留言。