Добавление чата в приложение Rails с помощью Twilio Programmable Chat

Есть многое, что нужно учитывать при создании чата, помимо простого обмена сообщениями. Это история чата, индикаторы набора текста, квитанции о прочтении и интеграция с программным обеспечением третьих лиц. Кроме того, необходимо обеспечить работу всего этого на устройствах как с веб-, так и с мобильной версией. Twilio Programmable Chat — это набор API и SDK, которые предоставляют все необходимое для создания кроссплатформенного обмена сообщениями. В этом уроке мы начнем работать с Programmable Chat, добавив простой чат в приложение Rails за пять шагов: аутентификация пользователя в Rails, настройка учетных данных Twilio, создание токена для клиента, добавление элементов управления чатом в представление Rails и подключение Programmable Chat с помощью JavaScript SDK. Предполагая, что у вас есть некоторый опыт работы с Rails и JavaScript, этот урок займет примерно 20 минут. Чтобы начать, зарегистрируйтесь для получения бесплатного аккаунта Twilio. Хотя есть некоторые случаи использования анонимного чата, обычно вы хотите знать, с кем вы говорите с разумной степенью уверенности. Поэтому мы начнем с предварительно созданного приложения Rails, которое требует от пользователя создать аккаунт и войти в систему. Существует много отличных уроков по аутентификации Rails, поэтому мы быстро пройдем этот шаг. Чтобы начать, клонируйте стартовое приложение и выполните стандартную процедуру запуска приложения Rails (вам понадобится PostgreSQL для этого). Как только ваше приложение Rails запущено, посетите localhost:3000 и создайте аккаунт. Затем посмотрите это видео, которое проведет вас через приложение и код, который его питает: Чтобы суммировать, ключевые элементы являются: session[:user_id] отслеживает, вошел ли пользователь в систему, users_controller и sessions_controller устанавливают session[:user_id], authenticate! в application_controller перенаправляет на экран входа, если sessions[:user_id] равен nil, current_user в application_controller возвращает вошедшего пользователя. Добавьте два гема в ваш Gemfile: Установите ваши гемы: Создайте файл с именем config/env.yml и вставьте в него эти четыре строки в качестве заготовок для учетных данных, необходимых для аутентификации с Twilio: Вот где вы можете найти каждое из этих значений: **Account SID** Перейдите на панель управления Programmable Chat. В правом верхнем углу нажмите *Show API Credentials*. Скопируйте Account SID и добавьте его в первую строку env.yml. (Вы *не* будете использовать Auth Token. Больше об этом ниже.) **IPM Service SID** Каждое приложение Twilio Programmable Chat имеет свои собственные каналы, разговоры, историю сообщений и участников. Вам понадобится IPM Service SID для определения, какое приложение IP Messaging вы хотите использовать. На панели управления IP Messaging Programmable Chat нажмите *Manage Your Programmable Chat Service Instances*, создайте новый IPM Service, затем скопируйте его Service ID в env.yml. **API Keys** Если вы работали с Twilio раньше, вы, возможно, привыкли копировать AUTH_TOKEN вместе с ACCOUNT_SID. Проблема с одним аутентификационным токеном заключается в том, что если он будет скомпрометирован (например, вы случайно коммитите его в публичный репозиторий), то вам придется изменить его во всех приложениях Twilio. Вместо этого мы создадим набор API-ключей для использования этим приложением только. Посетите панель управления API-ключами, создайте набор API-ключей и скопируйте их значения в env.yml. Перезапустите Rails, чтобы значения в env.yml вступили в силу. Мы будем использовать эти учетные данные для создания безопасного токена, который можно передать клиенту. Почему вам нужен безопасный токен? Ну, позвольте мне рассказать вам…. Представьте себе эксклюзивный клуб, который позволяет вход только членам и друзьям членов. Члены показывают членскую карту и шепчут пароль привратнику, чтобы попасть внутрь. Но что, если они хотят отправить друга в клуб в их отсутствие? Было бы неразумно просто дать этому другу их карту и пароль. Вместо этого клуб дает членам токены, которые они могут затем дать друзьям для одноразового доступа. Аутентификация клиента происходит примерно так же. Поскольку данные на стороне клиента могут быть видны любым, кто знает, как открыть консоль JavaScript, мы не хотим передавать наши учетные данные Twilio напрямую в браузер (вы действительно хотите дать *Интернету* доступ к вашему аккаунту Twilio?) Вместо этого мы создадим временный токен доступа и передадим его клиенту. Клиент затем передает его в Twilio для выполнения аутентифицированного запроса API. Добавьте маршрут в config/routes.rb: В консоли создайте контроллер tokens: В tokens_controller.rb нам нужно: before_filter authenticate!, который мы видели на шаге 1, метод для получения токена от Twilio, который использует Ruby-гем, наши учетные данные, тайм-аут и имя пользователя. Замените все в tokens_controller.rb на: Теперь мы не хотим дать этому токену полный доступ. Нам нужно быть конкретными о том, какой пользователь получает доступ и на каком устройстве он находится? Это сочетание пользователя и устройства называется «точкой окончания». Какой Programmable Chat-сервис является целевым для этого токена? Добавьте метод для создания «гранта» для определения точки окончания и Programmable Chat SID. Точки окончания не могут иметь пробелов в них, поэтому мы заменим любые пробелы в имени пользователя на подчеркивания. Пост-маршрут, который мы создали в routes.rb, ожидает действие create. Это действие будет: создать токен, создать грант, добавить грант в токен, вернуть токен в виде JSON Web Token (JWT). Посетите localhost:3000 снова и войдите в систему. Откройте консоль JavaScript и вставьте: Теперь, когда наш клиент может безопасно общаться с Twilio, мы можем добавить функциональность чата. Нам нужно добавить два элемента пользовательского интерфейса в наше представление accounts: поле для сообщений чата, поле ввода для набора новых сообщений. Замените все код в app/views/accounts/show.html.erb на: Добавьте этот CSS в app/assets/stylesheets/accounts.scss, чтобы сделать поле сообщений прокручиваемым: Обновите страницу учетной записи, чтобы убедиться, что ваше поле сообщений и поле ввода есть. Ниже последнего включения JavaScript в app/views/layouts/application.html.erb включите JavaScript SDK Twilio Programmable Chat и еще не созданный chat.js. Для того, чтобы избежать отклонения от темы урока: создайте каталог public/javascripts, создайте файл с именем chat.js в нем, в chat.js добавьте эту функцию для печати в поле сообщений: Перезагрузите localhost:3000/account. Откройте консоль JavaScript и введите printMessage(«Hello Chat!»). Если сообщение появляется в поле сообщений, вы готовы продолжить. Последний шаг! Мы будем использовать JavaScript SDK Twilio Programmable Chat для: присоединения или создания канала чата, отправки и получения сообщений в этом канале. Извините за большие блоки кода, которые вот-вот последуют. Я попытался разбить их несколько раз, но отступы и пунктуация JavaScript сделали его намного проще просто вставить все в один кусок. Ниже функции printMessage в chat.js добавьте функцию jQuery ready, где будет жить остальной код этого урока. Здесь мы создаем переменные для канала и имени пользователя. Затем мы создаем функцию setupChannel(), которая: определяет переменные для канала и имени пользователя, присоединяется к каналу, а затем печатает сообщение, говорящее, что пользователь присоединился к каналу, привязывает действие к событию messageAdded (которое исходит от SDK Twilio) для печати сообщения на экран. Затем мы будем слушать поле #chat-input для кода клавиши 13 — это клавиша Enter. Когда наша привязанная функция услышит это, мы отправим значение этого поля в канал в качестве сообщения. Вот код: Если кажется, что что-то отсутствует в этой функции setupChannel(), вы правы. Нам нужно получить наш канал из SDK Twilio Programmable Chat. Для этого мы: используем асинхронный запрос JSON для получения токена от нашего сервера токенов, используем токен для создания accessManager и messagingClient. С помощью этого messagingClient мы можем: найти канал чата, если канал существует, сохранить его в нашей переменной chatChannel и запустить еще не созданную функцию под названием setupChannel, если он не существует, создать канал, прежде чем делать эти два дела. Внутри $(function() ниже того последнего куска кода, который вы вставили для прослушивания нажатия клавиши, вставьте этот блок: Откройте два браузера (возможно, в режиме Инкогнито) и общайтесь на здоровье! Мы только что коснулись поверхности того, что возможно с Programmable Chat. На самом деле, полная мощь Twilio Programmable Chat заключается в том, что, помимо предоставления способа передачи сообщений в режиме реального времени, он также дает вам историю чата, индикаторы набора текста, квитанции о прочтении и REST API для интеграции с решениями третьих лиц. Также существуют SDK для приложений Android и iOS. Чтобы узнать больше, посетите документацию API Twilio Programmable Chat. Если у вас есть какие-либо вопросы или вы построите что-то крутое с Programmable Chat, я бы хотел услышать об этом. Напишите мне на gb@twilio.com или в Twitter @greggyb.