Как создать простые чат-приложения с помощью JavaScript, Node.js и Twilio

Twilio Chat упрощает добавление чат-функциональности в ваше приложение, беря на себя самые сложные детали, возникающие при создании чата в реальном времени. В этой статье мы шаг за шагом расскажем, как интегрировать Twilio Chat в ваше веб-приложение с помощью JavaScript. Для выполнения инструкций потребуется:

— Понимание HTML, JavaScript и CSS.

— Базовые знания Node.js и Express или аналогичного фреймворка.

— Установленные node, git и npm.

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

Для начала необходимо создать Chat Service в консоли Twilio. Если у вас еще нет аккаунта Twilio, зарегистрируйтесь бесплатно здесь. Затем в консоли создайте новую чат-службу и укажите её название.

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

— Пользователь: Уникальная сущность с идентификатором, которая может подключаться к чат-службе и отправлять сообщения другим пользователям.

— Сообщение: Сообщение представляет собой строку, используемую для передачи информации другим пользователям в системе.

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

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

— Приватные каналы не отображаются при просмотре пользователями. Присоединиться к ним можно только по приглашению или если администратор канала добавит пользователя.

— Участник: Пользователь в рамках канала называется участником.

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

После создания службы запишите её SID, который будет использоваться клиентским SDK чата для подключения к службе и обмена сообщениями между пользователями. Также потребуется API-ключ и секрет, которые будут использоваться для генерации токена доступа к Chat Service. Все клиентские SDK чата требуют действительный токен доступа для аутентификации и взаимодействия с чат-службой. Создайте новый API-ключ следующим образом:

— Нажмите ссылку «Назад» в боковом меню.

— Выберите меню «Инструменты», затем пункт «API Keys».

— На новой странице нажмите кнопку «Создать новый API-ключ».

— Введите название ключа и нажмите Enter.

Вы попадете на страницу с вашим API-ключом (SID) и секретом. Сохраните их в надежном месте, так как эти значения больше не будут доступны. Эта страница отображается только один раз.

Эти действия загрузят набор файлов с GitHub, содержащих HTML, CSS и серверный скрипт для обслуживания файлов и обработки HTTP-запросов.

Выполните команду `npm install` для установки пакета *express*, который включен в исходный код по умолчанию.

Теперь необходимо создать бэкенд-код, который будет генерировать и возвращать токен доступа фронтенду. Откройте терминал (или командную строку в Windows) и выполните следующую команду в директории `src` проекта:

В директории `src` откройте файл `server.js`. Он содержит предопределенный маршрут для обслуживания файлов из папки `public`. Следующим шагом будет определение маршрута, который будет предоставлять пользователям токен доступа на основе их идентификатора. Токен доступа используется клиентским SDK Twilio для взаимодействия с Chat Service. Мы сгенерируем этот токен с помощью библиотеки `twilio`, установленной на предыдущем шаге.

Для использования этого пакета добавьте ссылку на него в `server.js`.

Определите маршрут `/token` с необходимым кодом для генерации токена.

Инициализируйте объект `AccessToken` с необходимыми учетными данными, которые можно получить из панели управления, и API-секретом, сохраненным в надежном месте при создании API-ключа. Затем инициализируйте объект `ChatGrant` с SID вашей чат-службы и добавьте грант к экземпляру AccessToken, после чего верните сгенерированный токен клиенту. Обратите внимание на переменные, требующие ваших учетных данных из аккаунта. Замените их соответствующими значениями.

В клонированном репозитории Git уже есть файлы с содержимым в папке `src/public`. Если открыть файл index.js, можно заметить, что в заголовке подключены несколько скриптов и стилей. Два важных файла скриптов, на которые стоит обратить внимание, — это `index.js` и клиентский SDK Twilio Chat (https://media.twiliocdn.com/sdk/js/chat/v1.1/twilio-chat.min.js). Также добавлен микрошаблон, который будет использоваться как шаблон для сообщений в чате — техника, применяемая многими JavaScript-движками шаблонов.