Лабораторная работа № 6. Работа с сетевым стеком

Студент: Кривошеин Максим Константинович, группа ИС-2301
Дисциплина: Разработка мобильных приложений, СПбГЭУ
Платформа: ОС Аврора 5.2 (Aurora SDK 5.2.0.180), Qt 5.6, C++ / QML (Sailfish Silica)

Задание

Написать приложение, которое взаимодействует с echo-сервером (HTTP — https://httpbin.org или https://beeceptor.com/resources/http-echo/, WebSocket — https://echo.websocket.org/) и выводит результат в виде текста на экран. Каждый запрос — на отдельном экране по своей кнопке:

  1. HTTP GET Request.
  2. HTTP POST Request — JSON Payload.
  3. HTTP POST Request — получение произвольной картинки и отображение её на экране.
  4. WebSocket — отправить JSON и получить ответ обратно.

Плюс экран выбора, итого пять экранов.

Реализация

Экран Файл Запрос
Выбор запроса qml/pages/MainPage.qml список из четырёх запросов
HTTP GET qml/pages/GetPage.qml GET https://httpbin.org/get?student=krivoshein&group=IS-2301&lab=6, адрес можно изменить
HTTP POST · JSON qml/pages/PostJsonPage.qml POST https://httpbin.org/post с редактируемым JSON; отдельно выводится JSON, который вернул сервер (поле json ответа httpbin)
HTTP POST · картинка qml/pages/PostImagePage.qml POST https://quickchart.io/chart: в теле — JSON с описанием графика со случайными данными и типом, в ответ — PNG, который сразу показывается на экране
WebSocket · JSON qml/pages/WebSocketPage.qml подключение к wss://echo.websocket.org, отправка JSON-сообщения, журнал отправленных и полученных сообщений

Сетевая часть написана на C++ и зарегистрирована в QML как модуль ru.krivoshein.NetworkDemo 1.0:

  • src/httpclient.{h,cpp} — HttpClient на QNetworkAccessManager: get(), postJson(), postForImage(). Проверяет JSON перед отправкой, считает время ответа, прерывает запрос через 20 секунд, сообщает код HTTP, тип содержимого и текст ответа или ошибку.
  • src/networkimageprovider.{h,cpp} — QQuickImageProvider: картинка, полученная POST-запросом, отдаётся в QML по адресу image://network/<id>.
  • src/echosocket.{h,cpp} — EchoSocket на QWebSocket: подключение и отключение, состояние соединения, отправка JSON, сигналы об отправленных и полученных сообщениях.

Echo-сервисы httpbin.org не возвращают картинки на POST-запрос, поэтому для третьего экрана выбран сервис quickchart.io: он получает JSON методом POST и отвечает PNG-изображением. Каждый запрос строит новый случайный график, поэтому картинка каждый раз другая.

Ответы в формате JSON выводятся с отступами. В .desktop-файле указано разрешение Permissions=Internet, в .spec — зависимости Qt5Network и Qt5WebSockets.

Структура проекта

ru.krivoshein.NetworkDemo.pro        проект qmake (QT += network websockets)
src/main.cpp                         регистрация типов и поставщика картинок
src/httpclient.h, httpclient.cpp     HTTP-клиент
src/echosocket.h, echosocket.cpp     WebSocket-клиент
src/networkimageprovider.h, .cpp     поставщик картинок для QML
qml/NetworkDemo.qml                  ApplicationWindow
qml/components/ResponseView.qml      вывод кода ответа, ошибки и тела ответа
qml/pages/MainPage.qml               экран выбора
qml/pages/GetPage.qml                HTTP GET
qml/pages/PostJsonPage.qml           HTTP POST с JSON
qml/pages/PostImagePage.qml          HTTP POST с получением картинки
qml/pages/WebSocketPage.qml          WebSocket
rpm/ru.krivoshein.NetworkDemo.spec   описание RPM-пакета

Скриншоты

Выбор GET POST · JSON POST · картинка WebSocket
Выбор GET POST JSON POST картинка WebSocket

Лицензия

MIT, см. LICENSE.