Updating serial port data on webpage with Node JS

Question

I am reading data from the serial port using Node JS (which I am quite new to at the moment). Although I can see the data through an stdout stream via console.log and get a static value on the webpage I cannot get the value to update on a continuous basis. My current code looks like this:

var http = require('http');
const SerialPort = require('serialport');
const Readline = require('@serialport/parser-readline');

const port = new SerialPort('/dev/ttyACM0', { baudRate: 9600 });
const parser = port.pipe(new Readline({ delimiter: '\r\n' }));


http.createServer(function (request, response) {
    parser.on('data', (data) => {
        console.log(data);
        response.writeHead(200, {"Content-Type":"text/html"});
        response.write(data);
    });
}).listen(8888);

Is there a way I can get the serial data to update in realtime on the webpage as opposed to having to refresh the page?

Node JS version: v12.18.2

I went ahead and wrote a proof of concept for this to help you understand how websockets work. Please see the update on my answer. — Matt Oestreich, Aug 09 '20 at 00:58
@MattOestreich I think it was there but has disappeared or taken off from view. — rjani1, Aug 11 '20 at 21:39

score 1 · Accepted Answer · answered Aug 08 '20 at 23:12

Depending on how often you want the page to update on the webpage, you could serve the most recent reading via an express api, or using something like socket io. Using express is a simpler but less real time. Socket io will be able to update in real time. https://socket.io/

Updating serial port data on webpage with Node JS

1 Answers1