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 BDD), 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 envoit les données en temps réel, il m'affiche aussi les données dans le tableau, ce que je ne veux pas, du coup il remplace mes données qui sont dans le tableau.

Du coup ce que je souhaite savoir c'est comment je dois procéder pour que mes données reçues en temps réel ne s'affichent que sur le graphique et celles de la base de données que dans le tableau ? Dois-je utiliser un système de room avec les namespace ? J'ai vu mais j'ai pas trop compris comment cela fonctionne.

Le code:

Côté serveur : partie BDD

socket.on('connection', function(client){
    console.log('Le client s\'est connecté au serveur');
    socketnavigateur = client; //socketnavigateur est une variable global pour l'envoi des données temps réel.
 
    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é !');
    });
});

Côté serveur: 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);
};

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:

<!--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: J'ai volontairement pas mis la partie traçant le graphique sur le client car je sais que mon problème ne vient pas de là. Je ne vois pas trop comment procéder, je sais que c'est au niveau de mes évènements mais je n'arrive pas à trouver de solution.
Merci pour l'aide que vous m'apporterez. Si vous souhaitez des éclaircissements, n'hésitez pas

-
Edité par mathiasdupont 26 mai 2017 à 14:33:41

Après mûre réflexion, je pense avoir situé le problème mais je n'ai toujours pas la solution. Je pense que mon problème se situe côté serveur au niveau de l'évènement 'connection' du socket. On m'a parlé d'ajouter une info lors de la connexion mais je ne vois pas où je dois l'ajouter exactement.

socket.on('connection', function(client){
    console.log('Le client s\'est connecté au serveur');
    socketnavigateur = client; //socketnavigateur est une variable global pour l'envoi des données temps réel.
  
    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é !');
    });
});

-
Edité par mathiasdupont 26 mai 2017 à 16:32:09