Discussion :

[glbaa]

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 :

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
{
   	"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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

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
 
  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.

[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.

[glbaa]

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 :

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
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 :

S�lectionner tout - Visualiser dans une fen�tre � part

{"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]]}

[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)

[glbaa]

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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]]}

[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))

[glbaa]

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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
};

[Bovino]

Je vois pas trop l'int�r�t de JSON.parse(JSON.stringify(evt.data))

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

parseInt(42.toString());

[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 :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
 
msg["fpga_Speed"] //pas OK
msg["fpga_Speed "] //OK

retire les espaces dans le JSON, ce sera beaucoup plus propre

[Kaamo]

Bien vu le coup des espaces

[glbaa]

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

j'ai toujours le m�me probleme

[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.