1. #1
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mai 2016
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Manche (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mai 2016
    Messages : 2
    Points : 3
    Points
    3

    Par défaut Envoi de différentes données sur le client

    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.

    Je vous link mon code:
    La partie du serveur concernant l
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    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é !');
        });
    });
    Côté serveur: partie temps réel
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    //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);
    };
    Le côté client:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    <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: 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

  2. #2
    Membre averti
    Homme Profil pro
    Directeur de projet
    Inscrit en
    novembre 2014
    Messages
    195
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Directeur de projet
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : novembre 2014
    Messages : 195
    Points : 324
    Points
    324

    Par défaut

    Plutôt que d'envoyer plein de petit messages :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    client.send('id: '  + Result['Id_depassement']);
    client.send('Date : ' +  Result['Date_Dep']);
    client.send('Heure : '+ Result['Heure_Dep']);
    client.send('Puissance: ' + Result['P_reactive']);
    Je crérais un Objet JSON que je sérialiserais pour l'envoyer avec dedans le Type de message , comme cela de l'autre coté tu peut switcher (j'ai trop l'habitude du TypeScript pour te l’écrire en JavaScript mais le concept est la) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    let json : any = {};
    json.id = Result['Id_depassement'];
    json.date = Result['Date_Dep'];
    json.heure= Result['Heure_Dep'];
    json.puissance = Result['P_reactive'];
    json.messageType= 'PuissanceDepassement';
    let  message :string = JSON.stringify(json);
    client.send(message);
    Bon courage

Discussions similaires

  1. envoie de plusieurs données sur une seule entrée
    Par boubouboy dans le forum LabVIEW
    Réponses: 2
    Dernier message: 09/05/2011, 14h06
  2. Réponses: 3
    Dernier message: 02/04/2010, 19h15
  3. Envoie de données sur 2 pages différentes
    Par Madoka dans le forum PHP & MySQL
    Réponses: 2
    Dernier message: 27/05/2008, 11h47
  4. Mise à jour de données sur postes clients
    Par codial dans le forum Bases de données
    Réponses: 2
    Dernier message: 25/02/2008, 14h24
  5. exporter Base de donnée sur pc client
    Par flatron dans le forum MS SQL-Server
    Réponses: 3
    Dernier message: 13/09/2006, 23h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo