Qt WebChannel QML-Anwendung „ChatClient“

ChatClient QML bietet einen einfachen „ QWebChannel “-Client, der mit JavaScript und QML implementiert ist.

Implementierung eines Web-Channel-Clients in QML

Dieses Beispiel zeigt, wie Sie die grundlegenden Elemente der JavaScript-Client-Implementierung von QWebChannel nutzen können, beispielsweise das Anbinden an Signale (newMessage), das Aufrufen von Slots (sendMessage) und das Verarbeiten von Eigenschaftsänderungen (userList).

Der Client initialisiert eine WebSocket-Verbindung ( WebSocket ) zum Chat-Server am Port 12345 auf localhost. Sobald der WebSocket geöffnet ist, wird ein WebChannel-Objekt erstellt, das den WebSocket als erstes Argument und eine Callback-Funktion als zweites Argument übernimmt. Wenn der Callback aufgerufen wird, erhält der Client ein Objekt namens „ chatserver “, das alle notwendigen Signale, Slots und Eigenschaften für die Implementierung eines Chat-Clients enthält. Die Callback-Funktion verbindet „ userListChanged “, „ newMessage “ und „ keepAlive “ auf dem „ chatserver “-Objekt mit separaten Funktionen, die diese Signale verarbeiten, und ruft anschließend „ show “ auf „ loginWindow “ auf.

Das „ Window “ mit der ID „ loginWindow “ übernimmt den Anmeldevorgang. Es enthält ein „ LoginForm “, das in „LoginForm.ui.qml“ definiert ist. Wenn Sie die Schaltfläche drücken, ruft es die Funktion „ login “ auf dem Objekt „ chatserver “ auf, wobei der Anmeldename und eine Callback-Funktion als Argumente übergeben werden. Diese Callback-Funktion behandelt sowohl den Fall, dass die Anmeldung erfolgreich ist, als auch den Fall, dass sie fehlschlägt.

Nach der Anmeldung verwendet der Client ein in „MainForm.ui.qml“ definiertes „ MainForm “ mit der ID „ mainUi “, um über den Slot „ sendMessage “ Nachrichten zu senden, über das Signal „ newMessage “ Nachrichten zu lesen und über die Eigenschaft „ userList “ die Namen aller verbundenen Benutzer anzuzeigen. Außerdem reagiert der Client auf das Signal „ keepAlive “ des Servers, damit der Server getrennte Clients erkennen und aus der Eigenschaft „ userList “ entfernen kann.

Der Client kann mit dem ChatServer-Beispiel unterQt WebChannel verwendet werden.

Beispielprojekt @ code.qt.io