跳转到主内容
websoft网络软件专家 - 深耕网络技术,打造实用软件!

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

本教程详细介绍了如何在 node . js 应用中实现控制台日志输出与用户输入行的并行显示,避免日志清除用户输入。通过利用 `readline` 模块手动管理光标位置和屏幕内容,我们能够维护一个固定的用户输入行,同时在上方动态显示异步生成的日志信息,从而提供更友好的交互式命令行体验。 在开发 Node.js 命令行应用程序时,我们经常面临一个挑战:如何在控制台中同时显示异步产生的日志信息,并且允许用户在不中断或清除当前输入行的情况下输入命令?传统的 console.log 方法会直接在当前光标位置输出并换行,这通常会覆盖或扰乱用户正在输入的文本。即使使用 readline 模块来处理用户输入,如果日志输出不加控制,也容易导致屏幕闪烁或输入行被清除。 本文将提供一种基于 Node.js 内置 readline 模块的解决方案,通过精确控制光标位置和屏幕内容,实现日志与输入行的和谐共存。 核心原理 解决这个问题的关键在于: Midjourney AI 提示词工具 PHP中文网提供Midjourney AI 提示词在线生成工具,专为解决 AI 绘画“词穷”痛点而生,用户只需输入“一只猫”等简单想法,工具便能利用 AI 智能扩展出包含艺术风格、光影构图、镜头参数及负面提示词的专业级英文 Prompt。它完美兼容 Midjourney V8.1 及 Niji 模型,支持一键复制与参数自动优化,大幅降低创作门槛,是提升出图质量与效率的必备辅助神器。 下载 维护一个日志缓冲区: 将所有待显示的日志消息存储在一个数组中。 定期重绘屏幕: 在每次有新日志或需要更新显示时,清空部分屏幕,然后从头开始重绘所有日志行。 固定输入行位置: 在重绘完所有日志后,将光标精确地移动到预设的用户输入行位置,确保用户可以继续输入。 实现步骤与代码示例 我们将通过一个具体的代码示例来演示如何实现这一功能。
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 转义序列的支持。现代终端(如 mac OS 的 Terminal、Linux 的 GNOME Terminal、Windows 的 PowerShell/WSL)通常都支持,但某些老旧或简化的终端可能表现不佳。 更复杂的 UI: 如果需要构建更复杂的全屏终端用户界面(TUI),例如带有多个面板、滚动区域和更精细的事件处理,可以考虑使用专门的库,如 blessed 或 ink 。这些库提供了更高级别的抽象,但学习曲线也相对较陡。 rl.prompt() 的使用: 如果在创建 readline 接口时设置了 prompt 选项,那么在 log 函数的最后调用 rl.prompt(true) 会自动显示提示符并保持输入行活跃。由于本例中没有设置 prompt,我们手动写入了 '> '。 通过上述方法,我们成功地在 Node.js 应用程序中实现了日志输出与用户输入的并行显示,极大地提升了命令行应用的交互性和用户体验。这种技术在需要实时反馈和用户命令输入的场景中非常有用,例如 CLI 工具、游戏或监控仪表盘。

相关文章