QML WebSockets: одновременный просмотр работы кода на нескольких устройствах

Если среда прототипирования, разработки и выполнения приложения различаются, то его интерфейс, взаимодействие с ним и функциональность также будут отличаться, что в конечном итоге потребует его адаптацию. Можно ли всё указанное выше производить в одной среде? При одноплатформенной настольной разработке это возможно, а при кроссплатформенной - нет. К тому же, каждая среда имеет свои преимущества:

С учётом этих моментов обозначим задачу конкретнее: редактировать QML-код в Qt Creator под Windows и просматривать его работу в Windows и на устройстве Android в реальном времени без перекомпиляции.

Для решения поставленной задачи выберем архитектуру клиент-сервер на QML веб-сокетах. Для получения универсального решения функциональные части будут выполнены в виде модулей, которые можно будет комбинировать друг с другом.

Просмотр работы кода будет осуществляться после его сохранения в файле целевой директории. Для этого необходимо создать модуль детектора, постоянно сканирующего целевую директорию на предмет изменения в ней количества файлов или их содержимого. При обнаружении изменений, что можно отследить по времени изменения файлов, детектор направляет содержимое целевого (или изменённого файла) серверу, который пересылает его всем подключенным к нему клиентам. Клиенты получают содержимое файла в виде строки, интерпретируют её в QML-код и произодят его вывод в свою рабочую область.

В QML есть поддержка websockets и таймера, но нет поддержки работы с файловой системой, поэтому модуль детектора пишется на Qt C++.

Интерфейс всех модулей будет выполнен на QML, для чего нужно создать три проекта Qt Quick Controls 2: детектор, сервер, клиент. В качестве основной среды - среды разработки - выберем Windows. В этом случае функции модулей будут следующими.

Порядок запуска модулей следующий: сначала запускается сервер, затем клиенты - детектор и два клиента - на Windows и Android.

В целях уменьшения количества приложений и запусков, детектор можно совмеcтить с сервером и клиентом. В этом случае будет два приложения - универсальное приложение на Windows и клиент на Android. Но это уменьшит гибкость системы.

Код проектов можно загрузить здесь, а мы рассмотрим некоторые его части.

В детекторе функциональность QML дополнена Qt C++. Создание связи между ними производится в следующей строке:

Здесь QML-свойству c именем fl присваивается значение ссылки на объект Qt-класса CheckFileList.

#include "checkfilelist.h"
#include <QDateTime>
#include <QDebug>
#include <QDir>

CheckFileList::CheckFileList(QObject *parent) :
    QObject(parent)
{
}

void CheckFileList::checkFiles(){

QString dirName = "C:/Users/1/Documents/WsServer";
    QDir dir(dirName);
    
    QFileInfoList dirContent = dir.entryInfoList(QStringList() << "*.*",
        QDir::Dirs | QDir::Files | QDir::NoDotAndDotDot);

QString changedFile = "";

for(int i = 0; i < dirContent.count(); i++){

QFileInfo fileInfo = dirContent.at(i);
         QDateTime fileDateTime = fileInfo.lastModified();
         QString fileName = fileInfo.fileName();

if ( mapFiles.contains(fileName) == false ){

mapFiles.insert(fileName, fileDateTime.toString());

} else {

if( mapFiles.value(fileName) != fileDateTime.toString()){

mapFiles[fileName] = fileDateTime.toString();
                changedFile = fileName;
                qDebug() << "Изменён " << fileName << mapFiles.value(fileName) << fileDateTime.toString();
             }
         }
    }

if( changedFile!= ""){

QFile file(dirName+"/Test.qml");

QByteArray data;

if (!file.open(QIODevice::ReadOnly))
            return;

data = file.readAll();

emit sendData(QString(data));
    }
}

Проверка изменений файлов производится по таймеру, что является универсальным, но неэффективным решением. Для рашения этой задачи предназначен класс QFileSystemWatcher, объекты которого формируют сигналы при обнаружении изменений в файловой системе.

При обнаружении изменений серверу передаётся содержимое одного и того же файла Test.qml. Метод Qt.createQmlObject возвращается немедленно и может не работать, если строка QML загружает внешние файлы QML, которые еще не были загружены. Если так и происходит, то рекомендуется использовать метод Qt.createComponent.

При использовании Qt.createComponent и блока Loader содержимое кэшируется и при следующем их вызове будут загружены данные не из указанного в их параметрах файла, а из кэша. Для очиски кэша используется методы clearComponentCache() или trimComponentCache() объекта QQmlEngine.

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtWebSockets 1.1

ApplicationWindow {

id: idRoot
    title: "Сервер"
    visible: true
    width: 600
    height: 400

ColumnLayout{

id: idColumns

Button{

id: idStop
            text: "Остановить таймер"

onClicked: {
                idTimer.stop();
            }
        }

Button{

id: idStart
            text: "Запустить таймер"

onClicked: {
                idTimer.start();;
            }
        }
    }

Timer{

id: idTimer
        interval: 1000
        repeat: true

onTriggered: fl.checkFiles()
    }

WebSocket {

id: idSocket
        url: "ws://127.0.0.1:3002"
        active: true

onStatusChanged: {
            if (idSocket.status == WebSocket.Error) {
                console.log('#', 'Ошибка ' + idSocket.errorString)
            } else if (idSocket.status == WebSocket.Open) {
                console.log('#', 'Сокет открыт')
            } else if (idSocket.status == WebSocket.Closed) {
                console.log('#', 'Сокет закрыт')
            }
        }
    }

Connections {

target: fl

onSendData: {

idSocket.sendTextMessage(text)
        }
    }

}

После создания свойства fl и присваивании ему ссылки на Qt-класс в файле main.cpp можно из QML обращаться к методам этого класса (в блоке Timer) и получать от него сигналы (блок Connections).

Работу сокетов практичнее отлаживать на локальном хосте, после чего можно будет перейти к проверке её работы в сети. Для этого нужно изменить значение свойства host сервера на ip-адрес компьютера, на котором он запускается (типа 192.168.x.x), указать этот адрес в свойстве url всех клиентов - Windows и Android, и скомпилировать последний для Android. При этом соединяемые устройства должны находится в одной cети (подключены к одному роутеру, проще говоря).

Если что-то не работает, то для начала проверяем доступность компьютеров в сети пингом их ip и настраиваем брандмауэр. Если всё в порядке, то можно попробовать наладить тестовую связь между веб-сокет сервером на Node.js и сокет-клиентом на JavaScript. Когда эта связка заработает, то к серверу на Node.js можно подключить клиента на QML для проверки работы последнего или к QML-серверу клиента на JavaScript.