Qt WebChannel Application QML ChatClient

ChatClient QML fournit un client QWebChannel simple, implémenté à l'aide de JavaScript et de QML.

Implémentation d’un client Web Channel en QML

Cet exemple montre comment utiliser les éléments de base de l’implémentation JavaScript du client WebSocket ( QWebChannel), notamment la connexion aux signaux (newMessage), l’appel des slots (sendMessage) et la gestion des modifications de propriétés (userList).

Le client initialise une connexion WebSocket ( WebSocket ) vers le serveur de chat sur le port 12345 de localhost. Lorsque le WebSocket s’ouvre, un objet WebChannel est créé, prenant le WebSocket comme premier argument et une fonction de rappel comme deuxième argument. Lorsque la fonction de rappel est appelée, le client reçoit un objet nommé ` chatserver`, contenant tous les signaux, slots et propriétés nécessaires à la mise en œuvre d’un client de chat. La fonction de rappel connecte ` userListChanged`, ` newMessage` et ` keepAlive ` à l’objet ` chatserver ` à l’aide de fonctions distinctes gérant ces signaux, puis elle appelle ` show ` sur ` loginWindow`.

L'Window, dont l'identifiant est loginWindow, gère la procédure de connexion. Il contient un LoginForm défini dans LoginForm.ui.qml. Lorsque vous appuyez sur le bouton, il appelle la fonction login sur l'objet chatserver en lui passant le nom d'utilisateur et une fonction de rappel en arguments. Cette fonction de rappel gère à la fois les cas de réussite et d'échec de la connexion.

Une fois connecté, le client utilise un MainForm, défini dans MainForm.ui.qml, dont l’identifiant est mainUi, pour publier des messages via le slot sendMessage, lire les messages via le signal newMessage et afficher les noms de tous les utilisateurs connectés via la propriété userList. De plus, le client répond au signal keepAlive du serveur afin que ce dernier puisse détecter les clients déconnectés et les supprimer de la propriété userList.

Le client est compatible avec l’exemple ChatServer disponible sur Qt WebChannel .

Projet d'exemple sur code.qt.io