Как устроен этот превосходный сайт?

Question

Я нашел сайт прошлой ночью, который просто потрясающий. Вот URL:

http://yourworldoftext.com/

ВНИМАНИЕ: Сайт может быть NSFW.

И это сразу заставило меня задуматься, как устроен этот сайт. Взгляд на исходный код страницы мало что показывает, но если я посмотрю на него в Firebug, то увижу множество таблиц, подобных этой:

<div class="tilecont" style="top: 994px; left: 1320px;">
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody>
            <tr>
                <td>A</td>
                <td>L</td>
                <td>L</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            <tr>
            <tr>
                <td>Y</td>
                <td>O</td>
                <td>U</td>
                <td>R</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            <tr>
            <tr>
                <td>B</td>
                <td>A</td>
                <td>S</td>
                <td>E</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            <tr>
    </table>
</div>

tilecont DIV повторяется и выкладывается по всей странице, а внутренняя таблица занимает всю ширину и высоту этого DIV. Затем каждый <tr> внутри таблицы представляет собой одну строку с 16 <td> внутри этой строки, чтобы составить каждый символ.

Трудно объяснить, если у вас установлен Firebug, вы можете просто перетащить его на страницу и убедиться в этом.

Я думал, что это чертовски умно, но я не могу обдумать, как это будет храниться в базе данных или что-то в этом роде? Я пытался просмотреть файлы JS, но, если честно, там есть много вещей, которые я либо не знаю, либо не имею отношения к тому, как они хранятся и т. Д. Я предполагаю, что он делает AJAX-запрос к базе данных при каждом событии keyUp хранить новые данные для этой конкретной "ячейки"?

Кто-нибудь может сказать, как это делается?

Answer 1

Вы, наверное, примерно правы. Сайт знает, где находится ваш видовой экран, и загружает только видимую часть, в 16 "чанков" символа. DB просто сохраняет 16 строк символов с координатами x и y. Вы можете увидеть его обновление в блоках 1x16, если быстро перетащить.

Что касается отправки, если бы это был я, я бы кэшировал текст и отправлял только один 16-символьный "чанк" за раз. Каждый раз, когда происходит редактирование, проверьте, находится ли он в том же блоке, что и последний. Если нет, отправьте последний кусок и начните кэшировать новый.

Чтобы поддерживать актуальность представления, вы можете проверить его на наличие изменений в вашей области просмотра, посылая ajax-запрос каждые пару секунд с window.setInterval(). Он может отослать обратно некоторый JSON или что-то еще только с частями, которые имеют изменения, возможно, закодированные с их расположением в сетке в первых нескольких символах.

Я просто машу рукой, я не смотрел на код, но вы правы. Это увлекательный сайт.

РЕДАКТИРОВАТЬ: Подробнее ...

Проверьте функцию init() (строка 906 в yourworld.js). Это лучшая точка входа, если вы хотите изучить код. Вы можете увидеть, как редактирование работает в строке 953. В keydown скрипт фокусирует скрытый элемент ввода, который ловит текст. Затем он использует обратный вызов на setInterval, чтобы получать первый символ из поля ввода каждые 10 мс, а затем очищает поле. Если есть символ, он кэшируется в массиве и помещается в активную ячейку сетки. В комментарии он говорит, что это предотвращает вставку.

Массив правок отправляется каждые две секунды (строка 1017). Каждый символ ввода отправляется с позицией и отметкой времени.

fetchUpdates() обрабатывает получение обновленных ячеек с сервера (строка 383). Он содержит запрос jQuery.ajax с обратным вызовом при успешном завершении функции, которая вносит необходимые изменения и через 1 секунду setTimeout().

снова вызывает fetchUpdates().