使用带有 HTML 和 nodejs 的 WebSocket 读取 Arduino 数据

Question

我无法完全掌握这个谜题的最后一步。一切都可以编译，并且“没有错误”。这是我第一次涉足通信/全栈，尽管有很多优秀的教程，我还是被难住了。

• [WORKING] Arduino 读取和解释传感器数据

• [WORKING] index.js 通过 USB 串行通信获取数据

• [WORKING] index.js 使用 nodejs 创建一个 WebSocket 连接

• [WORKING] index.html 执行 WebSocket 握手

• [WORKING] index.html 使用 Plotly 创建实时折线图

• [WIP] index.html 在 Plotly 函数中传递 Arduino 数据

砍掉 index.html:

        <script src="server/plotly.min.js"></script>
        <script>

            //connection to the web socket server
            const ws = new WebSocket("ws://localhost:5000"); 
            let foo = 0.0;

            //working
            ws.addEventListener("open", () => {
                console.log("We Are Connected");
                ws.send("TestData");
            });

            //working
            ws.addEventListener("message", e => {
                console.log(e);
                console.log("Data Recieved! Success.");
            });
        </script>

文件的其余部分只是我想通过 Arduino 数据传递的图形函数。

index.js

const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 5000 });

//create a serial port that allows serial connection from Arduino
let SerialPort = require("serialport");
let port = new SerialPort('COM4', { baudRate: 9600 });

let Readline = require("@serialport/parser-readline");
let parser = port.pipe(new Readline({ delimiter: '\n' }));

wss.on("connection", ws => {
    //working
    console.log("New Client Connection");

    //this is what I need to passthrough my Plotly arg
    parser.on("data", data => {
        //event is firing but can't get client to grab this. Console logs data correctly.
        console.log(RPM: ${data});     
    });

    //working on both ends
    ws.on("message", data => {
        console.log("TEST")
        ws.send(data);
    });

    //doesn't log?
     port.on("open", () => {
         console.log("Serial Port Open");
     });

});

//working
console.log("The server is ON");

我正在寻找一种策略或方法来获取我的 HTML 文件中的传感器数据。我在概念上缺少一些简单的东西吗？谢谢。

Answer 1

你建立了一个 websocket 服务器，它是有效的。如果要向 websocket 发送消息，请定义一个到 websocket 服务器的套接字，从 websocket 服务器中取出 Serial 部分，然后独立运行，然后将数据从这里发送到 websocket。 像这样：

const http = require('http');
const WebSocketServer = require('websocket').server;
const server = http.createServer();
server.listen(5000);
const wsServer = new WebSocketServer({
    httpServer: server
});

let SerialPort = require("serialport");
var serialPort = new SerialPort("COM5", {
    baudRate: 9600,
    parser: new SerialPort.parsers.Readline("\n")
});

var connection;

wsServer.on('request', function(request) {
    connection = request.accept(null, request.origin);
    connection.on('message', function(message) {
      console.log('Received Message:', message.utf8Data);
      connection.sendUTF('Hi this is WebSocket server!');
    });
    connection.on('close', function(reasonCode, description) {
        console.log('Client has disconnected.');
    });
    
});

serialPort.on('open',function(){
        //connection.sendUTF('Hi this is WebSocket server!');
        console.log('open');
        serialPort.on('data', function(data){
                readData = data.toString();
                console.log("N<", readData);
                if( typeof connection!="undefined")
                connection.sendUTF( readData); 

        });
});