Home / Questions / 1723
Accepted
Hewbot
Asked: 2020-12-24 11:05:22 +0800 CST 2020-12-24 11:05:22 +0800 CST

Show Node.js buffer in real time in a browser

  • 772

I am trying to make a program in Node.js that, after receiving a Unix-like via command POST, executes it and displays the output in real time in the browser.

This is the code I am using to run the commands:

 exec(myCommand, function(err, stdout, stderr){
     sys.print('stdout: ' + stdout);
     sys.print('stderr: ' + stderr);
         if(err !== null) {
             console.log('EXECUTION ERROR: ' , err);
         }
 }

However, the output of stdoutcomes in the form of Buffer, so it's not clear to me how I can make the browser display its content as it increases.

My idea is that if, for example, I execute the command apt-get update, it will show what it is doing in real time, and not all the output at once when it has finished.

It occurred to me that I could save the contents of the buffer to a string repeatedly, and then have the browser, via JavaScript, check for updates frequently, but that seems like a bit of a hack to me, not to mention that It's not as fast as I would like.

In conclusion, how can I do this as quickly and simply as possible?

javascript

2 Answers

  1. Best Answer

    In order for the output to be displayed as it is output and not all at once, you must use spawninstead of using exec. I think it fits more to what you want to achieve. If you want to understand the difference between the two functions you can visit this link .

    For it to be displayed in real time you should use socket.io, it is much more reliable than using GET requests at intervals to get what the command is printing and you can use it as a transport to start executing them.

    Here I put a demo that sends the commands from any client and the output is reflected in all the others that are connected. I send the command using the same socket but you can modify it and use POST if you want.

    Since you don't specify if other frameworks can be used, I used it using only node.js and socket.io.

    var http = require('http'),
fs = require('fs'),
url = require('url'),
child = require('child_process');

var fileStream = fs.readFileSync('cmd.html'),
    myCommand = 'cmd.exe',
    myArgs = ['/?'];

var server = http.createServer(function (req, res) {
    if (url.parse(req.url).pathname === '/') {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(fileStream);
    } else {
        res.writeHead(404, {'Content-Type': 'text/plain'});
        res.end('Not found');
    }
}).listen(3000);

function executeCommand(command, args) {
    var toExec = command || myCommand,
        theArgs = args ? args : (command ? [] : myArgs);

    var cmd = child.spawn(toExec, theArgs);
    cmd.stdout.on('data', function (data) {
        io.emit('output', data.toString());
    });

    cmd.stderr.on('data', function (data) {
         io.emit('output', data.toString());
    });

    cmd.on('error', function (err) {
        io.emit('output', err.message);
    });

    cmd.on('close', function (code) {
       io.emit('Process exited with code ' + code);
    });
 }

 var io = require('socket.io')(server);

 io.on('connection', function(socket) {
     socket.on('command', function(cmd) {
         var c = cmd.split(' ');
        executeCommand(c[0], c.slice(1));
    });
});

console.log('Server running at http://127.0.0.1:3000/');

    And this is the file cmd.htmlthat is sent to the client

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live command</title>
</head>
<body>
    <div id="dashboard"
 style="width: 100%; height: 300px; overflow: auto; background-color: black; color: white; border: gray solid 3px">
    </div>
    <div style="margin-top: 30px">
        <label  for="command">Command:</label>
        <input id="command" type="text">
        <button id="send" type="button">Execute</button>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        window.onload = function () {
            var socket = io('http://localhost:3000');
            var console = document.getElementById('dashboard');
            var button = document.getElementById('send');
            var command = document.getElementById('command');

            socket.on('output', function (data) {
                var newLine = document.createElement('p');
                newLine.innerHTML = data;
                console.appendChild(newLine);
            });

            button.addEventListener('click', function () {
                socket.emit('command', command.value);
            });
        };
    </script>
</body>
</html>
    • 4

  2. The method to use is spawninstead of exec, since the latter waits for the command to finish (and that's what you want to avoid).

    The stdout (from child_process) is a readable (read) stream and the response (from http) is a writable (write) stream, so what you're missing is a pipe, but in the console it's better known like |).

    The code would be something like:

    var http = require('http');
var spawn = require('child_process').spawn;

var server = http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  spawn('cat', ['streamout.js']).stdout.pipe(res);
});

server.listen(3000, function() {
  console.log('server running on http://localhost:3000');
});

    If you want to do some kind of processing in the middle, you will have to do it using these same streams: stdout.pipe(colorize).pipe(beautify).pipe(res).

    The two readings I can recommend are (both in English unfortunately): stream-handbook , Some Libraries I use to build web-apps both from Substack. In the second there are many libraries that can be used to modify the stream.

    • 2