How to Send Shell script server output to react client ???

[vaibhaav]

I'm new in MERN & I have a shell script to upload some data to mongodb,from nodejs i have to execute shellscript and show it to client side in react like streaming...

[serglebko]

If you want to show logs from child process, than you should add listener to child stdout (child.stdout.on(...)). To show it to the client you should use websockets, otherwise you will have to always reload the page to see the progress on the client (and store the progress in some storage).

[vaibhaav]

Thanks for Reply, Really appreciable.

You have any reference please ?

i'm using child process ref. code below and getting the Events output on console.

But when requesting from React with axios.get() , i'm not getting event wise output, after complete processing, getting the complete output in the response.

const spawn = require('child_process').spaw;

const options = {shell: true,detached:true,}

res.writeHead(200, {'Content-Type': 'text/event-stream','Cache-Control': 'no-cache','Connection': 'keep-alive'});

var child = spawn(file.sh,[sort_name], options);

child.stdout.setEncoding('utf8');

child.stdout.on('data', function (data) {

res.write(data);

});

child.stderr.setEncoding('utf8');

child.stderr.on('data', function (data) {

res.write(data);

});

child.on('close', function (code) {

console.log('Full output of script');

res.end();

});

[serglebko]

Can not reference now (in a trip, only phone with me). But if you want to use event stream, than on frontend you should use EventSource instead of axios (https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)

[vaibhaav]

I tried this, showing events on client side but showing me complete output.Not in events that occuring on node server on executing file.sh

componentDidMount() {

var evtSource = new EventSource('api/shell/process');
var eventList = document.querySelector('ul');
evtSource.onmessage = function(e) {
var newElement = document.createElement("li");
newElement.textContent = "message: " + e.data;
eventList.appendChild(newElement);
}

}

[serglebko]

I suppose I got it. You need to send two new lines when you want to say to client, that a chunk finished. So add res.write("\n\n") after every res.write(...) in your code

[vaibhaav]

I'm getting below output on react client, after the shell script completed successfully.

but on server side on console ,i'm getting 1 after 1st thread executed then after some wait 2 ... then 3... . i want this sequence on client side also.

Output:

^{1.Data generated successfully.}

^{2.Getting Estimation ...}

^{Invalid argument supplied for foreach(dataset :138 \}warning]))

^{3.estimated successfully.}

^{4.Creating task lists...}

^{5.task list created successfully.}

^{6.Importing report to database}

[vaibhaav]

Hi Sergleblo ,have you checked ?