Tableau blanc de dessin collaboratif en temps réel en HTML5 / JS et websockets?
J'essaie de mettre sur pied un petit projet d'école d'été (ish) pour certains de mes étudiants avancés et je cherche comment le faire au mieux et quoi utiliser - j'espère que quelqu'un ici pourrait me diriger dans la bonne direction.
Ce qui nous intéresse, c'est de rechercher si HTML5 est allé assez loin pour y créer un tableau blanc de dessin collaboratif en temps réel - uniquement en utilisant des technologies Web sans plugins (donc CSS, HTML5/DOM et Javascript). Ce que nous souhaitons ultimement, c'est ceci - par exemple, avoir une toile/page en ligne sur un serveur central affichée sur un grand écran dans la salle de classe. Ensuite, nos étudiants/utilisateurs sortiraient leurs smartphones, chargeraient la page dans leurs navigateurs mobiles (je suis parfaitement d'accord pour limiter cela aux navigateurs mobiles webkit pour l'instant) et dessinaient sur leurs écrans avec le toucher/les doigts (ou sur les PC avec la souris - deviner que cela ne fait pas beaucoup de différence) et il serait mis à jour en temps réel pour tout le monde - à la fois sur leurs écrans et sur le grand écran central de la classe.
Je suppose que les demandes Push/Get seraient trop lentes pour cela - pourrait-il être résolu par les websockets? Quelqu'un at-il de bonnes bibliothèques JS à recommander pour cela?
De plus, à quoi ressemblerait l'architecture idéale (mais plus facile à comprendre pour les étudiants). Disons que vous avez 30 utilisateurs simultanés dans une salle de classe - chacun d'eux se connecterait avec des websockets au serveur et le serveur regrouperait/combinerait toutes leurs demandes en une seule puis retournerait le fichier combiné (une sorte de JSON minimal ou même juste des coordonnées ) pour chaque utilisateur connecté?
Les websockets et (je suppose) les toiles pourraient-ils accepter cela? Alors que tout semble toujours accrocheur? Existe-t-il des bibliothèques JS (de type jQuery) pour nous faciliter la vie - ou pensez-vous que c'est quelque chose de trop complexe pour un projet d'école d'été de 2 semaines?
voici un tutoriel décrivant comment créer un tableau blanc multi-utilisateur avec javascript/html5/canvas:
http://www.unionplatform.com/?page_id=2762
l'exemple utilise un cadre de collaboration et un serveur nommé "plate-forme syndicale". même si vous décidez de déployer votre propre infrastructure de serveur et de client, la messagerie de l'exemple devrait vous donner une idée de la façon de structurer le code.
pour une comparaison de la vitesse entre les pommes et les pommes de la websocket contre la comète, voir: http://www.unionplatform.com/?page_id=2954
dans mes tests, un ping de base sur WebSocket est normalement environ deux fois plus rapide que le ping sur http. websocket et coment sont plus que suffisamment rapides pour créer un tableau blanc collaboratif.
Vérifiez certainement ceci:
Pour l'aspect réseau des choses, essayez de regarder node.js pour le serveur, ainsi que socket.io pour le client.
En ce qui concerne le dessin lui-même, quelques choix populaires sont traitement , raphael et cakejs .
En ce qui concerne l'implémentation, vous voudrez peut-être voir comment les jeux en réseau traitent des problèmes similaires ( gamedev.stackexchange.com pourrait être utile).
Ce que vous allez faire est essentiellement identique à un simple jeu multijoueur descendant, chaque "joueur" dans ce cas étant le bout des doigts des étudiants et le "niveau" étant la toile. Vous devez mettre à jour le serveur quant à sa position et s'il "tire" (dessin).
Je suppose que les demandes Push/Get seraient trop lentes pour cela - pourrait-il être résolu par les websockets? Quelqu'un at-il de bonnes bibliothèques JS à recommander pour cela?
Si vous avez besoin d'une infrastructure en temps réel, j'ai créé une liste de technologies en temps réel qui pourraient vous être utiles. Il s'agit notamment des services hébergés, tels que Pusher pour qui je travaille, et des technologies d'auto-installation telles que les solutions WebSocket et Comet.
WebSocket sonne comme le choix idéal de la technologie pour vous car ils sont devenus partie intégrante de HTML5 et offrent le plus efficace pour la communication bidirectionnelle en temps réel entre un serveur Web et un navigateur (ou d'autres clients).
De plus, à quoi ressemblerait l'architecture idéale (mais plus facile à comprendre pour les étudiants). Disons que vous avez 30 utilisateurs simultanés dans une salle de classe - chacun d'eux se connecterait avec des websockets au serveur et le serveur regrouperait/combinerait toutes leurs demandes en une seule puis retournerait le fichier combiné (une sorte de JSON minimal ou même juste des coordonnées ) pour chaque utilisateur connecté?
Il semble que vous devriez probablement stocker l'état actuel quelque part et sur la charge initiale de l'application afficher cet état. Ensuite, utilisez votre infrastructure en temps réel pour envoyer des deltas sur cet état, ou si c'est un dessin sur toile, juste des informations sur la ligne, etc. qui a été dessinée et des informations sur qui l'a dessiné.
Les websockets et (je suppose) les toiles pourraient-ils accepter cela? Alors que tout semble toujours accrocheur? Existe-t-il des bibliothèques JS (de type jQuery) pour nous faciliter la vie - ou pensez-vous que c'est quelque chose de trop complexe pour un projet d'école d'été de 2 semaines?
Le dessin collaboratif en temps réel est très certainement réalisable et plusieurs exemples en ont été créés. Un google évoque un certain nombre de possibilités.
Si cette technologie est complètement nouvelle pour vous et que vous préférez vous concentrer sur la création de l'application collaborative, j'envisagerais d'utiliser un service pour votre application plutôt que de passer par les tracas d'apprendre à installer et configurer, ou même à coder, votre propre infrastructure. (Je ne dis pas simplement cela parce que je travaille pour un tel service. Je pense honnêtement que cela a le plus de sens).