Envoi de différentes données sur le client

Mathias Dupont
Javascript NodeJS

Bonjour,

Je réalise une application web avec NodeJs qui me permet de récupérer une consommation électrique en temps réel, jusqu'ici pas de problème. Je dois aussi récupérer depuis une base de données les dépassements de puissance du compteur, pas de problème non plus.
Mon problème est le suivant :
Je n'arrive pas à différencier les deux (temps réel et dépassement), en fait lorsque je me connecte, il m'affiche les données de la BDD dans un tableau mais lorsque je lance le programme qui envoi les données en temps réel, il m'affiche aussi les données dans le tableau, ce que je ne veux pas.

La partie temps réel :

//Java --> NodeJS communication
var javaPort = 8001;
var javaServer = require('net').createServer();
var WebSocketServer = require('ws').Server, wss = new WebSocketServer({port:90});

javaServer.listen(javaPort);

javaServer.on('listening', function(){
    console.log('Le serveur est en ecoute sur ' + javaPort);
});

javaServer.on('close', function(){
    console.log('Serveur fermé');
});

//
javaServer.on('connection', function (javaSocket){
    var clientAddress = javaSocket.address().address + javaSocket.address().port;
    console.log('Java ' + clientAddress + ' connected');

//envoi des données récupérées
    var DataListenner = function(data){
        console.log('Données reçues : ' + data);
        //conversion des données
    var convertdata = String.fromCharCode.apply(null, new Uint8Array(data));
    socketnavigateur.send(convertdata);
};

La requête et l'envoi des données de la BDD:

socket.on('connection', function(client){
    console.log('Le client s\'est connecté au serveur');
    socketnavigateur = client;

    var selectQuery = "SELECT * FROM Depassement";
        conn.query(selectQuery, function select(error, rows, fields){
            if(error){
                console.log(error);
                conn.end();
                return;
            }

            if(rows.length > 0){
                var Result = rows[0];
                client.send('id: '  + Result['Id_depassement']);
                client.send('Date : ' +  Result['Date_Dep']);
                client.send('Heure : '+ Result['Heure_Dep']);
                client.send('Puissance: ' + Result['P_reactive']);
            } else{
                console.log(error);
            }
        });

    //Listener de message
    client.on('message', function(event){
        console.log('Réception du message du client =',event);
    });

    client.on('disconnect',function(){
        console.log('Le client s\'est déconnecté !');
    });
});

Le côté client:

<script>
        // Création d'une instance de SocketIO
        var socket = io.connect();

        // Ajout d'un listener de connexion
        socket.on('connect',function() {
            log('<span style="color:green;">Le serveur s\'est connecte au client !</span>');

        });
        // Ajout d'un listener de messages
        socket.on('message',function(data) {
            log(data);
            console.log(data);
            drawGraph(data);
        });

        socket.on('message1',function(bdd){
            dat(bdd);
        });

        // Ajout d'un listener de déconnexion
        socket.on('disconnect',function() {
            log('<span style="color:red;">Le client s\'est déconnecte !</span>');
        });

        // fonction d'envoi de messages via sockets
        function sendMessageToServer(message) {
            socket.send(message);
            log('<span style="color:#888">Envoi du message "' + message + '" au serveur!</span>');
        }

        // fonction d'affichage sur le client
        function log(message) {
            var li = document.createElement('li');
            li.innerHTML = message;
            document.getElementById('message-list').appendChild(li);
            document.getElementById('id').innerHTML = message;
        }
</script>

<!--HTML-->
<body>

    <!--MENU-->
    <header>
        <nav class="nav">
            <ul>
                <li class="tpsreel">
                    <a href="/">Consommation temps réel</a>
                </li>
                <li class="depassement">
                    <a href="depassement.html">Historique de dépassement</a>
                </li>
            </ul>
        </nav>
    </header>

<div>
    <ul id="message-list"></ul>
    <ul style="margin:20px 0 0 20px;">
    </ul>
</div>
    <canvas id="cvs" width="1000" height="250">[No canvas support]</canvas>

<table>
    <caption>Historique des dépassements</caption>
    <tr>
        <td>ID</td>
        <td id="id"></td>
    </tr>

    <tr>
        <td>Date</td>
        <td></td>
    </tr>

    <tr>
        <td>Heure</td>
        <td></td>
    </tr>

    <tr>
        <td>Puissance</td>
        <td></td>
    </tr>
</table>

</body>

PS: Je n'ai pas mis la partie qui permet de tracer le graphique avec la bibliothèque RGraph car je ne pense pas que le problème vienne de là.

Du coup ce que je souhaite savoir c'est comment je dois procéder pour que mes données réçues en temps réel ne s'affichent que sur le graphique et celle de la base de données que dans le tableau ?

Merci pour l'aide que vous m'apporterez. Si vous souhaitez des éclaircissements, n'hésitez pas ;)

Aucune réponse