Несколько недель назад, после запуска Twilio MMS, наша дружная команда разработчиков-евангелистов активно экспериментировала с этой новой технологией, создавая крутые проекты. От забавных усов до генератора GIF по запросу и аналога Instagram для любого телефона — тысячи людей уже создали смешные фотографии с помощью Twilio MMS.
Одним из первых запросов, которые мы получили, было желание делиться этими фотографиями на большом экране для просмотра всей аудиторией. Учитывая, что Рики, Кевин и Картер выпустили множество полезных руководств по Node.js, я решил освежить свои навыки JavaScript и попробовать решить эту задачу с помощью Express. Сегодня мы создадим потоковое фото, которое можно проецировать на стену и которое будет обновляться в реальном времени на основе MMS-сообщений, отправленных на номер Twilio.
Наш хак потокового фото в реальном времени будет состоять из двух компонентов: сервера на Node.js с использованием Express и клиента в веб-браузере. Пользователи будут отправлять сообщения на наш номер Twilio, что приведёт к отправке POST-запроса на наш Node.js-приложение с содержимым сообщения, включая ссылку на фотографию. Наше Node.js-приложение затем отправит URL клиенту с помощью socket.io, после чего клиент добавит изображение в фотогалерею Photobox.
Вот как это будет выглядеть в итоге:
Хотите сразу перейти к коду? Посмотрите репозиторий на GitHub. Хотите сначала увидеть это в действии? Разверните этот проект прямо сейчас на Heroku, используя кнопку ниже:
Для создания этого приложения потокового фото в реальном времени нам понадобятся несколько ингредиентов:
— Аккаунт Twilio — зарегистрируйтесь бесплатно здесь.
— Номер Twilio с поддержкой MMS — доступен в США и Канаде.
— Node.js 0.10.33
— Express 4.9.2
— body-parser 1.9.2
— Socket.io 1.1.0
— Модуль Twilio для Node.js 1.7.0
— Photobox — легкая CSS3 фотогалерея на базе jQuery.
— Хостинг с поддержкой WebSockets (например, Heroku, DigitalOcean, Linode и т.д.)
Начало работы
Давайте приступим к созданию этого хака. Сначала нам нужно настроить окружение для нашего Node.js-приложения. Мы можем использовать файл `package.json` для этого. Перейдите в директорию, из которой будет обслуживаться ваше Node.js-приложение, и создайте файл с именем `package.json`. Внутри определим зависимости нашего приложения:
Затем мы используем npm для установки зависимостей, выполнив команду в корне этой директории:
Далее нам нужно создать поддиректорию, где будет храниться файл `index.html`. Этот файл будет обслуживать наших пользователей для потокового фото. Он также будет содержать таблицы стилей и JavaScript-файлы для Photobox, элегантной jQuery фотогалереи от Яира Эвен-Ора, которую мы будем использовать для отображения полученных MMS от Twilio. Сначала создадим директорию:
Затем скачаем Photobox и поместим директорию проекта `photobox` в нашу поддиректорию `static`.
Наконец, нам нужно направить наш номер Twilio с поддержкой MMS на адрес, где размещено наше Node.js-приложение. Для этого перейдем на вкладку номеров в панели управления аккаунтом, затем выберем наш номер с поддержкой MMS. Укажем наш домен в поле URL запроса сообщений и добавим конечную точку для этого приложения: `/message`.
Теперь, когда наше окружение Node настроено, Photobox установлен и наш номер Twilio подключен, мы готовы приступить к созданию приложения. Примечание: если вы предпочитаете разрабатывать этот проект локально, рассмотрите возможность использования туннеля, такого как ngrok, чтобы позволить Twilio подключаться к вашему приложению. Вот отличное руководство о том, как начать.
Наш хак потокового фото в реальном времени будет состоять из двух компонентов — клиента и сервера. Сначала напишем сервер, который будет использовать фреймворк Express для Node.js. Начнем с создания файла `app.js`.
Сначала подключим все необходимые зависимости для нашего приложения.
Затем создадим объект `app`, создадим HTTP-сервер с этим объектом и расширим наш HTTP-сервер с помощью socket.io для эффекта потоковой передачи в реальном времени.
Далее настроим наше приложение для использования middleware body-parser, чтобы мы могли получать параметры, которые Twilio отправляет в POST-запросах, когда наш номер получает MMS. Также настроим приложение для использования поддиректории `static`, которую мы создали в разделе Начало работы, для обслуживания статических файлов. Наконец, чтобы упростить развертывание на PaaS-сервисах, таких как Heroku, проверим, установлена ли переменная окружения `PORT`, и сохраним это значение для использования нашим HTTP-сервером позже. Если `PORT` не установлен, будем использовать порт 3000.
Теперь нам нужно определить конечную точку, на которую мы указали наш номер Twilio в разделе Начало работы. Как мы уже упоминали, мы будем использовать конечную точку `/message` для получения POST-запросов, которые Twilio будет отправлять нашему приложению, когда наш номер получит текстовое сообщение. Мы проверим сообщение на наличие фотографий. Если они есть, отправим их клиенту веб-браузера с помощью socket.io. Если нет, уведомим пользователя о том, что фотографии в сообщении не были получены.
Когда наши веб-конечные точки готовы, нам нужно добавить немного кода, чтобы отправить уведомление клиенту веб-браузера о том, что он успешно подключился к нашему приложению через socket.io, и немного стандартного кода для запуска нашего приложения.
Вот и всё с сервером! Теперь давайте посмотрим, как все части собраны вместе.
Теперь перейдем к написанию клиента.
После завершения работы над сервером мы готовы написать клиент для веб-браузера. Сначала откроем `static/index.html` и создадим скелет нашей HTML-страницы. В ней мы подключим таблицу стилей для Photobox и включим JavaScript-файлы для неё же, jQuery и socket.io. Также создадим div с id `media_urls`, который будет служить контейнером DOM для нашей галереи Photobox.
Затем добавим основную часть клиента в теге `script` как последний элемент перед закрытием `