Un graphique mis à jour avec les server-sent events

// server.js

const http = require("http")
const PORT = 5000

http
  .createServer((req, res) => {
    /* Il est nécessaire d'indiquer au navigateur qu'il va
    recevoir des données de type "text/event-stream" */
    res.writeHead(200, {
      "Content-Type": "text/event-stream",
      "Access-Control-Allow-Origin": "*",
    })

    setInterval(() => {
      const data = {
        value: Math.round(Math.random() * 100),
      }

      /* Les données envoyées doivent suivre un format précis.
      Une chaine de caractères étant "data: mydata", suivi d'un "\n\n".
      Si vous voulez transmettre du JSON il faudra le transformer en
      chaine de caractère comme ci-dessous. */
      res.write(`data: ${JSON.stringify(data)}`)
      res.write("\n\n")
    }, 1000)
  })
  .listen(PORT, () => console.log(`http://localhost:${PORT}`))

// client.js

import c3 from "c3"

/* L'objet EventSource nous permet d'écouter les événements
envoyés depuis le serveur. On l'instancie en lui passant l'URL
d'où proviendront les événements */
const evtSource = new EventSource("http://localhost:5000")

// Initialisation du graphique
const data = [30, 20, 10, 40, 15, 25]
const chart = c3.generate({
  bindto: "#chart",
  data: {
    type: "area",
    columns: [["Random", ...data]],
  },
  bar: {},
  axis: {
    y: {
      max: 200,
      min: 0,
    },
  },
})

/* On effectue un traitement uniquementlorsque
le serveur décide d'envoyer un message */
evtSource.onmessage = function(e) {
  /* Le code ci-dessous est lié à C3.js, mais concrètement,
  on souhaite afficher maximum 10 valeurs sur ce graphique */
  if (data.length === 10) data.shift()

  data.push(JSON.parse(e.data).value)

  chart.load({
    columns: [["Random", ...data]],
  })
}

/* En plus des messages, il est possible d'écouter lorsque
la communication commence et lorsqu'il y a une erreur */
evtSource.onopen = function() {
  console.log("Ah bogaaaas")
}

evtSource.onerror = function() {
  // Je suis certain que vous aussi vous débugguez comme ça
  console.error("Et merde !")
}