Traitement de données JSON via websocket

Version imprimable

Bonjour à tous,

Je travaille actuellement sur interface en HTML5 qui affiche un diagramme.
En gros, une fois la connexion WebSocket établie, le client envoie une trame pour pour demander les coordonnées au serveur. Le serveur renvoie un fichier JSON par exemple celui la :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
   	"fpga_Speed": "2457", 
   	"fpga_Mode" : "DFE", 
   	"coordinates" : [
   		[0.1, 200,30000, 16384, 2],
   		[-0.1, -210,30000, 4096, 5],
   		[0.45, -240,30000, 512, 8],
   		[-0.32, 220,30, 2048, 12],
   		[-0.19, -100,30, 16384, 22],
   		[0.35, 50,40000, 4096, 25],
   		[0.25, -70.5,30, 16384, 29],
   		[-0.21, 120.7,30, 2048, 10],
   		[0.3, -200,30, 512, 7],
   		[0.1, 100.4,4, 128, 2]   		
   	],
   }

Le graphe est réalisé avec l’élément CANVAS.
voila la fonction principale du canvas :

Code:

1
2
3
4
5
6
7
8
9
10
11
window.onload = function() {			
 
 	var canvas = document.getElementById('canvas_graph');
 	var canvas2 = document.getElementById('canvas_graph2');
 	var ctx = canvas.getContext('2d');
 	var ctx2 = canvas2.getContext('2d');
	dessiner_Axe(ctx, fpga_Mode, fpga_Speed) ;
	dessiner_Mask(ctx, fpga_Speed, fpga_Mode);
 	dessiner_Point(ctx, fpga_Mode, coords);
 	info_graph(ctx2, fpga_Mode , fpga_Speed , coords);
     }

j'ai testé l'ensemble avec JSON en local ça fonctionne bien, maintenant je veux faire la même chose mais avec un JSON reçu via les websockets.

