Визуализация холста на стороне клиента или сервера HTML5 для приложения на доске node.js?

Question

Я думал, что небольшое веб-приложение для доски станет хорошим способом улучшить мои навыки работы с node.js и JavaScript.Я видел несколько в сети, что имеет смысл, так как кажется идеальным для такого типа стека.

Однако, подумав, я подумал о роли как клиента, так и сервера вэтот вид веб-приложения.Наткнувшись на node-canvas , я еще больше запутался.За что конкретно должны отвечать клиент и сервер?

Если сервер способен выполнять рендеринг на холст, должен ли он принимать и проверять входные данные от клиентов, а затем транслировать их всем другим подключенным пользователям через socket.io ?Таким образом, сервер сохраняет элемент типа master -canvas.Как только новый пользователь подключается, сервер просто должен вытолкнуть свой холст, чтобы клиент - приведя его в соответствие с тем, что было нарисовано.

Любое руководство по реализации - специфическое или философское - приветствуется.

Спасибо!

Answer 1

Я написал http://draw.2x.io,, который использует node-canvas (ранее node-cairo, который я написал сам) вместе с socket.io.

При разработке моего приложения клиент, по сути, выполняет генерацию штрихов из пользовательского ввода. Они, в свою очередь, обрабатываются абстракцией canvas, которая поддерживает подмножество операций и параметров, которые я определил сам. Если этот слой принимает любые входные данные, создаваемые модулями рисования, они также отправляются через socket.io на сервер.

На сервере у меня есть такой же вид обертывания слоя холста node-canvas. Таким образом, это будет реплицировать ввод от пользователя в памяти, что в конечном итоге позволит отправить изображение состояния новым клиентам. После этого штрихи - в ожидании проверки параметров / контекста серверным приложением - будут опубликованы для других подключенных клиентов, что будет повторять процедуру, описанную выше.

Answer 2

вот учебник по многопользовательской доске, написанный на javascript / html5, со всеми доступными источниками: http://www.unionplatform.com/?page_id=2762

это не узел на стороне сервера, но код на стороне клиента все еще может быть полезен, если выадаптировать его к бэкенду узла.

Answer 3

Компания, в которой я работаю, реализовала приложение для доски с node.js (но не использовала node-canvas) и socket.io. К сожалению, я не могу дать вам код или даже веб-сайт, так как он не был выпущен.

Ваша реализация кажется очень похожей. Клиенты подключаются к нашему серверу и обновляют сервер при каждом обращении к интерактивной доске (данные JSON с координатами (x, y)) через socket.io. Затем сервер обновляет остальных клиентов и сохраняет копию всех (x, y) координат, чтобы новые присоединяющиеся клиенты могли видеть то, что уже было нарисовано.

Удачи в вашем приложении. В последнее время я много программировал на node.js, и мне это нравится.