Tag - developpement

Entries feed - Comments feed

Thursday, 22 July 2010

Un serveur WebSocket en Python

Bonjour les gens !!

Bon je sais, ça fait un bail, mais voila, c'est ça aussi la vie d'un blog, y a des hauts et des bas ! 

Aujourd'hui, j'vais vous parler de deux choses, qui sont liées. Tout d'abord, je lance un nouveau projet de jeu vidéo, un jeu web (ou browser game) pour être précis. Mon annonce sur le Site du Zéro présente bien le projet, je vous invite donc à aller la lire si vous êtes intéressé. 

Pour résumer, le jeu sera un jeu de stratégie en tour par tour, faisant s'affronter des unités typées médiéval (infanterie, archerie, chevalerie) sur une carte constituée de cases hexagonales, le tout en vue 2d isométrique. Le but est de faire un jeu simple d'accès, permettant à un joueur de faire une partie rapidement, juste avec son navigateur (sans nécessiter de plugin quelconque), et sans avoir à gérer des tas de trucs avant de se lancer dans la partie. 

Voir le Game Concept Document de Fightly

Techniquement, le jeu utilisera HTML, CSS et JavaScript pour la partie client, PHP pour la génération des pages et Python pour le serveur de gestion des parties. L'intérêt est l'utilisation des récentes WebSockets, actuellement implémentées dans Chrome et Chromium uniquement, mais pour lesquelles il existe des fallback. Je vous ferai bien une présentation détaillée de l'utilisation des WebSocket, et pourquoi c'est top moumoute, mais non. J'vais plutôt vous balancer quelques liens intéressants sur le sujet : 

Et on en arrive au deuxième point : dans le cadre de ce projet, j'ai développé un début de serveur permettant de communiquer avec une page web via les WebSockets. Chez le client, on a un code JavaScript assez classique, qui utilise la très simple interface WebSocket. Et du côté du serveur, j'ai donc développé un serveur en Python qui créé les connexions, reçoit les messages des clients, les analyse et les traite comme il faut, puis renvoie aux clients le nouvel état du "monde". C'est assez étonnant de simplicité, d'autant que j'ai commencé à apprendre Python environ 3 jours avant de réussir à faire ce serveur. Bon faut avouer que je ne suis pas parti de rien, j'ai repris le code de Eneko Alonso, donné sur son blog : More WebSockets, now with Python!

Tout ça pour en venir au point intéressant : j'ai décidé de partager avec vous la partie qui gère les WebSockets. Elle est orientée objet, utilise un thread pour chaque client (donc pour chaque connexion), et vous permet assez simplement d'ajouter votre propre comportement lors de réception d'un message. 

Voir le projet python-websocket-server sur GitHub

Bon, c'est le premier truc que je fais en Python, donc y a surement des erreurs. Mais j'espère que vous saurez me les faire remarquer ! :) Je sais par exemple que je ne gère par l'arrêt du serveur par interruption, et que c'est un problème car le serveur ne s'arrête pas tant que tous les clients ne sont pas déconnectés (puisqu'il y a encore des thread en cours de fonctionnement). Je sais également que je pourrais faciliter l'utilisation du code en ajoutant un mécanisme de fonction callback, mais je sais pas encore faire ça en Python, donc ça viendra plus tard ! ^^

Actuellement, le code est celui d'un chat très simple. A chaque fois qu'un client envoie un message, le serveur le renvoie à tous les clients. Pour tester, lancer le server.py dans une console, et accédez à la page index.html depuis votre localhost. Ouvrez cette dernière dans plusieurs onglets, et envoyer un message dans l'un d'eux. Vous devriez voir apparaitre le message sur toutes les autres fenêtres quasiment instantanément. 

Pour ajouter votre propre comportement, modifiez le code de la fonction onreceive de la classe WebSocketClient (websocketclient.py). Il est aussi possible que vous ayez à changer la configuration du serveur dans le fichier config.py. 

J'espère que ce code pourra être utile à certains d'entre vous. Et bien sur, si vous avez des questions, n'hésitez-pas ! Passez à ma grotte ! Laissez-moi un message ! 

Friday, 8 January 2010

Mise à jour de Minifier, le plugin qui compresse vos fichiers CSS

Bien le bonjour ! 

Souvenez-vous, il y a quelques temps, je vous présentais Minifier, un plugin pour Atomik Framework qui compresse vos fichiers CSS directement sur votre serveur. Plusieurs avantages à cela : 

  • une seule requête HTTP sur chaque page, quel que soit le nombre de vos fichiers CSS
  • suppression des espaces superflus et des commentaires, donc des fichiers plus légers
  • moins de bande passante utilisée
  • une mise en cache des fichiers compressés, donc pas d'utilisation inutile des ressources

