本教程详细介绍了如何在 node.js 应用中实现控制台日志输出与用户输入行的并行显示，避免日志清除用户输入。通过利用 `readline` 模块手动管理光标位置和屏幕内容，我们能够维护一个固定的用户输入行，同时在上方动态显示异步生成的日志信息，从而提供更友好的交互式命令行体验。
在开发 Node.js 命令行应用程序时，我们经常面临一个挑战：如何在控制台中同时显示异步产生的日志信息，并且允许用户在不中断或清除当前输入行的情况下输入命令？传统的 console.log 方法会直接在当前光标位置输出并换行，这通常会覆盖或扰乱用户正在输入的文本。即使使用 readline 模块来处理用户输入，如果日志输出不加控制，也容易导致屏幕闪烁或输入行被清除。
本文将提供一种基于 Node.js 内置 readline 模块的解决方案，通过精确控制光标位置和屏幕内容，实现日志与输入行的和谐共存。
核心原理
解决这个问题的关键在于：
- 维护一个日志缓冲区： 将所有待显示的日志消息存储在一个数组中。
- 定期重绘屏幕： 在每次有新日志或需要更新显示时，清空部分屏幕，然后从头开始重绘所有日志行。
- 固定输入行位置： 在重绘完所有日志后，将光标精确地移动到预设的用户输入行位置，确保用户可以继续输入。
实现步骤与代码示例
我们将通过一个具体的代码示例来演示如何实现这一功能。
const readline = require('readline');
const process = require('process');
// 定义日志缓冲区和输入行位置
let logLines = [];
const INPUT_ROW_OFFSET = 10; // 用户输入行相对于屏幕顶部的偏移量，即日志最多显示10行
// 创建 readline 接口，用于处理用户输入
// 注意：这里不再设置 prompt，因为我们将手动管理输入行的显示
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
});
// 监听用户输入事件
rl.on('line', (line) => {
// 当用户输入一行后，将其作为日志显示
log(`用户输入: ${line}`);
// 如果需要，可以在这里处理用户命令
// 例如：if (line === 'exit') rl.close();
});
// 模拟异步日志输出
setInterval(() => {
log(`Hello World - ${new Date().toLocaleTimeString()}`);
}, 1500); // 每1.5秒输出一条日志
/**
* 自定义日志函数，用于在不清除用户输入行的情况下显示日志
* @param {string} str 要显示的日志字符串
*/
function log(str) {
// 1. 将光标移动到屏幕顶部 (0, 0)
readline.cursorTo(process.stdout, 0, 0);
// 2. 清除光标以下的所有屏幕内容
readline.clearScreenDown(process.stdout);
// 3. 将新日志添加到日志缓冲区的开头
logLines.unshift(str);
// 4. 限制日志行数，避免超出预设的 INPUT_ROW_OFFSET
logLines = logLines.slice(0, INPUT_ROW_OFFSET);
// 5. 遍历并重新写入所有日志行
for (let row = 0; row < Math.min(INPUT_ROW_OFFSET, logLines.length); row++) {
process.stdout.write(logLines[row]); // 写入日志内容
// 移动光标到下一行开头，准备写入下一条日志
readline.cursorTo(process.stdout, 0, row + 1);
}
// 6. 将光标移动到预设的用户输入行位置
// 这一步至关重要，它确保了用户可以在固定的位置进行输入
readline.cursorTo(process.stdin, 0, INPUT_ROW_OFFSET);
// 7. 重新显示输入提示符（如果需要）
// rl.prompt(true); // 如果创建rl时设置了prompt，这里可以重新显示
// 由于我们没有设置rl.prompt，这里可以手动写入一个提示符
process.stdout.write('> ');
}
// 初始调用一次 log，以显示输入提示符
log('欢迎使用交互式命令行！');代码解析
-
logLines 和 INPUT_ROW_OFFSET：
- logLines 数组用于存储所有历史日志消息。
- INPUT_ROW_OFFSET 定义了用户输入行距离屏幕顶部的行数。这意味着屏幕上方 INPUT_ROW_OFFSET 行将用于显示日志。
-
readline.createInterface：
- 用于创建 readline 接口，它监听 process.stdin 的输入，并将输出定向到 process.stdout。
- 注意，这里没有设置 prompt 选项，因为我们将手动管理输入提示符的显示。
-
rl.on('line', ...)：
- 当用户按下回车键时，此事件被触发，line 参数包含用户输入的文本。我们在这里将用户输入也作为一条日志显示。
-
setInterval(...)：
- 这是一个模拟异步日志输出的例子，每隔一定时间调用 log 函数。
-
log(str) 函数： 这是核心逻辑所在。
- readline.cursorTo(process.stdout, 0, 0)：将光标移动到控制台的左上角（第0列，第0行）。
- readline.clearScreenDown(process.stdout)：从当前光标位置（现在是左上角）向下清除屏幕的所有内容。这会清除所有旧的日志和用户输入行。
- logLines.unshift(str)：将新的日志字符串添加到 logLines 数组的开头，这样最新的日志会显示在最上面。
- logLines = logLines.slice(0, INPUT_ROW_OFFSET)：确保 logLines 数组的长度不超过 INPUT_ROW_OFFSET，防止日志溢出预留的显示区域。
- for 循环：遍历 logLines 数组，将每一条日志写入到屏幕上。readline.cursorTo(process.stdout, 0, row + 1) 在写入一条日志后，将光标移动到下一行的开头，以便下一条日志能正确显示。
- readline.cursorTo(process.stdin, 0, INPUT_ROW_OFFSET)：这是最关键的一步。在所有日志都重绘完成后，将光标移动到预设的 INPUT_ROW_OFFSET 行，即用户输入行的位置。process.stdin 在这里与 process.stdout 效果相同，都是为了定位光标。
- process.stdout.write('> ')：手动写入一个输入提示符，让用户知道可以在这里输入。
注意事项与总结
- INPUT_ROW_OFFSET 的选择： 这个值决定了日志区域的大小。如果日志量很大，可能需要更大的值。如果日志行数超过 INPUT_ROW_OFFSET，旧的日志将不再显示。
- 性能考虑： 频繁地重绘整个屏幕可能会对性能产生轻微影响，但在大多数命令行应用中这通常不是问题。对于极其高频的日志输出，可能需要更复杂的优化，例如只重绘发生变化的区域。
- 终端兼容性： readline 模块的这些高级功能依赖于终端对 ANSI 转义序列的支持。现代终端（如 macOS 的 Terminal、Linux 的 GNOME Terminal、Windows 的 PowerShell/WSL）通常都支持，但某些老旧或简化的终端可能表现不佳。
- 更复杂的 UI： 如果需要构建更复杂的全屏终端用户界面（TUI），例如带有多个面板、滚动区域和更精细的事件处理，可以考虑使用专门的库，如 blessed 或 ink。这些库提供了更高级别的抽象，但学习曲线也相对较陡。
- rl.prompt() 的使用： 如果在创建 readline 接口时设置了 prompt 选项，那么在 log 函数的最后调用 rl.prompt(true) 会自动显示提示符并保持输入行活跃。由于本例中没有设置 prompt，我们手动写入了 '> '。
通过上述方法，我们成功地在 Node.js 应用程序中实现了日志输出与用户输入的并行显示，极大地提升了命令行应用的交互性和用户体验。这种技术在需要实时反馈和用户命令输入的场景中非常有用，例如 CLI 工具、游戏或监控仪表盘。
