Pusher и Twilio: Создаем функционал реального времени — это просто

Автор: | 24.07.2026
Нет комментариев

*Фил Леггеттер — разработчик-евангелист в Pusher, хостинговом сервисе для веб-приложений реального времени, позволяющем добавлять интерактивный контент в веб- и мобильные приложения. Он занимается разработкой и использованием технологий реального времени в вебе более 10 лет. Pusher — один из наших любимых API, и недавно мы встретили Фила на встрече, посвященной телефонии, в Сан-Франциско, где он продемонстрировал очень крутой хак с использованием Twilio и Pusher. *

*Мы попросили Фила поделиться тем, как он создал свое приложение Pusher и Twilio, и ниже он написал потрясающее руководство о том, как создать веб-приложение реального времени с помощью Twilio. *

Несколько недель назад я выступал на встрече Telephony Meetup в Сан-Франциско. Поскольку я работаю в Pusher, мой фокус — на веб-технологиях реального времени и том, как они могут добавить ценности веб- и мобильным приложениям, а не на телефонии. Однако мой доклад должен был быть посвящен телефонии. Я знаком с британским разработчиком-евангелистом Twilio Стивом Грэмом, и он довольно часто использует Pusher в своих замечательных хаках.

Я подумал, что настало время ответить взаимностью и подготовить для своего доклада демонстрацию SMS-сообщений в реальном времени и уведомлений о входящих звонках с использованием Pusher и Twilio. Это показывает, что технологии реального времени в вебе и телефонии прекрасно работают вместе.

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

**Покажите мне код**

Прежде чем мы начнем, вам, очевидно, понадобится учетная запись Pusher, учетная запись Twilio и среда разработки Ruby, поскольку серверный код написан на Ruby с использованием Sinatra в качестве веб-сервера.

Файлы в приложении следующие:

— app.rb — основной код приложения Ruby

— config.yml

— Gemfile

— public/js/app.js — основной код JavaScript

— views/index.erb

Возьмите учетные данные из своей учетной записи Pusher и добавьте их в файл config.yml:

Добавьте следующее в Gemfile:

«`ruby

gem ‘pusher’

gem ‘sinatra’

gem ‘twilio-ruby’

«`

Выполните `bundle install`, чтобы получить зависимости приложения.

Теперь, когда основная структура готова, мы можем перейти к функциональности приложения.

Чтобы веб-браузер получал какие-либо данные от Pusher, сначала должно быть установлено соединение.

Давайте сначала создадим действие `index` в приложении Sinatra:

«`ruby

# app.rb

require ‘sinatra’

require ‘pusher’

require ‘json’

# …

get ‘/’ do

@app_key = Pusher.key

erb :index

end

# …

«`

В действии `index` мы присваиваем `app_key` Pusher свойству `@app_key`, которое затем доступно в представлении `index.erb`.

В представлении включите jQuery, библиотеку JavaScript Pusher, сделайте `app_key` доступным для JavaScript и включите `js/app.js`, где мы напишем остальную часть нашего JavaScript:

«`html

Pusher and Twilio Realtime SMS/Call Notifications

Realtime SMS/Call Notifications

SMS

Incoming Calls

«`

Запустите `ruby app.rb` и откройте веб-браузер по адресу `http://localhost:4567`, чтобы проверить, что приложение запущено.

В `app.js` создайте новый объект Pusher для установления соединения с Pusher.

