Raspbian下JS服务器实现浏览器按钮交互的问题排查

问题梳理 #

• 背景：嵌入式纯C开发背景，首次在Raspbian系统用Node.js搭建HTTP服务器，需实现浏览器与MCU通信，服务器要返回HTML页面并响应按钮点击事件。
• 故障：本地直接打开HTML文件能正常调用myfunction()，但通过服务器访问时，点击按钮提示函数不存在；后端代码里的myfunction()可正常运行，但不知道如何让浏览器弹出反馈窗口。

核心问题 #

1. 静态资源未被服务器托管：HTML中引用的/home/pi/htmlFile.js是本地绝对路径，浏览器通过服务器访问时，会向服务器请求该路径，但当前服务器仅返回HTML文件，未处理JS文件的请求，导致前端加载不到JS代码，自然找不到myfunction()。
2. 前后端环境混淆：后端Node.js中的myfunction()运行在服务器端，和浏览器前端的JS属于完全独立的运行环境，后端函数无法直接触发浏览器弹窗，必须由前端JS执行弹窗逻辑。

分步解决方案 #

1. 整理文件结构 #

将所有相关文件放在同一目录下（比如/home/pi/web/），避免路径混乱：

/home/pi/web/
├── server.js   # Node.js服务器文件
├── buttonHtml.html  # 前端页面文件
└── htmlFile.js      # 前端JS函数文件

2. 修改HTML的JS引用路径 #

把HTML中的本地绝对路径改为相对路径，让浏览器通过服务器请求JS文件：

<!DOCTYPE html>
<head>  
</head>  
<body>  
    <p>Click the following button to see the function in action</p>  
    <script type="text/javascript" src="/htmlFile.js"></script>
    <input type="button" value="Display" onclick="myfunction()"> 
</body> 
</html>

3. 升级服务器代码，处理静态资源和按钮请求 #

修改服务器代码，使其能根据请求路径返回对应文件，同时处理按钮点击请求并给前端返回反馈：

const http = require("http");
const fs = require('fs').promises;
const path = require('path');

const host = '192.168.1.115';
const port = 8000;

// 通用文件读取与返回函数
async function sendFile(res, filePath, contentType) {
    try {
        const content = await fs.readFile(filePath);
        res.setHeader('Content-Type', contentType);
        res.writeHead(200);
        res.end(content);
    } catch (err) {
        res.writeHead(404);
        res.end(`找不到文件: ${err.message}`);
    }
}

const requestListener = async (req, res) => {
    // 根路径返回HTML页面
    if (req.url === '/') {
        await sendFile(res, path.join(__dirname, 'buttonHtml.html'), 'text/html');
    }
    // 请求前端JS文件时返回对应内容
    else if (req.url === '/htmlFile.js') {
        await sendFile(res, path.join(__dirname, 'htmlFile.js'), 'text/javascript');
    }
    // 处理按钮点击的POST请求
    else if (req.url === '/trigger-button' && req.method === 'POST') {
        console.log('按钮被触发（后端日志）');
        // 此处可添加与MCU通信的代码
        // 返回JSON数据给前端，用于弹窗反馈
        res.setHeader('Content-Type', 'application/json');
        res.writeHead(200);
        res.end(JSON.stringify({ msg: '按钮已触发，正在与MCU通信...' }));
    }
    // 其他未知路径返回404
    else {
        res.writeHead(404);
        res.end('页面不存在');
    }
};

const server = http.createServer(requestListener);

server.listen(port, host, () => {
    console.log(`服务器运行在 http://${host}:${port}`);
});

4. 编写前端JS函数 #

在htmlFile.js中实现前端的myfunction()，发送请求到服务器并接收反馈弹窗：

function myfunction() {
    // 向服务器发送POST请求
    fetch('/trigger-button', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(data => {
        // 浏览器弹窗显示服务器返回的消息
        alert(data.msg);
    })
    .catch(err => {
        alert('请求失败：' + err.message);
    });
}

5. 测试运行 #

1. 进入文件目录：cd /home/pi/web/
2. 启动服务器：node server.js
3. 在浏览器访问http://192.168.1.115:8000，点击按钮后，浏览器会弹出反馈窗口，同时后端控制台会打印按钮触发日志。

内容的提问来源于stack exchange，提问作者iddqd