Блог

Я относительно новичок в сокетах, я работаю над проектом react, в котором пользователь должен иметь возможность просматривать журналы во время развертывания, как в журналах сборки Дженкинса. Я не могу поделиться точным кодом, но код более или менее похож на приведенный ниже код.

 import socketIOClient from 'socket.io-client';

class ShowLog extends Component{
    constructor(props) {
        super(props);
        this.state = {
            stateLogs: []
        };
        this.socketLogs = [];
    }
    
    // Ignoring the componentDidMount and other unnecessary stuff
    

    // this function will establish the socketio connection
    streamLog = (socketId, url) => {
        this.clientSocket = socketIOClient(url);
        this.clientSocket.on('connect', () => {
            this.clientSocket.emit('join', socketId);
        });
        
        this.clientSocket.on('data', this.handleLogs);
        // error handling here
    }
    
    handleLogs = (data) {
        if(data.length){ // I will be getting messages as an array of strings
            this.socketLogs.push(...data);
            this.setLogs(this.socketLogs); // calling another method to update state
        }
    }
    
    // used throttle with 100ms to create jenkins like log instead of pushing them all at once.
    setLogs = throttle((data) => { 
        this.setState({ stateLogs: data });
    }, 100);
    
    render() {
        const { stateLogs } = this.state;
        return (
            <>
            // other logic here.
            {
                stateLogs.map(message => <li key={message}>{message}</li>)
            }
            </>
        )
    }
}

 

В моем случае я буду получать не менее 10 сообщений каждую секунду. Также я использую дроссель, чтобы уменьшить количество рендеров для плавного потока журналов.

Проблема здесь в том, что, когда серверная часть загружает журналы, журналы обновляются через 2-5 секунд с переднего конца.

Может ли кто-нибудь, пожалуйста, дать свои предложения по улучшению кода, чтобы уменьшить задержку, о которой я упоминал выше.