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.