使用fs.appendFileSync记录CSV数据时网页频繁刷新的问题求助

看起来你遇到的问题根源在于同步IO操作阻塞了Node.js的事件循环，导致Socket.IO连接无法正常维持，进而引发页面异常刷新。让我一步步帮你分析和解决：

问题原因分析 #

你在Socket.IO的事件处理函数里使用了fs.appendFileSync，这是一个同步文件写入方法。Node.js是单线程的，同步IO会阻塞整个事件循环——在写入文件的这段时间里，服务器无法处理任何其他请求，包括Socket.IO的心跳检测、客户端的其他消息。客户端发现Socket.IO连接长时间没有响应，就会认为连接断开，可能触发页面的异常行为（比如刷新），这就是你看到的每次操作滑块或拖动标记都会刷新页面的原因。

另外还有一个小问题：你每次写入CSV时都会生成表头，这样文件里会重复出现value,Time的表头行，这不是你想要的结果。

解决方案 #

1. 替换同步写入为异步写入 #

把fs.appendFileSync换成异步的fs.appendFile，这样不会阻塞事件循环，服务器可以正常处理Socket.IO的连接和其他请求：

修改服务器中写入CSV的代码（以servoposition事件为例，另一个事件同理）：

socket.on('servoposition', function(data) {
    console.log(data.status);
    // 准备要写入的数据行
    const dataRow = [data.status, new Date().toString()];
    
    // 先检查文件是否存在，不存在则先写入表头
    fs.access('output.csv', fs.constants.F_OK, (err) => {
        let csvContent = '';
        if (err) {
            // 文件不存在，先写入表头
            csvContent = 'value,Time\n';
        }
        // 添加数据行
        csvContent += dataRow.join(',') + '\n';
        
        fs.appendFile('output.csv', csvContent, (err) => {
            if (err) {
                console.error('写入CSV失败:', err);
            } else {
                console.log('CSV File saved successfully');
            }
        });
    });
});

2. 避免重复写入表头 #

上面的代码通过fs.access检查文件是否存在，只在文件第一次创建时写入表头，之后只追加数据行，解决了表头重复的问题。

3. 处理静态文件请求（可选但重要） #

看你的HTML里引用了<script type="text/javascript" src="/haptics.js"></script>，但你的服务器代码里没有处理这个静态文件的请求——当浏览器请求/haptics.js时，服务器返回的是index.html，这会导致浏览器解析错误，可能引发页面异常。你可以：

• 去掉这个不存在的脚本引用，或者
• 使用express来处理静态文件（如果可以切换到express的话），示例代码如下：

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http, { cors: { origin: "*" } });

// 处理静态文件，假设html和js文件都在public文件夹下
app.use(express.static('public'));

// 后续Socket.IO逻辑保持不变...

http.listen(5501, "localhost");

4. 优化Socket.IO连接配置（可选） #

可以适当调整Socket.IO的心跳超时配置，避免客户端轻易认为连接断开：

const io = require('socket.io')(app, {
    cors: { origin: "*" },
    pingTimeout: 60000, // 延长心跳超时时间至60秒
    pingInterval: 25000 // 每25秒发送一次心跳
});

验证修改 #

替换代码后，重启服务器，再测试拖动标记或滑块，应该不会再出现页面刷新的问题，同时CSV文件会正确记录数据，表头也只会出现一次。

备注：内容来源于stack exchange，提问作者bilel ayech