Обзор моего представления

Демо Колланваса

На этой неделе я построил Колланвасплатформа для совместного рисования с вход не требуетсяи где каждый пользователь имеет доступ к Только один цвет.

🧠 Я создал Collanvas по разным причинам, одна из них мозговой штурм. Нарисуй следующую большую вещь!

🎨 Вы также можете использовать Collanvas для искусство. С одним цветом на человека каждый может сосредоточиться на определенной части дизайна.

🏆️ И, конечно же, вы также можете играть в игры на Колланвасе. С помощью функции чата играйте в «рисуй и угадывай» со своими товарищами, пока твоя энергия снова не наполнится.


Категория подачи: Wacky Wildcards


Обзорное видео



Используемый язык

JS/ТС/Node.js


Ссылка на код

Вся ваша команда, меняющая мир одним махом за раз.

С помощью интерактивной доски вы можете мозговой штурм 🧠, рисовать искусство 🖌️и даже играть в игры 🕹️ со своими товарищами по команде и друзьями. Вход в систему не требуется, и каждый пользователь имеет доступ к чат, платформа обмена сообщениями в режиме реального времени для всевозможных дискуссий. Выберите свое собственное имя пользователя, выберите свою собственную цветовую палитру и начните рисовать следующую большую вещь! 🚀

Домашняя страница Колланваса

Страница Collanvas Room с рисунком текста «Redis» и смайликом, а также 2 сообщения чата от разных людей, которые пишут «Woohoo!»

Обзорное видео

Я создал онлайн-холст для совместной работы, используя Redis в качестве основной базы данных

Как это работает

Как хранятся данные:

Модель данных об ударах

ДанныеОписаниеТип
ЦветЦвет штриха Нить (ШЕСТНАДЦАТ.)
ТолщинаТолщина штриха Число (от 1 до 10)
ТипЯвляется ли штрих пером или ластиком Нить («Перо» или «Ластик»)
ТочкиТочки, составляющие штрих{x: номер,y: номер}[]

Ключи генерируются как canvas:{roomKey}. Для каждого сгенерированного ключа данные сохраняются путем запуска ARRAPPEND команда вроде…


Дополнительные ресурсы/информация

Как я построил Collanvas? Давайте разбираться в технике.
Мы храним два документа JSON на комнату:

Модель базы данных ударов

Первый из них strokes, коллекция каждого штриха на холсте. Собираем цвет обводки, толщину, тип и набор точек, из которых она состоит. Тип определяет, находится ли штрих в режиме «пера» или «ластика».

Модель базы данных сообщений

Следующий и последний документ messages, массив всех отправленных сообщений в комнате. Мы собираем имя пользователя, цвет пользователя и содержимое сообщения.

Мы используем Redis Insight для проверки нашей базы данных и подтверждения нашей стратегии моделирования данных.

Событие

Но когда мы должны начать сохранять данные в этих документах? Ну, во-первых, когда пользователь поднимает указатель с холста, мы добавляем нарисованный штрих в хранилище Redis JSON с параметром arrAppend команда.

Сообщение о событии

Наконец, когда пользователь отправляет новое сообщение, мы сохраняем его мысли в документе с помощью той же команды.

Маршрут API

Хорошо, но зачем мы сохраняем все эти данные? Что ж, когда пользователь впервые присоединяется к комнате, мы начинаем с того, что считываем каждый штрих и сообщение из базы данных и вставляем их на свой веб-сайт.

Веб-сокеты

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

Redis PubSub

Но как заставить разные соединения сокетов взаимодействовать друг с другом? Redis решает эту проблему с помощью службы Publisher-Subscriber. Каждое соединение подписывается и публикует два собственных канала сообщений и штрихов, передавая всю информацию в браузер.

RedisInsight

С Redis Insightмы также можем видеть все сообщения, отправленные в связи с нашим проектом.

Вот и все! Ознакомьтесь с исходным кодом этого проекта в Хорошо документированный репозиторий Collanvas на Github. И не забудьте попробовать Redis в ваших собственных высокопроизводительных проектах с их новым ограниченным предложением.

И спасибо Redis и DEV за организацию отличного хакатона, который дал многим разработчикам возможность изучить новые технологии и поднять свои навыки на новый уровень!

Благодарю вас!