Menu

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.

No comments:

Post a Comment