Reading data from serial port with node.js and display it in web-page in real-time

In this tutorial, we will understand the methodology of connecting a serial device to a browser for data display in HTML format. The browser will read the serial devices and display the output of the serial devices in real-time on a web-page.

Following software/hardware will be used for this tutorial:

Operating System: Windows 7 or Windows 10

Hardware

A device that is transmitting data via. RS232 serial port interface. Connect your hardware transmitting RS232 Serial data to the computer. To verify, use the HyperTerminal Private Edition Trial Version for the Windows program to verify data is being received on the COM port. Note down following details:

  • COM port number i.e. COM1 or COM2 or …
  • Baud Rate
  • Data bit
  • Parity
  • Stop bit
  • Flow control

Following are the steps for software construction:

Step 1:

Install node.js on your computer. It is a server-side scripting engine that can be used to create your own web-server. Download node.js from here (https://nodejs.org/en/) and install it on your computer.

Let us assume you have installed node.js on your computer in path c:\node.

Step 2:

Verify the installation of node.js.
Open a command-line terminal and go to path c:\node.

c:\node>node -v

It will display the version of Node.js

c:\node>npm -v

It will display the version of npm (Node Package Manager)
If version numbers are displayed, it indicates that Node.js has been installed correctly.

Step 3:

Install “express”. It is a Node.js library for creating web-servers.
Change to c:\node.

c:\node>npm install express

Once it is installed, a new directory called “node_modules” inside c:\node will be created.

Step 4:

Install socket library “socket.io”

c:\node>npm install socket.io

Step 5:

Install the serial port library.

c:\node>npm install serialport

The serial port allows you to access the computer’s serial port with reading and write operations.

Step 6:

Let us create a server “server.js” like this:

var BaudRate = 9600;
var ServerPort = 8080;
var DocumentPath = "c:/node";
var fs = require("fs");
var readline = require('readline');
var rl = readline.createInterface({
 input : fs.createReadStream('server_config.txt'),
 output: process.stdout,
 terminal: false
})

rl.on('line',function(line){
 console.log(line) // parse line
})
var express = require('express'); 
 io = require('socket.io'), // include socket.io package
 app = express(), // make an instance of express.js module
 //server = app.listen(8080), // start a server on the port
 server = app.listen(ServerPort), // start a server on the port
 socketServer = io(server); // create a socket server using the express server 
 //initialise serial port initialization

var serialport = require('serialport'), // include the serialport package
 SerialPort = serialport.SerialPort,    // make a local instance of serial port package
 portName = process.argv[2], // retrieve the port name from the command line argument
 portConfig = {
 //baudRate: 9600,
 baudRate: BaudRate,
 // call myPort.on('data') when a newline is received:
 parser: serialport.parsers.readline('\n')
 };
// open the serial port
var myPort = new SerialPort(portName, portConfig);
//set up server and socketServer listener functions:
//app.use(express.static('d:/sp')); 
// serve files from the public folder
app.use(express.static(DocumentPath)); 
// serve files from the public folder
//app.use(express.static('c:/xampp/htdocs'));
app.get('/:name', serveFiles); 
// listener for all static file requests
socketServer.on('connection', openSocket);     
// listener for websocket data


function serveFiles(request, response) {
 var fileName = request.params.name; 
 // get the file name from the request
 response.sendFile(fileName);  // send the file
 //res.sendFile('d:/sp/'+fileName , { root : __dirname});
}

function openSocket(socket){
 console.log('new user address: ' + socket.handshake.address);
 // send something to the web client with the data:
 socket.emit('message', 'Server listening on address : ' + socket.handshake.address);
 // this function runs if there's input from the client:
 socket.on('message', function(data) {
 myPort.write(data); // send the data to the serial device
 });


 // this function runs if there's input from the serialport:
 myPort.on('data', function(data) {
 socket.emit('message', data); // send the data to the client
 });

Step 7:

Run the server “server.js”. Replace “COM2” with your port name.

c:\node>node server.js "COM2"

Step 8:
Let us create a client program “c:\node\client.js” which will listen to “server.js” like this:

var socket = io();   
//socket.io instance.
//It is used to connect to server.js on the port with socket lib

function readData (data) {
 console.log(data);
 $("#data_window").append(data);
}

//read data and call function when data arrival event happens 
socket.on('message', readData);

Step 9:
Let us create a file “c:\node\index.html” which will be served by “server.js”

<html>
<head>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.16/p5.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="client.js"></script>
<title></title>
</head>
<body>
<div id="data_window">
</div>
</body>
</html>

Step 10:

Install the XAMPP server on the computer so that PHP scripts can be executed. Start Apache and MySql server processes. In order to verify that a PHP script can be executed, create a “testphp.php” file in “c:\xampp\htdocs” folder like this:

<?php
//testphp.php
echo phpinfo();
?>

Execute it in a browser like:
http://localhost/testphp.php

The list of modules and variables of the PHP scripting engine will be displayed in the browser.

Step 11 :

Create a file “data_window.php” in “c:\xampp\htdocs” folder.

<!-- data_window.php -->
<html>
<head>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.16/p5.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Data Window</title>
</head>
<body>
<iframe src="http://localhost:8080" height="100" width="200"></iframe>
</body>
</html>

Open it in the browser as “http:\\localhost\data_window.php”. The data coming from the RS232 serial port will be visible in the browser in real-time.

Thanking You.