Как стать автором
Обновить

Crawc.net — создание и стилизация своих медиачатов

Время на прочтение4 мин
Количество просмотров2.4K
Хочу рассказать о своем проекте. Это чат, а если точнее платформа медиачатов — это значит что тут можно создать и оформить свой однокомнатный чат с поддержкой медиа-контента в сообщениях и вставить его себе на сайт через iframe. Проект только недавно вышел из стадии Бета-версии.

Мне много раз говорили что я пишу велосипед, но такого на просторах рунета еще не было. Есть куча чатиков, но они не предоставляют и половины функционала Кравча, а выглядят невероятно хреново.

Чат Crawc

Я потратил огромное количество времени на дизайн и юзабилити, на то чтобы общение было максимально комфортным.

Пробежимся немного по функционалу


Это полуанонимный чат, не требующий верификации личности по телефону или email, как и другой личной информации — для регистрации достаточно указать желаемый логин и пароль, хотя при желании вы можете указать также ваш возраст, город проживания и кратко написать о себе — эта информация, вместе с вашим фотоальбомом будет отражаться в вашей анкете на сайте. Идея Кравча состоит в том чтобы объединить канал комнаты и ее чат в одной области видимости, в этой же области можно просматривать те самые анкеты, таким образом просмотр профилей или чтение канала не отвлекает вас от беседы. На канале можно опубликовать тематические новости, правила чата, медиа-контент и всё на что хватит фантазии, ведь в постах канала чат-комнаты поддерживается HTML (для пользователей далеких от веб-разработки добавлен небольшой визуальный редактор). Сообщения канала можно выделять цветом, вернее даже двумя — цвет текста и цвет фона, можно провести и более детальную настройку нажав Options и отредактировав стили своей комнаты вручную; там же можно изменить название комнаты и установить пароль для ее защиты.

Теперь про сам чат


В сообщениях допускается форматирование текста: таким образом можно выделить текст цветом, указать размер шрифта, вставить цитату, код и др. (Более подробную документацию по форматированию сообщений можно почитать тут или на канале основной комнаты чата). Кроме того в сообщениях, как уже говорилось выше, можно постить медиа-контент: вы можете его подтянуть как по ссылке, так и загрузив с диска. Поддерживаются голосовые сообщения. Есть два вида смайликов: небольшая колекция из шрифта fontello и огромная библиотека японских смайликов с jemoticons.com

Аниме-чат на Crawc

ЛС и Табы


Также, как и в соц. сетях, есть личные сообщения. В одном окне можно открыть несколько вкладок с чатами и несколько личных переписок (в прочем, их число в теории не ограниченно). Также на вкладке будет отображается количество новых непрочитанных сообщений. Переключаясь между табами у вас будет менятся хэш урла: по этому хэшу, написав его в адресной строке, можно попасть в определенный чат или определенную личную переписку (Например https://crawc.net/ru/#anime, https://crawc.net/ru/#emo, https://crawc.net/ru/#2X2FAN — по этим же ссылкам демонстрация возможностей пользовательских стилей). В личной переписке, как и в чат-комнате можно просматривать профиль собеседника — он будет справа от диалога. В аватарах пользователей, их фотоальбомах и в собственно самих сообщениях поддерживаются гиф-анимации (переписка с гифками выглядит довольно круто).

Emo-чат на Crawc

Дополнительно


Есть интерактивный поиск по чат-комнатам. Поддерживаются несколько языков (на данный момент только русский и английский). У пользователя кроме аватара может быть установлена и личная иконка из набора unicode, которая будет отображаться в списке пользователей чата. Это сделано для того чтобы пользователи могли объединяться в группы. Также на сайте можно создавать квесты в виде текстовых мини-игр и рисовать ascii- и pixel- арт.
Еще одна особенность: можно просматривать в масштабе сразу несколько изображений, причем в каждой вкладке они могут быть свои, что достаточно удобно.

Теперь о пиаре


Основную часть посетителей я набираю на яндекс-директе (получается где-то 0,5 рублей за клик). Но такие пользователи на долго не задерживаются, а в большинстве случаев не проходят и регистрации.

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

Небольшую часть посетителей мне дают статьи с вики-ресурсов, ссылки с Беона и форума Маулнет, кратковременные пиары в чужих чатиках.

Пиар на планете.ру, ютуб, инстаграм, пинтерест, новых посетителй мне не приносит, но я надеюсь что в будущем это положительно сыграет на SEO.

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

Выводы


  1. Пользователи не хотят регистрироваться потому что никого нет онлайн. Возможно следовало бы сделать чат без регистрации, но я много труда вложил в эту форму логина и быстрой регистрации, и у меня получилось весьма круто — я не хочу с ними расставаться. Другой вариант это напихать ботов, но не знаю как лучше организовать мультилогин в браузере.
  2. Возможно следует перенести часть загрузки чат-комнат на сторону сервера чтобы их могли индексировать поисковики. Сейчас подгрузка происходит средствами ajax, вызывая функцию addMessage(). Это было сделано таким образом в тех целях, чтобы входящие сообщения обрабатывались одной функцией, как при подгрузке истории комнаты, так и при отображении новых сообщений, получаемых через веб сокет. Как переносить эту функцию на сервер отдельно от клиента пока не ясно.
  3. Создание ярлыков в chrome оказалось очень удобным инструментом. Хотелось бы чтобы больше людей знали об этой возможности, которая позволяет перенести приложение из браузера на десктоп. Это очень удобно, я уже сделал такой ярлык для своего чата и скорее всего сделаю для других часто-посещаемых мной ресурсов. Кстати функция работает также в мобильном браузере.

Заключение


Делать обзор на код было бы весьма скучно, и я не знаю на чем стоило бы сфокусировать внимание. Для работы чата важен весь код целиком, нельзя выделить отдельные строчки, оставив без внимания другие. С кодом клиента вы можете ознакомиться по ссылке он пока находится в открытом виде. Код сервера веб-приложения я не публикую по понятным причинам. Хотя возможно в будущем я сделаю этот шаг в сторону open source, либо возьму да пропущу через обфускатор клиентские скрипты.

Ссылка на чат
Мой ЖЖ
Теги:
Хабы:
0
Комментарии18

Публикации

Изменить настройки темы

Истории

Работа

React разработчик
59 вакансий
Веб дизайнер
43 вакансии

Ближайшие события