Comment ce superbe site est-il construit?

Question

J'ai trouvé un site web hier soir qui est tout simplement génial. Voici l'URL :

http://yourworldoftext.com/

AVERTISSEMENT : Le site peut ne pas convenir pour le travail.

Et cela m'a immédiatement fait réfléchir sur la manière dont ce site est construit. En regardant le code source de la page, on ne voit pas grand-chose, mais si je regarde avec Firebug je vois beaucoup de tables comme celle-ci :

                A
                L
                L
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 

                Y
                O
                U
                R
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 

                B
                A
                S
                E
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 

le DIV tilecont est répété et tuilé sur toute la page, et la table à l'intérieur occupe toute la largeur et la hauteur de ce DIV. Ensuite, chaque à l'intérieur de la table est une ligne avec 16 's à l'intérieur pour former chaque caractère.

C'est difficile à expliquer, si vous avez Firebug installé, vous pouvez simplement le faire glisser sur la page et voir par vous-même.

J'ai trouvé cela plutôt malin, mais je n'arrive pas à comprendre comment cela pourrait être stocké dans une base de données ou quelque chose du genre ? J'ai essayé de regarder à travers les fichiers JS mais pour être honnête, il y a beaucoup de choses là-dedans que je ne connais pas ou qui ne sont pas liées à la manière dont c'est stocké, etc. Je suppose qu'il fait une requête AJAX à une base de données à chaque événement keyUp pour stocker les nouvelles données pour cette "cellule" particulière ?

Est-ce que quelqu'un a une idée de comment cela est fait ?

Answer 1

Vous êtes probablement à peu près correct. Le site sait où se trouve votre viewport et ne charge que la partie visible, en "morceaux" de 16 caractères. La base de données enregistre simplement des chaînes de 16 caractères avec une coordonnée x et y. Vous pouvez voir la mise à jour en blocs de 1x16 si vous faites glisser rapidement.

En ce qui concerne l'envoi, si c'était moi, je mettrais en cache le texte et n'enverrais qu'un "morceau" de 16 caractères à la fois. À chaque modification, vérifiez si elle se trouve dans le même morceau que la précédente. Si ce n'est pas le cas, envoyez le dernier morceau et commencez à mettre en cache le nouveau.

Pour maintenir la vue à jour, vous pourriez vérifier les modifications dans votre zone de vue en envoyant une requête ajax toutes les quelques secondes avec window.setInterval(). Il pourrait renvoyer du JSON ou quelque chose avec juste les morceaux qui ont changé, peut-être encodés avec leur emplacement dans la grille dans les premiers caractères.

Je m'emporte un peu, je n'ai pas regardé le code, mais vous avez raison. C'est un site fascinant.

ÉDITER: Plus de détails...

Consultez la fonction init() (ligne 906 dans votreworld.js). C'est le meilleur point d'entrée si vous voulez étudier le code. Vous pouvez voir comment l'édition fonctionne à la ligne 953. Sur keydown, le script met le focus sur un élément input caché qui récupère le texte. Ensuite, il utilise un rappel sur setInterval pour obtenir le premier caractère du champ d'entrée toutes les 10ms, puis effacer le champ. S'il y a un caractère, il est mis en cache dans un tableau et placé dans la cellule active de la grille. Il dit dans un commentaire que c'est pour empêcher le collage.

Le tableau des modifications est envoyé toutes les deux secondes (ligne 1017). Chaque caractère d'entrée est envoyé avec une position et une horodatage.

fetchUpdates() gère la récupération des cellules nouvellement mises à jour du serveur (ligne 383). Il contient une demande jQuery.ajax avec un rappel en cas de succès à une fonction qui apporte les modifications nécessaires et appelle fetchUpdates() à nouveau après un setTimeout() d'une seconde.