将 shell 输出流式传输到 Web 前端

Question

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

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

Answer 1

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

有几种方法可以实现这一点：

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

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

您可以在此处找到包含前端和后端 (NodeJS) 代码的完整示例。后端只是一个 websocket 服务器，它将命令的输出通过管道传输到传入的连接。

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

前端是一个非常简单的ConsoleVueJS 组件，我在下面进行了描述。所有繁重的工作都由ansi_up库完成，我只是将它的输出直接用作组件的 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>