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.