Как этот великолепный сайт построен?

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 или что-то только с кусками, которые имеют изменения, возможно, закодированы с их расположением в сетке в первых нескольких символах.

Я просто ручаюсь здесь, я не смотрел код, но вы правы. Его увлекательный сайт.

EDIT: Подробнее ...

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

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

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