NodeJS使用内置http模块实现网页控制台消息监听与前端事件触发咨询

核心思路 #

仅使用Node.js内置http模块即可实现需求，整体逻辑如下：

• 本地启动Node HTTP服务，预设不同路由对应不同的Node代码执行逻辑
• 前端页面绑定click等事件回调，回调中向本地Node服务发起对应路由的HTTP请求
• Node服务接收请求后匹配路由，执行对应操作即可

完整实现代码 #

服务端代码（Node.js） #

const http = require('http');
const url = require('url');

const server = http.createServer((req, res) => {
  // 允许跨域请求，避免前端调用报错
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
  
  const parsedUrl = url.parse(req.url, true);
  const path = parsedUrl.pathname;

  // 匹配点击事件对应的执行逻辑
  if (path === '/trigger-click') {
    // 这里写你需要执行的NodeJS代码片段
    console.log('收到前端点击事件触发，执行对应逻辑');
    // 示例：打印当前时间
    console.log('执行时间：', new Date().toLocaleString());
    
    res.statusCode = 200;
    res.end('操作执行完成');
    return;
  }

  // 匹配控制台消息触发的执行逻辑
  if (path === '/on-console-message') {
    const message = parsedUrl.query.content;
    // 这里写收到控制台消息后要执行的Node逻辑
    console.log('收到控制台输出消息：', message);
    
    res.statusCode = 200;
    res.end('控制台消息已接收');
    return;
  }

  res.statusCode = 404;
  res.end('路由不存在');
});

server.listen(3000, () => {
  console.log('服务已启动，监听端口3000');
});

前端页面代码 #

<!DOCTYPE html>
<html>
<body>
  <button id="testBtn">点击触发Node逻辑</button>
  <script>
    // 1. 监听点击事件触发Node逻辑
    document.querySelector('#testBtn').addEventListener('click', async () => {
      const res = await fetch('http://localhost:3000/trigger-click');
      console.log(await res.text());
    });

    // 2. 实现监听控制台消息的逻辑
    const originalLog = console.log;
    console.log = function(...args) {
      // 保留原有控制台输出能力
      originalLog.apply(console, args);
      // 发送控制台消息到Node服务
      fetch(`http://localhost:3000/on-console-message?content=${encodeURIComponent(args.join(' '))}`);
    };

    // 测试：手动输出控制台消息也会触发Node逻辑
    console.log('测试控制台消息');
  </script>
</body>
</html>

运行方法 #

• 将服务端代码保存为server.js，执行node server.js启动服务
• 将前端代码保存为本地HTML文件，用浏览器打开即可测试功能

内容的提问来源于stack exchange，提问作者a-coder