Начало работы с Socket.io в Swift для iOS

WebSockets — это мощный протокол для обмена данными в реальном времени на основе событий. Socket.io упрощает работу с WebSockets на iOS с использованием Swift по сравнению с самостоятельной реализацией всех базовых компонентов.

Давайте продемонстрируем, как работать с клиентской библиотекой Socket.io для Swift, создав приложение для мониторинга статуса телефонных звонков Twilio. Это приложение будет похоже на приложение, созданное в другом руководстве по началу работы с Socket.io на веб-платформе с использованием JavaScript.

— Node.js и npm версии 4.0 или выше, установленные на вашем компьютере для веб-сервера

— Xcode 8.0 или выше и Swift 3.0 или выше

Чтобы узнать, какая версия Swift у вас установлена, введите следующую команду в терминале:

— Аккаунт Twilio для запуска финальной версии нашего кода — зарегистрируйтесь бесплатно

Начните с клонирования или загрузки ZIP-файла этого стартового репозитория, который содержит два проекта:

— предварительно настроенное веб-приложение и сервер на Node.js и

— iOS-приложение с заранее настроенным storyboard, содержащим `UITableView`, который мы будем использовать для отображения получаемых данных.

Чтобы клонировать репозиторий, откройте терминал, перейдите в директорию, где вы хотите разместить проект, и введите следующие команды:

После того как вы клонировали репозиторий или распаковали ZIP-файл, установите зависимости для Node.js-приложения:

После установки зависимостей откройте файл `index.js` и добавьте в конец следующий новый маршрут:

Этот маршрут использует Socket.io для отправки события с именем «test». Чуть позже мы настроим наше iOS-приложение для получения этого события. Пока запустите сервер, введя следующую команду в терминале, и оставьте его работать для дальнейшего тестирования:

Теперь сделаем наш веб-сервер доступным через интернет, чтобы мы могли запустить наше приложение. Это необходимо, потому что iOS требует, чтобы приложения, которые хотят делать запросы к внешним сервисам, делали это через HTTPS. Нам также понадобится общедоступный URL позже для тестирования звонков, совершаемых с помощью Twilio REST API. Для этого мы будем использовать инструмент под названием ngrok.

Скачайте ngrok и запустите его на порту 3000 в новом окне терминала с помощью следующей команды:

Запомните случайно сгенерированный URL, который предоставит вам ngrok, так как он нам скоро понадобится. Перейдите по этому URL и добавьте «/test» в конец, чтобы увидеть новый маршрут, который мы добавили в `index.js`.

Теперь установите зависимости:

CocoaPods связывает зависимости нашего проекта, создавая новую рабочую область Xcode. Чтобы Xcode загружал эти зависимости, откройте рабочую область с помощью файла `CallStatusDashboard.xcworkspace` вместо файла проекта Xcode:

Давайте проверим, что pod Socket.io был добавлен в наш проект, импортировав его в `ViewController.swift`:

Соберите проект, и должно появиться сообщение «Build Successful».

Теперь мы готовы начать получать события Socket.io с нашего сервера.

Создайте новый Swift-файл под названием `SocketIOManager.swift` и добавьте в него следующее:

Этот код создает класс Singleton, чтобы мы могли повторно использовать функциональность Socket.io во всем приложении. Функция `init` тестирует наше соединение сокета, подписываясь на событие «test», отправляемое нашим сервером.

*Не забудьте заменить URL сокета на URL, сгенерированный ngrok.*

Перейдите в `AppDelegate.swift` и используйте `SocketIOManager` для подключения к серверу, когда приложение становится активным, и отключения от него, когда приложение переходит в фоновый режим или завершает работу. Для этого добавьте следующие две строки в соответствующие места в `AppDelegate.swift`:

Запустите приложение и откройте в браузере http://localhost:3000/test. Посещение этого URL должно привести к тому, что Node-приложение отправит событие в наше iOS-приложение, которое выведет полученный массив данных в консоль Xcode:

Теперь мы готовы воссоздать веб-приложение из моего другого руководства по Socket.io в нашем iOS-приложении.

В предыдущем посте объяснялось, как отслеживать телефонные звонки, отправленные с помощью Twilio API, в реальном времени с использованием событий изменения статуса звонка. С их помощью вы можете настроить вебхук для получения запроса всякий раз, когда меняется статус ваших телефонных звонков. Это уже реализовано в `index.js`.

Обновления статуса звонков в реальном времени дают нам отличную возможность поработать с WebSockets.

Когда статус телефонного звонка меняется, наш сервер отправит событие, которое получит создаваемое нами iOS-приложение. После этого мы обновим `UITableView` в нашем приложении, чтобы отобразить новый статус этого звонка.

Нам понадобится структура данных для представления телефонных звонков. Давайте используем для этого `struct`. Создайте новый файл под названием `PhoneCall.swift` и добавьте следующий код:

С помощью этой структуры мы можем создать массив, позволяющий хранить все `PhoneCall`, которые мы хотим отобразить в нашем `UITableView`. Замените глобальный массив строк `String` внутри класса `ViewController` в `ViewController.swift` на следующий:

И замените код внутри `tableView(_:cellForRowAt:)` на следующий:

В `SocketIOManager.swift` добавьте следующий код в конец функции `init`. Это позволит слушать события `status update`, отправляемые из Node-приложения, аналогично событию `test`, которое мы создали ранее. При получении этого события мы передадим сообщение остальной части кода с помощью `NSNotificationCenter`:

Нам нужно изменить `ViewController.swift`, чтобы получать это обновление статуса и обновлять `UITableView`. Если это новый звонок, мы добавим его в массив `phoneCalls`. Если это существующий звонок с обновленным статусом, мы обновим соответствующий элемент массива.

Создайте новую функцию в `ViewController` под названием `handleCallStatusUpdateNotification` со следующим кодом:

Далее подпишитесь на уведомление и установите нашу предыдущую функцию в качестве обработчика, добавив этот код в конец `viewDidLoad`:

Наконец, чтобы протестировать всё, вам понадобится телефонный номер Twilio. Вы можете купить его здесь или просто использовать пробный номер, который прилагается к вашему аккаунту Twilio. При использовании пробного номера вы можете звонить только на подтвержденные вами номера. Однако это не должно стать проблемой на данный момент.

Откройте `makeCall.js` в корневой директории нашего проекта и замените все соответствующие значения на ваш номер телефона Twilio, ваш личный номер телефона и ваш URL ngrok:

Теперь запустите приложение и введите следующее в терминале, чтобы увидеть телефонный звонок в таблице вашего iOS-приложения:

Это использует Twilio REST API, чтобы ваш телефон получил звонок с вашего номера Twilio. Вы должны увидеть, как статус звонка отображается в вашем iOS-приложении и меняется, когда вы отвечаете и вешаете трубку.

Попробуйте несколько раз, чтобы увидеть, как это работает!

Теперь вы можете добавлять события в реальном времени для обмена данными между клиентом и сервером в любые создаваемые вами приложения. Если вы хотите узнать, как создать похожее приложение, но в веб-браузере, ознакомьтесь с этим руководством по ReactJS, которое также использует Socket.io для мониторинга статуса телефонных звонков.

Жду с нетерпением, какие классные проекты вы создадите. Ознакомьтесь с клиентом Twilio для iOS и документацией для вдохновения.

Если у вас есть вопросы, обращайтесь:

— Email: Sagnew@twilio.com

— Twitter: @Sagnewshreds

— Github: Sagnew

— Twitch (стримы живого кодинга): Sagnewshreds