当文件更改错误“ SyntaxError:JSON输入意外结束”时,React Socket

时间:2018-08-17 04:50:13

标签: json reactjs socket.io

我在更改json文件时通过套接字传递数据。到目前为止,我有一个间隔运行的脚本来创建JSON文件。我有一个快递服务器来监视文件的更改,如果是,则发出数据。我接收到数据并将其设置为状态。当文件更改时,我得到了错误并且不知道为什么。

服务器代码

io.on('connection', socket => {
    console.log("User connected " + socket.id);
    fs.readFile(filePath, 'utf8', (err, res) => {
        // console.log('on connection ' + JSON.stringify(res));
        io.emit('send data', res);
    });
    socket.on('disconnect', () => {
        console.log("user disconnected " + socket.id);
    });
});

fs.watch(filePath, (eventName, filename) => {
    if (filename) {
        console.log('Data updated');
        io.emit('send data', fs.readFileSync(filePath, 'utf8'));
    }
});

反应代码:

// import packages
import React, { Component } from "react";
import io from 'socket.io-client';

// import Homepage from './components/homepage/Homepage.js'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: null
        };
        this.socket = io('http://localhost:5000');

        // Binders
        this.updateState = this.updateState.bind(this);
    }

    componentDidMount() {
        this.socket.on('send data', this.updateState);
    }

    updateState(result) {
        this.setState({
            data: JSON.parse(result)
        });
    }

    render() {
        return (
            <p style={{ textAlign: "center" }}>
                {!this.state.data ? "" : JSON.stringify(this.state.data.name)}
            </p>
        );
    }
}

export default App;

1 个答案:

答案 0 :(得分:0)

fs.readFile读取JSON文件的速度过快,因此我添加了5秒的延迟时间

var end = Date.now() + 5000;
while (Date.now() < end);