npm串行端口获取react组件的输出

Question

我正在开发一个称重应用程序，它读取串行端口数据并显示在客户端上。我得到了读取串行端口的NodeJS脚本

我的serial.js，这将我的称重机的重量作为流

const SerialPort = require("serialport");
const ReadLine = SerialPort.parsers.Readline;
//Defining the Serial port
var port  = new SerialPort("COM1", {
baudRate:9600,
});
//the serial port parser
const parser = new ReadLine();
port.pipe(parser);
//read data from serial port
parser.on("data", (line) => console.log(line));

如何将此脚本的输出提供给下面的react组件？

<Input
id="weight"
element="textarea"
type="textarea"
label="Weight"
onInput={inputHandler}
/>

我需要采取哪些步骤才能使其在线运行？我听说过websocket。请把我带向正确的方向。

Answer 1

**这是一个简单的代码，需要完成它**

服务器端(Nodejs(:

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;
}

const SerialPort = require('serialport');
const Readline = SerialPort.parsers.Readline; 
const usbport = new SerialPort('COM4');  
const parser = usbport.pipe(new Readline()); 
parser.on('data', function (data) {
io.emit('serialdata', { data: data });
});

客户端(React(：

import React from "react";
import io from 'socket.io-client';
class App extends React.Component {
constructor(props) {
super(props);
this.socket = null;
}
componentDidMount() {
this.socket = io('http://localhost:8888');
//this.socket.open();
this.socket.on('serialdata', (data) => {
// we get settings data and can do something with it
this.setState({
settings: data,
})
});
}
componentWillUnmount() {
this.socket.close();
}
render() {
...
}
}