Discussion :

[Mathrogue]

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

[champsy_dev]

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