Seul "inconvénient", les utilisateurs reçoivent un fichier compressé et donc relativement illisible. Mais honnêtement, dans le cadre d'un site de taille respective, est-ce vraiment un problème ?

Petit rappel pour les gens qui découvrent : ce plugin s'utilise uniquement avec Atomik Framework, un framework PHP5 léger, gratuit, open source, et que j'apprécie beaucoup. 

Bien. Il se trouve que la première version de plugin ne marchait pas bien du tout, parce que j'utilisais des liens pour régler le problème des urls relatives des fichiers CSS. En gros, je créais dans le dossier assets/css/ un lien vers le fichier compressé, ainsi les url étaient prises en compte depuis le dossier assets/css/ et non depuis le dossier de cache. Mais faire des liens en PHP, c'est pas beau, et surtout ça ne marche que très peu sur les serveurs ! A côté de ça, j'avais aussi quelques problèmes au niveau de la manipulation des adresses des fichiers. 

Ce matin, j'ai eu une illumination en repensant à ces problèmes, et j'ai donc pu facilement résoudre le premier : il suffisait tout simplement de mettre les fichiers compressés dans un dossier situé au même niveau que le dossier contenant les CSS ! Par exemple, dans un dossier assets/css_cache/ ! J'ai donc fait ça, et j'en ai profité pour corriger les problèmes d'adresses et pour ajouter quelques fonctionnalités. Vous avez désormais trop moyens d'ajouter le <link>, comme décrit sur la page officielle du plugin. De plus, j'ai ajouté deux clés de configuration : 'cache/dir' contient l'adresse du dossier contenant les fichiers cachés (par défaut, assets/css_cache/), et 'force_css_link' qui force l'affichage de la balise <link> complète plutôt que le retour de l'url du fichier compressé. Des exemples d'utilisation sont disponibles sur la documentation de Minifier

J'espère que les utilisateurs d'Atomik Framework prendront plaisir à utilliser Minifier, et qu'il leur sera utile pour améliorer les performances de leurs sites ! 

Si vous avez des remarques ou des questions, n'hésitez pas à vous exprimer en commentaire ou en m'envoyant un mail

Quelques liens pour finir : 

Bonne journée !

Monday, 2 November 2009

Développeurs Web, mettez des liens vers vos flux RSS !

Hello ! 

Aujourd'hui, petit coup de gueule, parce que je suis pas content... Tout à commencé quand, constatant la lenteur de Firefox par rapport à Google Chrome, je décidais de glisser vers la version libre de ce dernier, Chromium. (Note : d'ailleurs, Chromium est un très bon navigateur, qui plante beaucoup moins que Firefox... Mais ceci est une autre histoire ! )


Or, il se trouve que Firefox dispose d'une fonction très pratique qui permet de voir d'un simple clic à côté d'une adresse, tous les flux RSS détectés sur le site en question. Je suppose que vous voyez tous à peu près de quoi je veux parler. Bien. Eh bien cette fonctionnalité, très pratique au demeurant, n'existe pas dans Chromium. Or, j'ai l'impression que, la majorité des développeurs Web utilisant Firefox, ils oublient que les liens vers leurs flux RSS ne sont pas accessibles depuis les autres navigateurs. 

Et ceci est un réel problème ! J'enrage assez souvent, quand je tombe sur un blog intéressant auquel je veux m'abonner, de devoir lancer mon firefox uniquement pour récupérer le lien d'un flux RSS... Dernier exemple en date, je trouve, suite à une recherche Google, un site d'un développeur Web, marcarea.com. Ca m'a l'air intéressant, je connaissais pas, donc j'essaye de m'abonner. Et là, c'est le drame : pas de lien vers les flux RSS ! Nulle part, ni dans le header, ni même au fin fond du footer, ni sur la page d'accueil... 

Comme ce n'est pas la première fois que ça m'arrive, je m'énerve, je le tweet, et je rédige ce billet. Je suis un ouf. 

En plus d'être énervant, l'absence de ces liens n'encourage pas les gens à s'abonner, ne leur montre même pas que les flux RSS existent (oui il y a encore des gens qui surfent et qui ignorent ce que c'est), et donc au final réduit le nombre de lecteurs potentiels de votre blog / site / whatever. Fidéliser ses lecteurs, c'est important. 

Donc, amis développeurs Web, pensez s'il vous plait à mettre des liens vers vos flux RSS ! 

Have a nice day !

Notes : J'ai tout de même fini par lancer firefox pour m'abonner au blog de marcarea. D'ailleurs, Marc, si tu passes par ici, ne vois nulle offense dans ce billet. Je l'écris un peu à chaud, et j'espère ne pas être agressif. Si tel est le cas, sache que ce n'est pas mon but ! ;)