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

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

 

Introduction

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

Following software/hardware will be used for this tutorial:
Operating System: Windows 7 or Windows 10

Hardware

A device which is transmitting data via. RS232 serial port interface. Connect your hardware transmitting RS232 Serial data to computer. To verify, use HyperTerminal Private Edition trial version for Windows program to verify data is being received on 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 which 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 installation of node.js.
Open 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-server.

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 serial port library.

c:\node:>npm install serialport

Serialport allows you to access computer’s serial port with read 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 
 
//initialize 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 XAMPP server on computer so that PHP scripts can be executed. Start Apache and MySql server processes. In order to verify that 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 browser like:

http://localhost/testphp.php
The list of modules and variables of 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 browser as "http:\\localhost\data_window.php"

The data coming from RS232 serial port will be visible in the browser in real-time.

10 comments:

  1. Hi,

    I tried above setup and while running the server I'm getting below error,

    I:\Ramesh\Official\node>node server.js "8080"
    events.js:160
    throw er; // Unhandled 'error' event
    ^

    Error: Opening 8080: File not found
    at Error (native)

    Could you please let me know on the resolution.

    ReplyDelete
  2. Hi,

    Please check if port 8080 is already occupied or bound by any other application or task.

    If all does not work, try to configure your server on different port like 8081.

    Please feel free to contact me, if you have any queries.

    Regards

    ReplyDelete
  3. hi
    There is warn during installation on library and Error during serialport,
    can i show reading output on JSP page?
    Please Help

    ReplyDelete
  4. Dear Keval,

    Thank you for contacting.

    There may be issue with Python installation and C++ compiler. Please check following thread on stack overflow to get the solution:

    http://stackoverflow.com/questions/33579451/error-installing-serialport-on-node-js

    Yes, you can show output in JSP page.
    Just try to embed the URL http://localhost:8080 using iframe into your JSP page.


    Regards





    ReplyDelete

  5. very useful information and please keep updating us, .....
    http://www.nareshit.com/

    ReplyDelete
  6. Hi Vamshi,

    Thank you for appreciating the post.

    Regards
    The out of box salesman

    ReplyDelete
  7. This is excellent information. It is amazing and wonderful to visit your site.Thanks for sharing this information,this is useful to me...
    Mobile Marketing Service
    Mobile Marketing Companies

    ReplyDelete
  8. Dear Jessica,

    You are welcome. Thanks for appreciating my post.

    Regards
    The out of box salesman

    ReplyDelete