时间戳

首页 > 解决方案 > 覆盖多个先前的终端输出

javascript - 覆盖多个先前的终端输出

问题描述

我有一个 webpack-dev-server 代理，我想在服务器运行时在终端窗口中显示对代理的请求。使这更复杂的是，我想在收到请求时显示请求，然后在收到响应时用状态码更新最初写入的内容。例如，如果我要请求 GET /foo，我希望最初显示：

(---) GET /foo

然后，如果代理返回 200 响应状态，我希望控制台输出像这样更新：

(200) GET /foo

我有这个（大部分）使用这个：

const readline = require('readline');
// ...
devServer: {
    proxy: {
        onProxyReq: function (proxyReq, req, res) {
            process.stdout.write(`(---) ${req.method} ${req.url}`);
            proxyReq.on('response', function(response) {
                readline.clearLine(process.stdout, 0);
                readline.cursorTo(process.stdout, 0, null);
                process.stdout.write(`(${response.statusCode}) ${req.method} ${req.url}\n`);
            });
        }
    }
}
// ...

它失败的地方是在返回任何响应之前收到多个请求，在这种情况下，输出类似于以下内容：

(---) GET /foo/1(---) GET /bar/2(---) GET /baz/3
(200) GET /bar/2
(200) GET /baz/3
(200) GET /foo/1

我看过使用readline 的 moveCursorvs cursorTo，但我不知道如何跟踪之前写入的行号。

收到响应后，如何修改我当前拥有的内容以跟踪并覆盖正确的控制台输出行？

标签： javascriptnode.jswebpack-dev-serverreadline

解决方案

我认为您需要使用 areadline.moveCursor相对于其当前位置移动光标以返回与请求对应的行。这也意味着您需要跟踪当前行或x: 0在每次写入后始终将其移回。

以下代码段不是您要查找的内容，但它演示了如何使用 readline 光标命令随着时间的推移覆盖现有的控制台输出。

const readline = require('readline')

let i = 0;
const next = () => {
    if (i && i%3 === 0) readline.moveCursor(process.stdout, null, -3)
    readline.cursorTo(process.stdout, 0, null);
    readline.clearLine(process.stdout, 0);
    process.stdout.write(`${i}\n`);
    i += 1;
    if (i < 9) setTimeout(next, 200);
    else console.log();
}
setTimeout(next, 200);

对于您的具体示例，我认为您想要更类似于以下内容：

const readline = require('readline');
// ...
urls = [];
const rowOf = url => {
    let row = urls.indexOf(req.url);
    if (row === -1) {
        row = urls.length;
        urls.push(req.url);
    }
    return row;
}

const writeLine = (row, str) => {
    readline.moveCursor(process.stdout, null, row);
    readline.cursorTo(process.stdout, 0, null);
    readline.clearLine(process.stdout, 0);
    process.stdout.write(str);
    readline.moveCursor(process.stdout, null, -1*row);
    readline.cursorTo(process.stdout, 0, null);
}

devServer: {
    proxy: {
        onProxyReq: function (proxyReq, req, res) {
            writeLine(rowOf(req.url), `(---) ${req.method} ${req.url}`);
            proxyReq.on('response', function(response) {
                writeLine(rowOf(req.url), `(${response.statusCode}) ${req.method} ${req.url}\n`)
            });
        }
    }
}

推荐阅读