Node.js实现服务器向客户端传递数组供前端JS访问的方法咨询

• 同时引入Express和原生http模块，但Express实例从未挂载到实际监听8080端口的服务上，写的app.post('/data')接口完全不生效，所有请求都会被你手写的静态文件处理逻辑拦截
• 取URL查询参数r、f时没有做空值和合法性校验，用户无参数访问首页时，这两个值为undefined，直接赋值到数组会造成数据污染
• 手写静态文件读取逻辑没有做路径安全校验，直接拼接请求路径读取文件，存在敏感文件读取风险
• 客户端取数用POST接口不符合使用场景，客户端拉取数据用GET接口更轻量化

1. 服务器端index.js改造 #

去掉重复的原生http服务逻辑，直接基于Express完成静态文件托管、数据更新、数据接口暴露，完整代码如下：

var express = require('express');
const app = express();
// 服务器端内存中存储的房间状态数组
let avails = [0, 0, 0];

// 托管当前目录下的所有静态文件（html/css/js），替代手写的fs读文件逻辑
app.use(express.static(__dirname));

// 监听带参数的请求，更新房间状态
app.use((req, res, next) => {
    const room = req.query.r;
    const status = req.query.f;
    // 做参数合法性校验，避免无效值污染数组
    if (room && status && !isNaN(parseInt(room)) && !isNaN(parseInt(status))) {
        // 仅处理0/1/2三个房间的更新，防止数组越界
        if (parseInt(room) >=0 && parseInt(room) < avails.length) {
            avails[parseInt(room)] = parseInt(status);
            console.log('更新后的avails：', avails);
        }
    }
    next();
})

// 给客户端提供取数据的GET接口，返回最新的avails数组
app.get('/avails', (req, res) => {
    res.json(avails);
})

// 服务监听8080端口
app.listen(8080, () => {
    console.log('服务启动在http://localhost:8080');
})

2. 客户端静态文件调整 #

• 服务器托管静态文件时会默认返回根路径下的index.html，你可以把原来写的web.html/website.html文件名和服务配置做匹配，避免404
• 页面引入的website.js需要实现拉取数据、更新页面状态的逻辑，完整代码如下：

// 拉取最新的房间状态数据
async function fetchAvails() {
    const res = await fetch('/avails');
    const data = await res.json();
    // 拿到数组后更新表格状态
    const statusCells = document.querySelectorAll('#status td');
    data.forEach((value, index) => {
        // 按业务规则映射状态值：比如0=可用，1=不可用
        statusCells[index].innerText = value === 0 ? 'Available' : 'Unavailable';
    })
}

// 页面加载完成后第一次拉取数据
window.onload = fetchAvails;
// 每2秒自动刷新一次状态，保持和服务器数据同步
setInterval(fetchAvails, 2000);

• 服务器到客户端的数据传输本质是：服务器把内存中存储的avails数组，通过JSON格式序列化后，通过HTTP响应返回给客户端，客户端解析JSON后就能拿到和服务器端完全一致的数组数据
• 状态更新逻辑兼容原有需求：只要访问http://localhost:8080/?r=0&f=1这样的链接，就会把对应下标的房间状态更新为传入值，后续客户端拉取数据时就能拿到最新的状态
• 所有接口都是同源的，不存在跨域问题，不需要额外配置

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