«`javascript

// public/js/app.js

var pusher = new Pusher(‘YOUR_APP_KEY’, {

encrypted: true

});

var smsChannel = pusher.subscribe(‘sms’);

smsChannel.bind(‘sms_received’, function(data) {

$(‘#sms_list’).append(‘

  • ‘ + data.message + ‘

    • ‘);

    });

    var callChannel = pusher.subscribe(‘calls’);

    callChannel.bind(‘call_incoming’, function(data) {

    $(‘#call_list’).append(‘

  • ‘ + data.message + ‘

    • ‘);

    });

    «`

    Если вы хотите проверить соединение, вы можете либо привязаться к изменениям состояния соединения, использовать логирование `Pusher.log` или консоль отладки Pusher.

    Pusher использует каналы для фильтрации и маршрутизации данных. В этом приложении нас интересуют SMS-сообщения и телефонные звонки, поэтому мы подпишемся на два канала: один для SMS-сообщений и один для звонков:

    «`javascript

    // public/js/app.js (продолжение)

    var smsChannel = pusher.subscribe(‘sms’);

    smsChannel.bind(‘sms_received’, function(data) {

    $(‘#sms_list’).append(‘

  • ‘ + data.message + ‘

    • ‘);

    });

    var callChannel = pusher.subscribe(‘calls’);

    callChannel.bind(‘call_incoming’, function(data) {

    $(‘#call_list’).append(‘

  • ‘ + data.message + ‘

    • ‘);

    });

    «`

    В приведенном выше коде мы привязываемся к событиям на каналах. События — отличный способ привязать изменения пользовательского интерфейса к событиям приложения. Когда событие `sms_received` срабатывает на канале `sms`, мы добавляем новый `

  • ` в список **SMS**, а когда событие `call_incoming` срабатывает на канале `calls`, мы добавляем новый `
  • ` в список **Входящие звонки**. Просто!

    HTML для пользовательского интерфейса выглядит так:

    «`html

    Pusher and Twilio Realtime SMS/Call Notifications

    Realtime SMS/Call Notifications

    SMS

    Incoming Calls

    «`

    Итак, хотя это выглядит не очень красиво, это вся необходимая нам функциональность на стороне клиента. Но как нам проверить, что это работает?

    Легко! Используйте Pusher Event Creator, чтобы инициировать события.

    Теперь мы знаем, что клиентская часть работает, давайте перейдем к серверной части, начиная с Twilio.

    **WebHooks** — это отличный способ информировать веб-приложения о событиях по сети, в данном случае — через Интернет. Для Twilio существует множество очень удобных WebHooks для уведомлений о SMS и звонках. Для нашего приложения нам нужно получать уведомления о SMS-сообщениях и входящих звонках.

    **Примечание:** *При написании кода для обработки WebHooks локальное тестирование может быть сложным, поскольку WebHooks могут поступать из других сервисов в Интернете, и, следовательно, ваше веб-приложение должно быть общедоступным. Если вы знакомы с Twilio, вы, вероятно, уже знаете о localtunnel, а если нет, вы можете прочитать об этом подробнее в инженерном блоге Twilio.*

    На изображении выше вы увидите, что мы определили два конечных точки WebHook, которые должны вызываться при возникновении интересующих нас событий. Итак, давайте создадим два маршрута в нашем приложении Sinatra для обработки вызовов WebHook и выполним очень простую аутентификацию для вызовов WebHook; мы проверим, совпадает ли предоставленный `AccountSid` с нашим собственным `AccountSid` Twilio, который вы найдете в вашей панели управления Twilio:

    «`ruby

    # app.rb

    # …

    post ‘/twilio/sms’

    post ‘/twilio/call’ do

    # Basic authentication

    halt 401, ‘Unauthorized’ unless params[‘AccountSid’] == YOUR_TWILIO_ACCOUNTSID

    # …

    end

    # …

    «`

    Sinatra делает это слишком просто. Как вы увидите, мы определили `AccountSid` в config.yml.

    **Примечание:** *Если вы создаете приложение производственного качества, вам, конечно, следует также добавить полную аутентификацию WebHook Twilio в ваше приложение. Дополнительную информацию см. в документации по безопасности Twilio.*

    Все, что осталось сделать, — это опубликовать события с помощью Pusher. Сначала нам нужно настроить gem Pusher с нашими учетными данными, которые мы установили в config.yml.

    «`ruby

    # app.rb

    require ‘pusher’

    Pusher.app_id = YOUR_APP_ID

    Pusher.key = YOUR_APP_KEY

    Pusher.secret = YOUR_APP_SECRET

    «`

    А затем обновите действия маршрутов, чтобы извлечь необходимые значения из вызова WebHook и инициировать события на соответствующих каналах.

    «`ruby

    # app.rb

    # …

    post ‘/twilio/sms’ do

    # Basic authentication

    halt 401, ‘Unauthorized’ unless params[‘AccountSid’] == YOUR_TWILIO_ACCOUNTSID

    message = params[‘Body’]

    from = params[‘From’]

    Pusher.trigger(‘sms’, ‘sms_received’, { message: «SMS from #{from}: #{message}» })

    content_type :json

    { status: ‘success’ }.to_json

    end

    post ‘/twilio/call’ do

    # Basic authentication

    halt 401, ‘Unauthorized’ unless params[‘AccountSid’] == YOUR_TWILIO_ACCOUNTSID

    from = params[‘From’]

    direction = params[‘Direction’]

    Pusher.trigger(‘calls’, ‘call_incoming’, { message: «Incoming call from #{from} (#{direction})» })

    content_type :json

    { status: ‘success’ }.to_json

    end

    # …

    «`

    Если вы развернете свое приложение так, чтобы оно и конечные точки WebHook были общедоступны (например, на Heroku), и отправите SMS или позвоните по номеру, связанному с WebHook вашего приложения, вы мгновенно увидите уведомление в веб-приложении…

    Нет, серьезно, вот и все! Вы получили уведомления в реальном времени о входящих звонках и SMS-сообщениях, отображаемые в веб-приложении. Я же говорил вам, что Pusher и Twilio делают создание подобных приложений очень простым!

    Вы можете найти код для немного более стилизованной версии этого приложения на GitHub. Вы также можете попробовать его самостоятельно.

    Если вы создадите что-нибудь интересное с помощью Twilio и Pusher, или у вас возникнут вопросы, я буду рад услышать вас. Пожалуйста, напишите мне по адресу phil@pusher.com или отправьте твит @leggetter

    Related Posts