流外壳输出到Web前端

Question

我希望呈现在后端服务器上运行的，运行长时间的shell命令的实时输出，包括ANSI转义代码呈现，就像GitLab如何显示CI管道的输出一样。例如：

是否存在任何可以提供此功能的库或框架？我希望前端可以通过循环，websockets或类似方式中的REST调用从后端检索输出。 jQuery Terminal Emulator似乎很近，但是我不希望拥有一个交互式终端。该应用程序的堆栈当前在后端使用Django Rest Framework，在前端使用Vue.js。

Answer 1

这是一个相当广泛的问题，但很有趣。我发现很难仅凭代码来提供对此的答案，但是也许您会发现我的答案仍然有用。

有两种方法可以实现：

1. 将ANSI字符串转换为HTML并将其发送给客户端
2. 将ANSI字符串发送给客户端，并要求他们进行转换

我选择了第二个，因为您似乎在后端使用Python，但我并不十分了解Python Web编程为您提供了完整的示例。在这种情况下，选项2限制了您必须在Python中复制才能获得下面所示功能的代码量。

您可以找到带有前端和后端（NodeJS）代码here的完整示例。后端只是一个websocket服务器，它将命令的输出通过管道传递到传入的连接。

对于输出，我尝试使用apt update和top，但是从NodeJS调用时apt update不会呈现颜色输出，并且top会抱怨缺少{{1 }}。相反，我决定使用一个简单的Shell脚本来生成具有随机ANSI颜色的字符串。这种逻辑大部分是从this answer借来的。

前端是一个非常简单的tty VueJS组件，下面将对其进行介绍。所有繁重的工作都是由ansi_up库完成的，我只是将其输出直接用作组件的HTML内容。

Console