[ЧАСТЬ-I] GSoC 2022 | Ракета.Чат

Этот блог знаменует собой начало серии статей, которые я собираюсь написать, рассказывая о своем путешествии по программе Google Summer of Code, с некоторыми советами, знаниями и некоторыми дизайнерскими решениями, которые мы (я и мой наставник) принял форму Проект EmbeddedChat.

Что такое встроенный чат?

Думайте о EmbeddedChat как о мини-версии Rocket.Chat, упакованной в модуль npm, вот так просто!

Если вам нужно определение вики, EmbeddedChat — это полнофункциональный компонентный узел React для приложения RocketChat, полностью настраиваемый, расширяемый и гибкий для использования. Он тесно связан с сервером RocketChat с использованием Rocket.Chat nodejs SDK и его UI с использованием системы дизайна Fuselage Design System от RocketChat.

Почему встроенный чат?

Он предоставит бизнес-решение для каждого сектора тех, кто хочет интегрировать / встроить приложение чата в свое собственное приложение. Дело в том, что будь то Google Meet, игры, в которые вы играете, или платформы электронной коммерции, которые вы создаете, вы в какой-то момент подумали, что мне действительно нужно поболтать и спросить другого человека для более подробной информации (в случае магазина, это это причина, по которой люди по-прежнему предпочитают ходить в офлайн-магазин, а не покупать онлайн) или вы хотите общаться в играх и сохранять их для дальнейшего использования. У вас нет решения… До настоящего времени!

Rocket.Chat теперь стремится предоставить вам надежное решение, предоставляя простой компонент реагирования, который вы можете встроить практически в любое приложение. Благодаря надежной серверной части, связанной с упрощенным, но интуитивно понятным пользовательским интерфейсом Fuselage Design System, позвольте нам побеспокоиться о настройке функций для вас. Вы можете просто сделать,

<RCComponent />

предоставьте свой собственный реквизит, и вы готовы к работе (в течение нескольких минут)!

Думали, мы остановились на этом?

Неа! Мы предоставим вам RCAPIWrapper, который будет внешним SDK для RocketChat, который можно использовать в любой среде или даже в стандартном JavaScript.

EmbeddedChat до сих пор (1 июля)

Инициализация библиотеки компонентов React

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

Как создать и опубликовать библиотеку компонентов реакции (не как в сборнике рассказов)

Ответная реакция

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

Подключение к серверу Rocket.Chat и возможность обмена сообщениями в реальном времени

Возможно, вы имеете некоторое представление о функциях обмена сообщениями в реальном времени или слышали о веб-сокетах или сторонних поставщиках, таких как pusher, которые предоставляют нам функции для установления соединений в реальном времени. Масштабирование этих типов API требует больших усилий, и Rocket.Chat справился с этим. У него есть собственный API, построенный поверх MeteorJS, и концепция Realtime API, которую они значительно усилили за последние 7 лет.

Компонент EmojiPicker

Rocket.Chat использует эмодзи джойпикселей, и уже не так много библиотек npm поддерживали это. Но, к счастью, я нашел классную комбинацию, которую я мог использовать, чтобы предоставить джойпиксельные смайлики здесь, и я использовал ее. Нужно уметь гуглить!

Но вот главная часть! Мы подумали про себя, что нам действительно нужно анализировать смайлики в окне сообщения, потому что это улучшит UX и предоставит мобильным пользователям возможность использовать свой собственный набор смайликов. Мы получили унифицированное свойство из пакета средства выбора смайликов, которое представляет собой 5-буквенный код, который можно преобразовать в объект HTML, встроив его между &#x‹unicode›; Вы можете проверить это « здесь".

Тем не менее, мы просто использовали состояние для управления значением сообщения, которое в конечном итоге было строкой. Вопрос заключался в том, как мы могли разобрать это внутри поля ввода? Да, я думаю, опасноSetInnerHtml был вариантом, но мы немного исследовали и, наконец, выбрали лучший способ, с лучшим пакетом под названием he, который используется для кодирования и декодирования объектов HTML.

На этом история закончилась?

Неа. Смайлики с флагами ломались, потому что пакет давал нам два юникода. Мы с моим наставником устроили мозговой штурм во время нашей еженедельной встречи, мы обсудили возможности и то, как преобразовать два юникода в флаг! Затем, после тщательного изучения кодировки UTF-8, мы нашли способ. Если вы столкнетесь с этим, просто знайте, что смайлики с флагами представляют собой комбинацию двух юникодов. Эти два юникода представляют собой буквы, обозначающие код страны. Вы определенно можете использовать подход, при котором вы сохраняете каждый юникод в объекте js и сопоставляете его, чтобы преобразовать его в собственный смайлик, или вы можете использовать String.fromCodePoint. Но я нашел гораздо более простой способ: просто разделить юникоды и вставить их между “ “, и, наконец, нам удалось заставить все смайлики работать с родными!

PR (объединены и пересматриваются)

[НОВОЕ] инициализировать проект и базовую настройку

NEW: шаблон выпуска и PR

УЛУЧШИТЬ: Оперативность

НОВИНКА: отправка и получение сообщений (путем oop)

Разбор смайликов в окне сообщения

В конец

Я начал поддерживать проект вики и со временем хотел бы представить полную сквозную документацию по всем функциям, которые мы создаем, включая обоснование принимаемых нами архитектурных решений. В ближайшие недели мы планируем создать систему Google SSO Auth, которая будет полностью связана со средой аутентификации RocketChat, а затем добавить функции API, такие как закрепление, пометка звездочкой и реакция на сообщения (с эмодзи).

Я также был выбран членом сообщества месяца (ИЮНЬ) в Rocket.Chat, и меня пригласили произнести несколько строк на их телеконференции. Он опубликован на YouTube на собственном канале Rocket.Chat. Было очень весело. Вы можете проверить это здесь: