La collaboration en temps réel le dessin du tableau blanc en HTML5/JS et les websockets?
Je suis en train de mettre en place un petit(ish) de l'école d'été de projet pour certains de mes étudiants avancés et fais des recherches sur la façon de le faire mieux et ce qu'il faut utiliser - j'espère que quelqu'un ici pourrait me diriger dans la bonne direction.
Ce qui nous intéresse, est la recherche de si HTML5 est venu assez loin pour créer une collaboration en temps réel pour le dessin du tableau blanc en elle - purement web à l'aide de technologies sans plugins (donc, CSS, HTML5/DOM et Javascript). Ce que nous aimerions ultimatelly lutter pour est-ce - par exemple en ligne, toile/page sur un serveur central affiché sur un grand écran dans la salle de classe. Puis nos étudiants/utilisateurs de prendre leurs smartphones, charger la page dans leurs navigateurs mobiles (je suis parfaitement ok avec la limitation de ce webkit navigateurs mobiles pour l'instant) et de dessiner sur son écran tactile/doigts (ou sur Pc avec la souris en devinant ce n'est pas beaucoup de différence) et qu'il serait mis à jour en temps réel pour tout le monde - les deux sur leurs écrans et sur le centre de grand écran dans la salle de classe.
Je devine push/requêtes get serait trop lent pour cela - pourrait-il être résolu par les websockets? Quelqu'un at-il toutes les bonnes librairies JS à recommander pour cela?
Aussi ce serait l'idéal (mais plus facile pour les étudiants à comprendre l'architecture ressemble. Disons que vous avez 30 utilisateurs simultanés dans un clasroom - uns d'entre eux se connecter avec les websockets pour le serveur et le serveur de pool de combiner l'ensemble de leurs demandes dans l'un et retourner ensuite le fichier combiné (une sorte de minimum JSON ou même simplement les coordonnées) pour chaque utilisateur connecté?
Serait websockets et (je suppose) en toile être en mesure de prendre ce? De sorte que tout a toujours l'air accrocheur? Y sont (jQuery) et les librairies JS disponible pour rendre notre vie plus facile - ou vous pensez que c'est quelque chose des thats trop complexe pour un 2 semaines en été, le projet d'école?
Vous devez vous connecter pour publier un commentaire.
voici un tutoriel expliquant comment créer un multi-utilisateur de tableau avec javascript/html5/canvas:
http://www.unionplatform.com/?page_id=2762
l'exemple utilise un cadre de collaboration et de serveur nommé "union de la plateforme". même si vous décidez de rouler votre propre serveur et le client, le cadre de la messagerie dans l'exemple devrait vous donner une idée de la façon de structurer le code.
pour une des pommes avec des pommes comparaison de la vitesse de websocket vs comète, voir:
http://www.unionplatform.com/?page_id=2954
dans mes tests, un simple ping sur WebSocket est normalement d'environ deux fois plus rapide que le ping sur http. les deux websocket et coment sont plus que assez rapide pour créer un tableau blanc collaboratif.
Absolument vérifier cela:
http://wesbos.com/html5-canvas-websockets-nodejs/
Pour la mise en réseau côté des choses, essayez de regarder les node.js pour le serveur, avec socket.io pour le client.
Comme pour le dessin lui-même, quelques-uns des choix populaires sont traitement, raphaël et cakejs.
Quand il s'agit de la mise en œuvre, vous pouvez regarder comment des jeux en réseau sur des questions similaires (gamedev.stackexchange.com pourrait être utile).
Ce que vous allez faire, c'est essentiellement la même qu'une simple top-down jeu multijoueur, chaque "joueur" dans ce cas, les élèves du bout des doigts, et le "niveau" d'être la toile. Vous avez besoin de mettre à jour le serveur quant à leur position et qu'ils soient ou non 'tir' (dessin).
Si vous avez besoin en temps réel de l'infrastructure, j'ai créé une liste de technologies en temps réel qui peut être utiliser pour vous. Elles incluent service hébergé, comme Poussoir qui je travaille, et l'auto-installer des technologies telles que les WebSocket et la Comète solutions.
WebSocket sonne comme l'idée du choix de la technologie pour vous, car ils sont devenus une partie de HTML5 et d'offrir la plus efficace pour de en temps réel bi-directionnelle de la communication entre un serveur web et un navigateur (ou d'autres clients).
Il semble que vous devriez probablement stocker l'état actuel quelque part, et sur la charge initiale de la demande d'affichage de l'état. Puis utilisez votre temps réel de l'infrastructure pour envoyer des deltas sur cet état, ou si c'est un dessin sur la toile, juste de l'information sur la ligne etc. qui a été dessinée et de l'information au sujet de qui la tira.
Collaborative en temps réel, le dessin est très certainement réalisable, et il y a eu un certain nombre d'exemples créés de cette. Un google apporter un certain nombre de possibilités.
Si cette technologie est complètement nouveau pour vous et que vous préférez pour se concentrer sur le renforcement de l'application de collaboration puis je envisager d'utiliser un service pour votre application plutôt que de passer par les tracas de la apprendre à installer et configurer, ou même du code, votre propre infrastructure (je ne dis pas cela parce que je travail pour un tel service. Honnêtement, je pense que cela fait plus de sens).