Совместное рисование интерактивной доски в реальном времени в формате HTML5 / JS и веб-сокеты?

Question

Я пытаюсь составить небольшой (летний) проект летней школы для некоторых из моих продвинутых учеников и исследую, как сделать это лучше и что использовать - надеюсь, кто-то здесь мог бы указать мне правильное направление.

Что нас интересует, так это исследование того, насколько HTML5 зашел достаточно далеко, чтобы создать в нем интерактивную доску для рисования в режиме реального времени - исключительно за счет использования веб-технологий без плагинов (например, CSS, HTML5 / DOM и Javascript).То, к чему мы в конечном итоге стремимся, это, например, иметь онлайн холст / страницу на центральном сервере, отображаемом на большом экране в классе.Затем наши студенты / пользователи вынимали свои смартфоны, загружали страницу в свои мобильные браузеры (сейчас я совершенно согласен с ограничением для мобильных браузеров webkit) и рисовали на своих экранах касанием / пальцами (или на ПК с помощью мыши- думаю, что это не имеет большого значения), и это будет обновляться в режиме реального времени для всех - как на их экранах, так и на большом центральном экране в классе.

Я предполагаю, что push / getзапросы будут слишком медленными для этого - это может быть решено с помощью веб-сокетов?У кого-нибудь есть хорошие библиотеки JS, которые можно порекомендовать для этого?

Кроме того, как будет выглядеть идеальная (но более понятная для студентов) архитектура.Допустим, у вас есть 30 одновременно работающих пользователей - каждый из них подключается к серверу через веб-сокеты, а сервер объединяет / объединяет все их запросы в один, а затем возвращает объединенный файл (своего рода минимальный JSON или даже просто координаты).) для каждого подключенного пользователя?

Могут ли веб-сокеты и (я предполагаю) холст принять это?Так что все еще выглядит быстро?Существуют ли (jQuery-подобные) библиотеки JS для облегчения нашей жизни - или вы думаете, что это что-то слишком сложное для двухнедельного проекта летней школы?

Answer 1

вот учебник, описывающий, как создать многопользовательскую доску с помощью javascript / html5 / canvas:

http://www.unionplatform.com/?page_id=2762

в примере используется среда совместной работы и сервер с именем "union platform".даже если вы решите развернуть свой собственный сервер и клиентскую среду, обмен сообщениями в этом примере должен дать вам представление о том, как структурировать код.

для сравнения скорости websocket с кометой, как яблоки к яблокам,см: http://www.unionplatform.com/?page_id=2954

в моих тестах, базовый пинг через WebSocket обычно примерно в два раза быстрее, чем пинг через http.и websocket, и coment более чем достаточно быстры, чтобы создать совместную доску.

Answer 2

Определенно проверьте это:

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

Answer 3

Что касается сетевых аспектов, попробуйте поискать node.js для сервера, а также socket.io для клиента.

Что касаетсяСамо рисование, несколько популярных вариантов: обработка , рафаэль и cakejs .

Когда дело доходит до реализации, вы можете посмотретьо том, как сетевые игры решают подобные проблемы ( gamedev.stackexchange.com может быть полезным).

То, что вы собираетесь делать, по сути то же самое, что и простая многопользовательская игра сверху вниз,при этом каждый «игрок» в этом случае является кончиком пальца студента, а «уровень» - холстом.Вам необходимо обновить сервер в соответствии с его положением и тем, стреляют ли они (рисует).

Answer 4

Я предполагаю, что запросы push / get будут слишком медленными для этого - может ли это быть решено с помощью веб-сокетов?У кого-нибудь есть какие-нибудь хорошие библиотеки JS, которые можно порекомендовать для этого?

Если вам нужна инфраструктура реального времени, я создал список технологий реального времени, которые могут быть вам полезны.К ним относятся размещенные службы, такие как Pusher , на которых я работаю, и технологии самостоятельной установки, такие как решения WebSocket и Comet.

WebSocket звучит как идеальный выбор технологии для вас, поскольку у них естьстать частью HTML5 и предлагать наиболее эффективные средства для двунаправленной связи в режиме реального времени между веб-сервером и браузером (или другими клиентами).

Кроме того, что будет идеально (но легче для понимания студентами)) архитектура выглядит так.Допустим, у вас есть 30 одновременно работающих пользователей - каждый из них подключается к серверу через веб-сокеты, а сервер объединяет / объединяет все их запросы в один, а затем возвращает объединенный файл (своего рода минимальный JSON или даже просто координаты).) для каждого подключенного пользователя?

Звучит так, что вам, вероятно, следует где-то хранить текущее состояние, и при начальной загрузке приложения отображать это состояние.Затем используйте инфраструктуру реального времени для отправки дельт в этом состоянии или, если это рисунок на холсте, просто информация о нарисованной линии и т. Д. И информация о том, кто ее нарисовал.

Будетwebsockets и (я предполагаю) холст сможет принять это?Так что все еще выглядит быстро?Существуют ли (jQuery-подобные) библиотеки JS, чтобы сделать нашу жизнь проще - или вы думаете, что это слишком сложно для двухнедельного проекта летней школы?

Совместное рисование в режиме реального времени наиболееопределенно достижимо, и было создано несколько примеров этого.A google открывает множество возможностей.

Если эта технология является совершенно новой для вас, и вы бы предпочли сконцентрироваться на создании приложения для совместной работы, я бы рассмотрел возможность использования службы для вашего приложения.вместо того, чтобы изучать, как устанавливать и настраивать или даже кодировать свою собственную инфраструктуру (я говорю это не просто потому, что работаю на такой сервис. Я, честно говоря, считаю, что это имеет смысл).