Vue.js Gráfico en tiempo real con Websocket o Socket.io

Uso vue.js para mi proyecto. También uso websocket para mis datos. Cada segundo viene datos. Necesito usar el gráfico en tiempo real de mi proyecto. Pero no encuentro ninguna carta para resolver mi problema. Por ejemplo, uso apexchart pero no tiene datos de actualización en mi gráfico cuando vienen nuevos datos.

mis datos de websocket como:

{
   "topic": "2",
   "message": "data"
}

mis datos de bases de datos como este:

  {
    "id": "1",
    "deviceName": "refrigerator",
    "deviceType": "lineChart",
    "topic": "1",
    "message": "",
  },
  {
    "id": "8",
    "deviceName": "refrigerator",
    "deviceType": "lineChart",
    "topic": "1",
    "message": "",
  },

Tengo mis datos de la base de datos en este código. Y comprobé mi tema, es igual o no. si es lo mismo, pongo el mensaje de websocket a los datos json para ver en la pantalla:

let bufferMessage = [];
   bufferMessage = jsonFromDatabase;
   socket.on("message", (topic, message) => {
       bufferMessage.forEach(element => {
       if (element.topic == topic) {
           element.message = message.toString();
       }
    });
 });

Mi código es:

pero la forma en que no hay ningún error en este código. Sólo quiero convertir este gráfico en mapa en tiempo real para mis datos de websocket.

Pregunta hecha hace 3 años, 4 meses, 26 días - Por bytebarde61c

3 Respuestas:

  • A menos que el OP muestre la parte en el código de actualización de los datos, sólo puedo ofrecer una referencia de la documentación oficial de apexcharts, sobre la actualización de los datos:

    import VueApexCharts from 'vue-apexcharts'

export default {
 name: 'Vue Chart',
 data: function () {
  return {
   chartOptions: {
    chart: {
      id: 'vuechart-example',
    },
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
    },
   },
   series: [{
    name: 'Vue Chart',
    data: [30, 40, 45, 50, 49, 60, 70, 81]
   }]
  }
 },
 methods: {
  updateChart() {
   const max = 90;
   const min = 20;
   const newData = this.series[0].data.map(() => {
     return Math.floor(Math.random() * (max - min + 1)) + min
   })
   // In the same way, update the series option
   this.series = [{
    data: newData
   }]
  }
 }
}

    Como se puede ver en el ejemplo anterior, simplemente cambiando las props, activamos el evento de actualización de ApexCharts. ()de los docs)

    Sandbox Ejemplo https://codesandbox.io/s/50z5wrmp6k

    Respondida el Dec 19, 2020 a las 14:20 - por csscraftsman

    Votos positivos: 0 | Votos negativos: 0

  • Para actualizar el gráfico en tiempo real con los datos provenientes del websocket, primero debes asegurarte de que estás actualizando correctamente los datos en el bufferMessage cuando se recibe un nuevo mensaje.

    En tu código, estás actualizando los datos en bufferMessage, pero necesitas utilizar reactive data para que Vue.js detecte los cambios y actualice el gráfico automáticamente.

    Aquí te dejo un ejemplo de cómo puedes actualizar el gráfico en tiempo real con los datos del websocket:

    html

    En este código, cada vez que se recibe un mensaje del websocket, se llama al método updateChart(data), que actualiza los datos del grafico (series) y las categorías en el eje X (chartOptions.xaxis.categories). Además, se limita la cantidad de puntos visualizados en el grafico a 10 para mantenerlo actualizado y legible.

    Espero que este código te sea de ayuda para implementar un gráfico en tiempo real con Vue.js y datos provenientes de un websocket.

    Respondida el Dec 20, 2020 a las 14:18 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para crear un gráfico en tiempo real con Vue.js y Websocket, puedes seguir estos pasos:

    • Crear un componente Vue para el gráfico:
    - Utiliza `apexchart` de VueApexCharts para crear un componente de gráfico reutilizable.
    • Enlaza el objeto `series` a `$store.state.bufferMessage[index].message` para obtener los datos en tiempo real.
    • Establecer una conexión WebSocket:
    - En el componente o en el almacén Vuex, establece una conexión WebSocket y escucha los mensajes.
    • Cuando recibas un mensaje, actualiza el objeto `series` con los nuevos datos.
    • Actualizar el gráfico:
    - Utiliza la función `updateSeries` de ApexCharts para actualizar el gráfico con los nuevos datos.
    • Llama a `updateSeries` cada vez que recibas nuevos datos del WebSocket.
    javascript
// Componente del gráfico
export default {
  components: {
    apexchart: VueApexCharts,
  },
  data() {
    return {
      series: [],
      options: {
        // ... Opciones de gráfico
      },
    };
  },
  mounted() {
    // Establecer conexión WebSocket y escuchar mensajes
    const socket = new WebSocket(...);
    socket.onmessage = (e) => {
      const data = JSON.parse(e.data);
      if (data.topic === "1") {
        // Actualizar la serie con los nuevos datos del WebSocket
        this.series = [{
          name: "Mensaje del WebSocket",
          data: [data.message]
        }];
        this.$refs.chart.updateSeries(this.series);
      }
    };
  }
};

    Nota:

    • Asegúrate de que los datos recibidos del WebSocket están en el formato requerido por ApexCharts.
    - Dependiendo de la frecuencia de los datos, puede ser necesario utilizar una técnica de actualización por lotes para evitar sobrecargar el gráfico.

    Respondida el Dec 20, 2020 a las 14:29 - por Gemini

    Votos positivos: 0 | Votos negativos: 0