voila ma fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
  function onMessage(evt)
    {
      logToConsole('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
 
         var msg = JSON.parse(evt.data);
 
         fpga_Speed = msg.fpga_Speed;
 
        fpga_Mode = msg.fpga_Mode;
 
        coords = msg.coordinates;
 
      	dessiner_Axe(ctx, fpga_Mode, fpga_Speed) ;
      	dessiner_Mask(ctx, fpga_Speed, fpga_Mode);
       	dessiner_Point(ctx, fpga_Mode, coords);
 	info_graph(ctx2, fpga_Mode , fpga_Speed , coords);
 
    }

Je reçois bien mon JSON dans ma console, mais aucun traitement ne se fait derrière . MERCI pour votre aide.

14/05/2013, 18h18
Kaamo

La chaine que tu reçois du websocket (evt.data) n'est pas au format JSON (en tout cas celle que tu as fournis ci-dessus, il y a une virgule en trop à la fin). JSON.parse(evt.data) doit planter, non ?

Astuce : utilise un parser de JSON online. Par exemple celui-ci. Ainsi, tu verras si la chaine de caractères est bien au bon format.

merci pour ta réponse. Effectivement il y avait une virgule en trop que j'ai viré. Mais ça ça ne fonctionne toujours pas j'ai une erreur aprés mon JSON.parse .Sous chrome avec l'outil développeur j'ai ça comme erreur:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 websocket.onmessage = function(evt) { var msg = JSON.parse(evt.data); Uncaught SyntaxError: Unexpected token fpga_Speed = msg.fpga_Speed; fpga_Mode = msg.fpga_Mode; coords = msg.coordinates; logToConsole('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>'); dessiner_Axe(ctx, fpga_Mode, fpga_Speed) ; dessiner_Mask(ctx, fpga_Speed, fpga_Mode); dessiner_Point(ctx, fpga_Mode); info_graph(ctx2, fpga_Mode , fpga_Speed , coords); };
Je reçois bien un fichier JSON au bon format:

Code:

{"fpga_Speed ": " 2457 ", "fpga_Mode " : " DFE ", "coordinates" : [ [0.1, 200,30000, 16384, 2], [-0.1, -210,30000, 4096, 5], [0.45, -240,30000, 512, 8], [-0.32, 220,30, 2048, 12], [-0.19, -100,30, 16384, 22], [0.35, 50,40000, 4096, 25], [0.25, -70.5,30, 16384, 29], [-0.21, 120.7,30, 2048, 10], [0.3, -200,30, 512, 7], [0.1, 100.4,4, 128, 2]]}

15/05/2013, 11h15
SylvainPV

Peux-tu faire un console.log(evt.data) ainsi que nous donner le contenu de la frame WebSocket (avec l'outil dev de Chrome c'est onglet Network, sous-onglet Web-socket tu cliques sur ta socket pour avoir le détail frame par frame)

C'est exactement ce que j'ai fait copier/coller de la trame reçue sous l'outil de dev. Voila ce que j'ai:

Code:

1
2
 
{"fpga_Speed ": " 2457 ", "fpga_Mode " : " DFE ", "coordinates" : [   		[0.1, 200,30000, 16384, 2],   		[-0.1, -210,30000, 4096, 5],   		[0.45, -240,30000, 512, 8],   		[-0.32, 220,30, 2048, 12],   		[-0.19, -100,30, 16384, 22],   		[0.35, 50,40000, 4096, 25],   		[0.25, -70.5,30, 16384, 29],   		[-0.21, 120.7,30, 2048, 10],   		[0.3, -200,30, 512, 7],   		[0.1, 100.4,4, 128, 2]]}

15/05/2013, 11h45
SylvainPV

Ah j'ai peut-être une idée ! Il se peut que evt.data ne soit pas considéré comme une String. Donc peut-être que tu n'as pas besoin de JSON.parse.

Essaie ceci pour te le confirmer :
JSON.parse(JSON.stringify(evt.data))

Effectivement ça à l'air de mieux fonctionner, je reccupere mon json dans msg mais je n'arrive pas a reccuperer mes datas dans les differentes variables : coords , fpga_Speed ...
Code:

1 2 3 4 5 6 7 8 9 websocket.onmessage = function(evt) { var msg = JSON.parse(JSON.stringify(evt.data)); fpga_Speed = msg.fpga_Speed; fpga_Mode = msg.fpga_Mode; coords = msg.coordinates; console.log(msg); // fonctionne bien console.log(coords); // msg erreur : non defini };

15/05/2013, 13h45
Bovino

Je vois pas trop l'intérêt de JSON.parse(JSON.stringify(evt.data)) :koi:

car dans ce cas, evt.data est déjà un objet JSON, donc inutile de le transtyper deux fois, ce serait comme faire

Code:

parseInt(42.toString());
15/05/2013, 14h01
SylvainPV
C'était pour confirmer Bovino, c'est pour ça que je dis au dessus que JSON.parse n'est peut-être pas nécessaire.

@glbaa: ça vient de l'espace que tu mets après les noms de variables.
Code:

1 2 3 msg["fpga_Speed"] //pas OK msg["fpga_Speed "] //OK
retire les espaces dans le JSON, ce sera beaucoup plus propre
15/05/2013, 14h33
Kaamo

Bien vu le coup des espaces :ccool:

merci pour vos réponses c'est très sympa de votre part.
j'ai repris la structure JSON (en C) que j'envoie qui est la suivante :
Code:

1 2 u8 response[]= "{\"fpga_Speed\":\"2457\",\"fpga_Mode\":\"DFE\",\"coordinates\":[[0.1, 200,30000, 16384, 2],[-0.1, -210,30000, 4096, 5],[0.45, -240,30000, 512, 8],[-0.32, 220,30, 2048, 12],[-0.19, -100,30, 16384, 22],[0.35, 50,40000, 4096, 25],[0.25, -70.5,30, 16384, 29],[-0.21, 120.7,30, 2048, 10],[0.3, -200,30, 512, 7],[0.1, 100.4,4, 128, 2]]}"
cote Client console.log(msg) donne un JSON valide :
Code:

1 2 {"fpga_Speed":"2457","fpga_Mode":"DFE","coordinates":[[0.1, 200,30000, 16384, 2],[-0.1, -210,30000, 4096, 5],[0.45, -240,30000, 512, 8],[-0.32, 220,30, 2048, 12],[-0.19, -100,30, 16384, 22],[0.35, 50,40000, 4096, 25],[0.25, -70.5,30, 16384, 29],[-0.21, 120.7,30, 2048, 10],[0.3, -200,30, 512, 7],[0.1, 100.4,4, 128, 2]]}
j'ai viré tous les espaces qui avaient mais je n'arrive toujours pas à traiter les datas a part.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 websocket.onmessage = function(evt) { var msg = JSON.parse(JSON.stringify(evt.data)); coords = msg["coordinates"]; fpga_Speed = msg["fpga_Speed"]; console.log(msg); // donne le json au dessus console.log(fpga_Speed); // Erreur : undefined };
je sais que utiliser stringify pour faire un parse ça n'a pas de sens mais si je ne le fais pas, j'ai une erreur au niveau

Code:

var msg = JSON.parse(evt.data);

j'ai toujours le même probleme :cry:

15/05/2013, 21h04
SylvainPV

Non ce qu'on disait c'est que JSON.parse n'était pas nécessaire. En faisant JSON.parse(JSON.stringify(data)) on fait la conversion json -> string -> json. Donc à vrai dire tu peux te servir directement de evt.data comme l'a proposé Bovino.

Je ne sais pas pourquoi fpga_Speed est undefined, j'ai testé de mon côté avec le JSON que tu as donné et cela fonctionne. Il faudrait regarder plus en détail le contenu de msg, à creuser avec le debugger.