流壳输出到web前端

Question

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

​

是否有任何现有的库或框架可以提供此功能？我预计前端将通过循环、websockets或类似的REST调用从后端检索输出。看起来jQuery终端仿真器很接近，但我并不想要一个交互式终端。应用程序的堆栈目前在后端使用Django Rest Framework，在前端使用Vue.js。

Answer 1

这是一个相当广泛的问题，但也是一个有趣的问题。我发现很难仅仅从代码的角度来回答这个问题，但也许您会发现我的答案是有用的。

实现这一目标的途径有两种：

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

我选择了第二个，因为您似乎在后端使用Python，而且我并不真正了解Python编程来给出一个完整的示例。在这种情况下，选项2限制了您必须在Python中复制的代码数量，以获得如下所示的功能。

您可以找到一个具有前端和后端(NodeJS)代码这里的完整示例。后端只是一个websocket服务器，它将命令的输出输送到传入的连接。

对于输出，我尝试使用apt update和top，但是当从NodeJS调用时，apt update不会呈现颜色输出，top会抱怨缺少tty。相反，我决定使用一个简单的shell脚本来生成带有随机ANSI颜色的字符串。大部分逻辑都是从这个答案中借用来的。

前端是一个非常简单的Console VueJS组件，我在下面已经描述过了。所有的繁重工作都是由向上库完成的，我只是将它的输出直接用作组件的HTML。

<template>
  <div class="console" v-html="html">
  </div>
</template>

<script>
import AnsiUp from 'ansi_up'

export default {
  name: 'shell',
  props: ['socket'],
  data () {
    return {
      ansi: undefined,
      content: ''
    }
  },
  computed: {
    html () {
      // Ensures we have some semblance of lines
      return this.ansi.ansi_to_html(this.content).replace(/\n/gm, '<br>')
    }
  },
  watch: {
    socket () {
      this.socket.on('data', data => {
        this.content += data
      })
      this.socket.send('ready')
    }
  },
  beforeMount () {
    this.ansi = new AnsiUp()
  },
  updated () {
    // auto-scroll to the bottom when the DOM is updated
    this.$el.scrollTop = this.$el.scrollHeight
  }
}
</script>

<style lang="scss" scoped>
.console {
  font-family: monospace;
  text-align: left;
  background-color: black;
  color: #fff;
  overflow-y: auto;
}
</style>