htmlnode.jsexpresssocket.ionode-serialport

Send data from SerialPort to socket.io

I'm struggling with socket.io, express, and node.js.

I send data from an Arduino to my cmd. This is done with the serialport libary. But now I want this data displayed on my web browser. I'm using the express library for this. I have index.js here is the connection with the arduino and browser. And an index.html

This code do I have:

code from index.js (node.js server):

var express = require('express'),
    app = express(),
    server = require('http').Server(app),
    io = require('socket.io')(server),
    port = 8888;

//Server start
server.listen(port, () => console.log('on port' + port))

//user server
app.use(express.static(__dirname + '/public'));

io.on('connection', onConnection);

var connectedSocket = null;
function onConnection(socket){
    connectedSocket = socket;
}

//Arduino to CMD
const SerialPort = require('serialport');
const Readline = SerialPort.parsers.Readline; 
const usbport = new SerialPort('COM4');  
const parser = usbport.pipe(new Readline()); 
parser.on('data', console.log);

The data what is recieved from the serialport (Arduino), had to be displayed in the index.html (webbrowser). I tried already something but it doesn't work. It has to be printed in the <p></p> in the html code.

The index.html code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script src="/socket.io/socket.io.js"></script>
</head>

<body>
  <div id="text">
    <p></p>
  </div>

  <script>
    var text = document.getElementById('text');

    var socket = io.connect('http://localhost:8888');

    socket.on('data', function(message) {
      text.innerHTML = message.data;
    });
  </script>

</body>

</html>

Solution

  • Instead of 

    parser.on('data', console.log);

    Try this:

    parser.on('data', function (data) {
    io.emit('data', { data: data });
});

    That should send the parsed data from the SerialPort to the socket, which should end up on the client side on the website.