Node.js 控制台日志与用户输入并行显示教程

本教程详细介绍了如何在 node.js 应用中实现控制台日志输出与用户输入行的并行显示，避免日志清除用户输入。通过利用 `readline` 模块手动管理光标位置和屏幕内容，我们能够维护一个固定的用户输入行，同时在上方动态显示异步生成的日志信息，从而提供更友好的交互式命令行体验。

在开发 Node.js 命令行应用程序时，我们经常面临一个挑战：如何在控制台中同时显示异步产生的日志信息，并且允许用户在不中断或清除当前输入行的情况下输入命令？传统的 console.log 方法会直接在当前光标位置输出并换行，这通常会覆盖或扰乱用户正在输入的文本。即使使用 readline 模块来处理用户输入，如果日志输出不加控制，也容易导致屏幕闪烁或输入行被清除。

本文将提供一种基于 Node.js 内置 readline 模块的解决方案，通过精确控制光标位置和屏幕内容，实现日志与输入行的和谐共存。

核心原理

解决这个问题的关键在于：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

1. 维护一个日志缓冲区： 将所有待显示的日志消息存储在一个数组中。
2. 定期重绘屏幕： 在每次有新日志或需要更新显示时，清空部分屏幕，然后从头开始重绘所有日志行。
3. 固定输入行位置： 在重绘完所有日志后，将光标精确地移动到预设的用户输入行位置，确保用户可以继续输入。

实现步骤与代码示例

我们将通过一个具体的代码示例来演示如何实现这一功能。

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('欢迎使用交互式命令行！');

代码解析

1. logLines 和 INPUT_ROW_OFFSET：
   • logLines 数组用于存储所有历史日志消息。
   • INPUT_ROW_OFFSET 定义了用户输入行距离屏幕顶部的行数。这意味着屏幕上方 INPUT_ROW_OFFSET 行将用于显示日志。
2. readline.createInterface：
   • 用于创建 readline 接口，它监听 process.stdin 的输入，并将输出定向到 process.stdout。
   • 注意，这里没有设置 prompt 选项，因为我们将手动管理输入提示符的显示。
3. rl.on('line', ...)：
   • 当用户按下回车键时，此事件被触发，line 参数包含用户输入的文本。我们在这里将用户输入也作为一条日志显示。
4. setInterval(...)：
   • 这是一个模拟异步日志输出的例子，每隔一定时间调用 log 函数。
5. 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('> ')：手动写入一个输入提示符，让用户知道可以在这里输入。

注意事项与总结

1. INPUT_ROW_OFFSET 的选择： 这个值决定了日志区域的大小。如果日志量很大，可能需要更大的值。如果日志行数超过 INPUT_ROW_OFFSET，旧的日志将不再显示。
2. 性能考虑： 频繁地重绘整个屏幕可能会对性能产生轻微影响，但在大多数命令行应用中这通常不是问题。对于极其高频的日志输出，可能需要更复杂的优化，例如只重绘发生变化的区域。
3. 终端兼容性： readline 模块的这些高级功能依赖于终端对 ANSI 转义序列的支持。现代终端（如 macOS 的 Terminal、Linux 的 GNOME Terminal、Windows 的 PowerShell/WSL）通常都支持，但某些老旧或简化的终端可能表现不佳。
4. 更复杂的 UI： 如果需要构建更复杂的全屏终端用户界面（TUI），例如带有多个面板、滚动区域和更精细的事件处理，可以考虑使用专门的库，如 blessed 或 ink。这些库提供了更高级别的抽象，但学习曲线也相对较陡。
5. rl.prompt() 的使用： 如果在创建 readline 接口时设置了 prompt 选项，那么在 log 函数的最后调用 rl.prompt(true) 会自动显示提示符并保持输入行活跃。由于本例中没有设置 prompt，我们手动写入了 '> '。

通过上述方法，我们成功地在 Node.js 应用程序中实现了日志输出与用户输入的并行显示，极大地提升了命令行应用的交互性和用户体验。这种技术在需要实时反馈和用户命令输入的场景中非常有用，例如 CLI 工具、游戏或监控仪表盘。

以上就是Node.js 控制台日志与用户输入并行显示教程的详细内容，更多请关注php中文网其它相关文章！