Panneau de dessin collaboratif en temps réel en HTML5 / JS et websockets?

J'essaie de mettre en place un petit projet d'école d'été (ish) pour certains de mes étudiants avancés et je recherche comment faire le 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 venu assez loin pour créer un tableau blanc en collaboratif en temps réel – simplement en utilisant des technologies Web sans plugins (donc CSS, HTML5 / DOM et Javascript). Ce que nous nous efforcerions ultimement, c'est-à-dire, par exemple, d'avoir une toile / page en ligne sur un serveur central affiché sur un grand écran dans la salle de classe. Ensuite, nos étudiants / utilisateurs retirent leurs smartphones, chargent la page dans leurs navigateurs mobiles (je suis tout à fait correct de limiter cela aux navigateurs mobiles webkit pour l'instant) et dessinez sur leurs écrans avec le toucher / les doigts (ou sur les PC avec la souris – deviner cela ne fait pas beaucoup de différence) et il serait mis à jour en temps réel pour tous, à la fois sur leurs écrans et sur le grand écran central dans la salle de classe.

  • Télécharger Force pour blob créé avec FileWriter en JavaScript
  • Spin wheel image in HTML5 (p. Ex. Roulette de roulette)?
  • Obtenir le contenu DOM de l'iframe entre domaines
  • IndexedDB et many-to-many Relationships
  • Spécifier la sortie de valeur d'un type d'entrée HTML5 = date?
  • Vidéo HTML5 - Chargement du chargement de l'événement complet?
  • Je suppose que les demandes push / get seraient trop lentes pour cela – pourrait-il être résolu par des websockets? Est-ce que quelqu'un a de bonnes bibliothèques JS à recommander pour cela?

    Aussi, comment ressemblerait l'architecture idéale (mais plus facile pour les étudiants à comprendre). Disons que vous avez 30 utilisateurs simultanés dans une chambre de partage – chacun d'entre eux se connecte avec les websockets au serveur et le serveur regroupe / combine toutes ses requêtes en un seul puis retourne le fichier combiné (une sorte de JSON minimal ou même des coordonnées ) Pour chaque utilisateur connecté?

    Est-ce que les websockets et la toile (je suppose) pourraient prendre cela? Alors, tout semble-t-il simple? Existe-t-il (jQuery-like) les bibliothèques JS disponibles pour faciliter notre vie – ou pensez-vous que c'est trop complexe pour un projet d'été de deux semaines?

  • Demandez à l'utilisateur d'enregistrer le fichier avec Node.js
  • Comment puis-je détecter les liens visités et non visités sur une page?
  • Javascript window.location dans un nouvel onglet
  • Utilisation de raccourcis clavier multiplate-forme dans les tests de bout en bout
  • Rails link_to: remote
  • Formatez un numéro javascript avec un préfixe métrique comme 1.5K, 1M, 1G, etc.
  • 4 Solutions collect form web for “Panneau de dessin collaboratif en temps réel en HTML5 / JS et websockets?”

    Voici un didacticiel décrivant comment créer un tableau blanc multi-utilisateurs 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 rouler votre propre serveur et votre cadre client, la messagerie dans l'exemple devrait vous donner une idée de la façon de structurer le code.

    Pour une comparaison de la vitesse des pommes avec les pommes sur le websocket vs comeet, 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. Le websocket et le commentaire sont plus que suffisamment rapides pour créer un tableau blanc collaboratif.

    Vérifiez définitivement ceci:

    http://wesbos.com/html5-canvas-websockets-nodejs/

    Pour le côté réseau des choses, essayez de regarder node.js pour le serveur, avec socket.io pour le client.

    Quant au dessin lui-même, quelques choix populaires sont le traitement , raphael et cakejs .

    En ce qui concerne la mise en œuvre, vous voudrez peut-être regarder comment les jeux en réseau traitent des problèmes similaires ( gamedev.stackexchange.com pourrait être utile).

    Ce que vous allez faire est essentiellement le même qu'un simple jeu multijoueur en haut en bas, chaque «joueur» dans ce cas étant un doigt d'élève et le «niveau» étant le canevas. Vous devez mettre à jour le serveur quant à leur position et si oui ou non ils sont «tir» (dessin).

    Je suppose que les demandes push / get seraient trop lentes pour cela – pourrait-il être résolu par des websockets? Est-ce que quelqu'un a 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 du service hébergé, comme Pusher pour lequel je travaille, et des technologies d'auto-installation telles que les solutions WebSocket et Comet.

    WebSocket ressemble à l'idée de choix de la technologie pour vous, car ils sont devenus une partie de HTML5 et offrent la communication bidirectionnelle en temps réel la plus efficace entre un serveur Web et un navigateur (ou d'autres clients).

    Aussi, comment ressemblerait l'architecture idéale (mais plus facile pour les étudiants à comprendre). Disons que vous avez 30 utilisateurs simultanés dans une chambre de partage – chacun d'entre eux se connecte avec les websockets au serveur et le serveur regroupe / combine toutes ses requêtes en un seul puis retourne le fichier combiné (une sorte de JSON minimal ou même 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'affichage de l'application qui indique. Ensuite, utilisez votre infrastructure en temps réel pour envoyer des deltas sur cet état, ou s'il s'agit d'un dessin sur toile, juste des informations sur la ligne, etc. qui ont été dessinées et des informations sur qui l'ont dessiné.

    Est-ce que les websockets et la toile (je suppose) pourraient prendre cela? Alors, tout semble-t-il simple? Existe-t-il (jQuery-like) les bibliothèques JS disponibles pour faciliter notre vie – ou pensez-vous que c'est trop complexe pour un projet d'été de deux semaines?

    Le dessin collaboratif en temps réel est certainement réalisable et il y a eu plusieurs exemples créés. Un google offre 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 construction d'une application collaborative, je considérerais l'utilisation d'un service pour votre application plutôt que de faire preuve de tracas pour savoir comment installer, configurer ou même coder votre propre infrastructure (Je ne dis pas cela parce que je travaille pour un tel service. Je pense sincèrement que cela a le plus de sens).

    JavaScript rend le site Web intelligent, beauté et facile à utiliser.