Совместная интерактивная доска для рисования в HTML5/JS и websockets?

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

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

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

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

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

Ответ 1

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

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

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

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

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

Ответ 2

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

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

Ответ 3

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

Что касается самого чертежа, несколько популярных вариантов: processing, raphael и cakejs.

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

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

Ответ 4

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

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

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

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

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

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

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

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