Discussion :

[blatip]

Bonjour,
J'ai un souci dont je ne comprends même pas qu'il puisse arriver :
J'ai codé un petit jeu basé sur AJAX : un moteur php qui gère le jeu, et une interface Javascript qui interroge le serveur par un XHR et affiche l'état du jeu pour chaque joueur
L'ensemble fonctionne très bien sur mon serveur de test en local (EasyPHP), mais quand j'upload le tout chez mon hébergeur (ovh Cloud), il advient un truc curieux :
Tout fonctionne très bien SAUF que les cercles sont tracés beaucoup trop grands sur le Canvas principal en Javascript : on dirait que la fonction scale s'applique mal à ces cercles
Pire encore, sous chrome les cercles sont vides, et sous Firefox ils sont pleins (alors qu'en local ils sont toujours vides et à la bonne taille) !
Pourtant les images sont correctement tracées sur le même canvas et après la même fonction scale
Je ne comprends pas comment un changement de serveur peut influer sur l'exécution du Javascript sur le client
J'ai vérifié les en-têtes http : ce sont les mêmes
Est-ce que quelqu'un a une idée de comment il est possible que le serveur puisse avoir un effet sur l'exécution du Javascript / Canvas ??

[SpaceFrog]

Commence par regarder en console les retours de ton ajax afin de repérer éventuellement les différences ?

[blatip]

Le retour AJAX est le même (enfin, similaire, puisque les valeurs de retour sont différentes) ; c'est seulement une chaine de caractères (pas du xml) que je décode en javascript.
Et de toutes façons, les dimensions des cercles sont des variables qui ne bougent pas. Dans le doute, j'ai quand même essayé de mettre des valeurs fixes, "en dur", et le problème reste le même.
On dirait vraiment que la fonction d'échelle (scale de contexte2D de canvas) n'est pas traitée pareil quand le html (la page de base) est servi par un serveur ou l'autre, ce qui me parait impossible.
D'ailleurs, au début du développement, je n'utilisais pas la fonction scale et je n'avais pas ces problèmes (mais je suis obligé de passer maintenant par cette fonction car les choses deviennent trop complexes à gérer par des formules).
En plus, je pense que le problème vient bien d'un mauvais fonctionnement de la fonction scale, car ça pourrait déjà expliquer les cercles vides ou pleins, qui résulteraient d'une épaisseur de trait à une mauvaise échelle aussi.
Même si, encore une fois, je ne comprends pas comment ça peut être causé par le serveur.
A ce jour, j'ai triché en mettant l'image d'un rond, mais la solution ne me plait pas.
Et puis j'aimerais bien comprends le problème, ne serait-ce que parce que ça cache peut-être un fonctionnement que je ne connais pas.
Une autre idée ?

[Toufik83]

Bonjour,

Pouvez-vous nous montrer un exemple en ligne pour voir ce comportement inattendu ainsi que le code utilisé....

[ViskashaEveillé]

Bonjour,

est-ce que vous utilisez un OS différent entre votre pc local (peut-être windows) et votre serveur ovh (linux?)

Il arrive que vos fichiers de code puissent être interprétés différement quand vous changez d'OS (shebang, chemin, etc...)

[blatip]

Le client est toujours le même, sur le même PC windows 10 ; en fait, la situation est toujours exactement la même, seul le serveur change
J'ai mis tous ça en ligne sur www.challengear.com (il faut deux navigateurs différents pour les joueurs)
En testant le jeu, vous constaterez que les "balles", quand on tire, sont énormes, alors qu'en local, les balles sont toutes petites
Le code qui trace les cercles est le suivant (fichier www.challengear.com/jvs/7-tracage.js : fonction tracer_tirs, lignes 203 à 208)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$ctxZG.beginPath();
$ctxZG.arc($xs[$i],$es[$i],$f_ltir,0,2*Math.PI);
$ctxZG.closePath();
$ctxZG.stroke();
$ctxZG.fill();

Avant d'appeler cette fontion, il y a les changements de contexte qui sont à mon avis en cause (lignes 51 à 54)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$ctxZG.save();
$ctxZG.translate($xCentre,$yCentre) ;
$ctxZG.rotate(-$aOrient);
$ctxZG.scale($eAffich,-$eAffich);

Il n'y a vraiment rien de sorcier dans ce code
Et encore une fois, comment se fait-il que le javascript soit interprété différemment selon le serveur qui a envoyer le fichier ...

[blatip]

En local, ça donne ça (ne tenez pas compte des points roses, ils sont rajoutés en dur quand le serveur est 127.0.0.1) :

[blatip]

Oh my god ...
Je viens de me rendre compte en postant mon message précédent qu'il y a bien une différence de fonctionnement quand je suis en local ... en 127.0.0.1
J'affiche les 3 points de repère en rose (ligne 58 à 64)
Je viens d'essayer de supprimer ce repère ... et le résultat en local devient le même que quand c'est servi par ovh
J'ai honte là ...

[blatip]

Pour info :
Pour l'affichage des trois points roses (donc quand le serveur était en 127.0.0.1), je définissais lineWidth à une valeur grande
Et pour le traçage des "tirs" je définissais une lineWidth à 0 ... qui est une valeur non valide
Je traçais donc mes tirs avec le lineWidth des trois points roses, mais seulement quand le serveur n'était pas 127.0.0.1
Problème résolu

[xor AX AX]

Ouvrir un post sur un forum a (selon moi) plusieurs mérites (en plus de faire appel à des compétences) :

1. prendre un peu de recul avec ton code, le temps de rédiger ton post
2. formaliser exactement le problème et les conditions dans lesquelles il apparaît
3. décrire le problème à des personnes qui n'en connaissent rien : cela te permet de vérifier la cohérence de la démarche effectuée jusque là
4. avoir des avis extérieurs de personnes qui ne sont pas sur ce problème depuis des heures et en auront certainement une approche moins étroite (moins tunnelisée)