es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Lectura de datos de Arduino con WebSocket utilizando HTML y nodejs

No puedo comprender completamente el último paso de este rompecabezas. Todo se compila y está “libre de errores”. Esta es mi primera incursión en comunicaciones/full-stack y he estado perplejo a pesar de numerosos excelentes tutoriales.

  • [WORKING] Arduino lee e interpreta datos del sensor.
  • [WORKING] index.js adquiere datos con comunicación en serie a través de USB.
  • [WORKING] index.js crea una conexión WebSocket usando nodejs.
  • [WORKING] index.html realiza el handshake WebSocket.
  • [WORKING] index.html utiliza Plotly para crear un gráfico de línea en tiempo real.
  • [WIP] index.html pasa datos de Arduino a través de la función Plotly.

Versión reducida de index.html:

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

    // Conexión al servidor de websocket
    const ws = new WebSocket("ws://localhost:5000"); 
    let foo = 0.0;

    // Trabajando
    ws.addEventListener("open", () => {
        console.log("Estamos conectados");
        ws.send("TestData");
    });

    // Trabajando
    ws.addEventListener("message", e => {
        console.log(e);
        console.log("Data Recibida! Éxito.");
    });

</script>

Resto del archivo es sólo la función de gráficos que me gustaría pasar a través de datos de Arduino.

index.js

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

// Crea un puerto serial que permite la conexión en serie desde 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 => {
// trabajando
console.log(“Nueva conexión de cliente”);

// Esto es lo que necesito pasar a través de mi arg Plotly
parser.on("data", data => {
    // El evento se dispara, pero no puedo conseguir que el cliente lo agarre. Los registros de la consola de datos correctamente.
    console.log(RPM: ${data});
});

// trabajando en ambos extremos
ws.on("message", data => {
    console.log("TEST")
    ws.send(data);
});

// Registro de consola
port.on("open", () => {
    console.log("Puerto Serial Abierto");
});

});

// trabajando
console.log(“El servidor está ENCENDIDO”);
“`

Estoy buscando una estrategia o método para agarrar los datos del sensor en mi archivo HTML. ¿Hay algo simple conceptualmente que me falte? Gracias.

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Parece que has conectado correctamente tu Arduino, index.js e index.html para crear un gráfico de líneas en tiempo real. Sin embargo, estás teniendo dificultades para pasar los datos de Arduino a la función Plotly en el archivo index.html. Aquí tienes algunas sugerencias para ayudarte a superar este problema:

    En primer lugar, debes asegurarte de que los datos de Arduino se estén recibiendo correctamente en el archivo index.js. Puedes confirmarlo revisando los registros de la consola para el mensaje “RPM: ${data}”. Si puedes ver que los datos correctos se están registrando, puedes pasar al siguiente paso.

    Para pasar estos datos a tu archivo index.html, debes usar la función ws.send() del objeto WebSocket. En la función parser.on("data"...) de index.js, agrega la siguiente línea:

    ws.send(data);

    Esto enviará los datos recibidos del Arduino al WebSocket, lo que permitirá que el archivo index.html los reciba.

    En tu archivo index.html, debes modificar la función Plotly para recibir los datos del WebSocket. Puedes hacer esto agregando el siguiente código dentro de la función ws.addEventListener("message",...):

    foo = e.data;
    Plotly.extendTraces('graph', { y: [[foo]] }, [0]);

    Este código actualizará la variable foo con los datos recibidos del WebSocket y luego los pasará a la función Plotly para actualizar el gráfico de líneas.

    Finalmente, asegúrate de que tu WebSocket esté configurado correctamente para conectar tus archivos index.js e index.html. Es posible que necesites modificar la URL del WebSocket para que coincida con la dirección IP y el puerto de tu servidor.

    Con suerte, estos pasos te ayudarán a resolver el problema y a pasar los datos de Arduino a tu gráfico de Plotly. ¡Buena suerte!

Comments are closed.