Добавляйте чаты точно так же, как вы добавляете видео с YouTube в свое веб-приложение.

Используя популярный сервер с открытым исходным кодом Rocket.Chat, вы можете добавить чат на свой веб-сайт или веб-приложение с минимальным кодом за несколько минут.

Этот метод известен как интеграция iframe.

Давайте углубимся.

Предоставление сервера Rocket.Chat

Существует множество способов, которыми вы можете подготовить сервер Rocket.Chat, чтобы использовать возможности добавления чатов в ваше веб-приложение. Я лично нашел установить его с помощью оснастки довольно быстро и легко. С помощью всего одной строки вы можете установить и начать использовать сервер Rocket.Chat на Ubuntu.

sudo snap install rocketchat-server

Перейдите к http://localhost:3000 и настройте Rocket.Chat.

Вы можете посетить раздел Установка и обновление, чтобы узнать о других методах подготовки.

Аутентификация пользователя для комнаты чата

После завершения настройки сервера Rocket.Chat вам необходимо установить конечную точку API URL и конечную точку iframe URL в администрировании › учетных записях › iframe для автоматической аутентификации пользователя на сервере Rocket.Chat, когда этот пользователь входит в ваше веб-приложение.

После настройки раздела iframe ваше веб-приложение должно обработать настроенную конечную точку URL-адреса API, чтобы вернуть loginToken на сервер Rocket.Chat. Это аутентифицирует пользователя, регистрируя этого пользователя через API входа Rocket.Chat, и позволяет Rocket.Chat установить личность пользователя.

Документы Аутентификация iframe объясняют термины и концепции аутентификации iframe, если вы хотите копнуть глубже. Вы также можете попробовать Пример аутентификации iFrame, поскольку он действительно помог мне, когда я впервые экспериментировал с интеграцией аутентификации iframe в своем веб-приложении.

Чаты с быстрой загрузкой?

Прежде чем встроить комнаты чата в свое веб-приложение, в x-frame-options необходимо указать домен веб-приложения, ограничивающий Rocket.Chat для загрузки iframe. только в указанном веб-приложении.

››› Примечание. Отключение параметра ограничить доступ внутри любого iframe является нарушением безопасности, которое позволяет загружать iframe в любом веб-приложении.

Вы можете перейти к администрированию › общим › ограничить доступ внутри любого iframe, чтобы установить параметры x-frame.

Теперь вы можете включить тег iframe в свой HTML-код, чтобы загрузить комнату чата.

<iframe
 src="http://localhost:3000/channel/general/?layout=embedded"
 title="myframe"
></iframe>

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

Теперь, когда в ваше веб-приложение добавлена ​​комната чата, для переключения между разными комнатами чата вы можете легко изменить src iframe, в который встроена комната чата. Но это приведет к повторному получению всего клиентского кода, а учитывая, что Rocket.Chat – это приложение, отображаемое на стороне клиента, это приведет к медленной загрузке чатов.

Я обнаружил способ, с помощью которого вы можете мгновенно переключаться между комнатами чата без какой-либо загрузки. Это включает в себя несколько изменений конфигурации в настройках интеграции iframe сервера Rocket.Chat, а затем, используя postMessage() в коде на стороне клиента, iframe contentWindow будет маршрут на стороне клиента в чат, что делает переключение мгновенным без какой-либо загрузки.

Чтобы внести изменения в конфигурацию, вам необходимо перейти к администрированию › общим › настройкам интеграции с iframe и установить >получить настройки источников в качестве домена вашего веб-приложения.

Теперь, когда сервер Rocket.Chat может прослушивать события из родительского веб-приложения, вы можете использовать postMessage() для передачи команды события GO в iframe. окно для перехода в другую комнату чата.

Например, если кто-то хочет переключиться на чат под названием «Вечерняя вечеринка», можно включить следующий код.

<div onClick={() => {
document.getElementsByTagName(“iframe”)[0].contentWindow.postMessage(
 { externalCommand: "go", path: "/channel/Evening-Party/?layout=embedded" },
 "http://localhost:3000"
 );
}}> Evening Party </div>

Иди попробуй!

Используя описанные выше три шага, мы можем легко добавить возможность чата в наши веб-приложения. Все благодаря Rocket.Chat.