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