Source

Target

Commits (6)
Showing with 187 additions and 84 deletions
examples/webchannel/chatclient-html/doc/images/chatclient-html.png

7.11 KB

......@@ -33,31 +33,36 @@
/*!
\example chatclient-html
\title Qt WebChannel Chatclient HTML Example
\title Qt WebChannel ChatClient HTML Example
\ingroup qtwebchannel-examples
\brief A HTML/JavaScript client that communicates over a WebSocket with a QWebChannel server.
The chatclient-html example provides a simple QWebChannel client implemented using JavaScript and HTML.
\image chatclient-html.png
\section1 Overview
\e{ChatClient HTML} provides a simple QWebChannel client implemented using JavaScript and HTML.
\section1 Running the Example
To run the example, open the \c chatclient.html file in a browser.
\section1 Implementing a Web Channel Client
The client initializes a WebSocket connection to the chat server and receives an object
containing all neccessarry signals, slots and properties for implementing a chat client.
containing all the necessary signals, slots, and properties for implementing a chat client.
After login the client can invoke the method \c sendMessage and receive the signal \c newMessage
to send and receive messages. Furthermore there is a \c userList property which provides the
names of all other connected clients. It is automatically updated when its contents change.
Also, the client responds to the servers keep alive signal which is needed to detect disconnected
clients and remove them from the \c userlist property.
After login, the client can invoke the method \c sendMessage and receive the signal \c newMessage
to send and receive messages. Furthermore, a \c userList property provides the names of
all other connected clients. The list is automatically updated when its contents change.
Also, the client responds to the server's keep alive signal which is needed to detect disconnected
clients and remove them from the \c userList property.
The example shows how basic elements can be used with the client JavaScript implementation of
QWebChannel, like connecting to signals (\c newMessage), calling slots (\c sendMessage) and handle
QWebChannel, like connecting to signals (\c newMessage), calling slots (\c sendMessage), and handling
property changes (\c userList).
The client is able to work with the chatserver-cpp example.
The client is able to work with \l{Qt WebChannel ChatServer Example}.
To run the example, open the \c chatclient.html in a browser.
\sa {chatserver-cpp}, {chatclient-qml}
\sa {Qt WebChannel ChatServer Example}, {Qt WebChannel ChatClient QML Example}
*/
examples/webchannel/chatclient-qml/doc/images/chatclient-qml.png

4.9 KB

......@@ -33,32 +33,38 @@
/*!
\example chatclient-qml
\title Qt WebChannel Chatclient QML Example
\title Qt WebChannel ChatClient QML Example
\ingroup qtwebchannel-examples
\brief A QML client that communicates over a WebSocket with a QWebChannel server.
The chatclient-html example provides a simple QWebChannel client implemented using JavaScript and QML.
\image chatclient-qml.png
\section1 Overview
\e{ChatClient QML} provides a simple QWebChannel client implemented using JavaScript and QML.
The client initializes a WebSocket connection to the chat server and receives an object
containing all neccessarry signals, slots and properties for implementing a chat client.
\section1 Running the Example
To run the example, enter the following command in the client source
directory:
\c {path/to/qmlscene qmlchatclient.qml}
\section1 Implementing a Web Channel Client
The client initializes a \l [QML] WebSocket connection to the chat server and receives an object
containing all the necessary signals, slots, and properties for implementing a chat client.
After login, the client can invoke the method \c sendMessage and receive the signal \c newMessage
to send and receive messages. Furthermore, there is a \c userList property which provides the
to send and receive messages. Furthermore, a \c userList property provides the
names of all other connected clients. It is automatically updated when its contents change.
Also, the client responds to the servers keep alive signal which is needed to detect disconnected
Also, the client responds to the server's keep alive signal which is needed to detect disconnected
clients and remove them from the \c userList property.
The example shows how basic elements can be used with the client JavaScript implementation of
QWebChannel, like connecting to signals (\c newMessage), calling slots (\c sendMessage) and handle
QWebChannel, like connecting to signals (\c newMessage), calling slots (\c sendMessage), and handling
property changes (\c userList).
The client is able to work with the chatserver-cpp as server application
The example can be run by invoking \c {path/to/qmlscene qmlchatclient.qml}.
The client is able to work with the \l{Qt WebChannel ChatServer Example}.
\sa {chatserver-cpp}, {chatclient-html}
\sa {Qt WebChannel ChatServer Example}, {Qt WebChannel ChatClient HTML Example}
*/
examples/webchannel/chatserver-cpp/doc/images/chatserver-cpp.png

6.67 KB

......@@ -33,31 +33,39 @@
/*!
\example chatserver-cpp
\title Qt WebChannel Chatserver Example
\title Qt WebChannel ChatServer Example
\ingroup qtwebchannel-examples
\brief Shows how to use the QWebChannel C++ API to implement a simple chat server
\brief A simple chat server implemented using the QWebChannel C++ API.
The chatserver examples provides a chat service that client examples can connect to.
\image chatserver-cpp.png
\section1 Overview
\e{ChatServer} provides a chat service that the
\l{Qt WebChannel ChatClient QML Example} and
\l{Qt WebChannel ChatClient HTML Example} can connect to.
\include examples-run.qdocinc
\section1 Implementing a Chat Server
The C++ application implements a QObject which provides all mechanisms required for
a chat service.
This object is published through a QWebChannel which uses a WebSocket as transport.
This object is published through a QWebChannel which uses a \l{Qt WebSockets}
{WebSocket} as transport.
The server provides a basic \c login method (username only, no passwords), which must be
successfully invoked before a client is able to chat.
After login a client can invoke the method \c sendMessage and receive the signal \c newMessage
to write and receive messages. Furthermore there is a \c userList property which provides
After login, a client can invoke the method \c sendMessage and receive the signal \c newMessage
to write and receive messages. Furthermore, there is a \c userList property which provides
the names of all other connected clients.
Additionally the server sends a keepAlive signal periodically to all clients. The clients
Additionally the server sends a \c keepAlive signal periodically to all clients. The clients
have to respond to this signal, otherwise the client will be removed from the \c userList property.
The example shows how basic QObject elements can be used with QWebChannel, i.e. signals
(\c newMessage), slots (\c sendMessage) and properties (\c userList).
The example shows how basic QObject elements can be used with QWebChannel, that is signals
(\c newMessage), slots (\c sendMessage), and properties (\c userList).
Because this is a plain server application, there are separated clients needed to interact
with the server. Both examples chatclient-qml and chatclient-html show a client implementation
Because this is a plain server application, separate clients are needed to
interact with it. \l{Qt WebChannel ChatClient QML Example} and
\l{Qt WebChannel ChatClient HTML Example} are client implementations
compatible with this server.
*/
......@@ -36,26 +36,28 @@
\title Qt WebChannel Standalone Example
\ingroup qtwebchannel-examples
\image standalone-screenshot.png
\brief Shows how to use the QWebChannel C++ API to communicate with an external client.
\brief A simple chat between a server and a remote client running in a
browser.
The standalone example is a simple chat between a C++ application and a remote HTML
client running in your default browser.
\e{Standalone} demonstrates how to use the QWebChannel C++ API to
communicate with an external client. It is a simple chat between a C++
application and a remote HTML client running in your default browser.
\include examples-run.qdocinc
\section1 Overview
\section1 Communicating with a Remote Client
The C++ application sets up a QWebChannel instance and publishes a Dialog object over it.
The C++ application sets up a QWebChannel instance and publishes a \c Dialog object over it.
For the remote client side, \l {standalone/index.html}{index.html} is opened. Both show a
dialog with the list of received messages and an input box to send messages to the other end.
The Dialog emits the Dialog::sendText() signal when the user sends a message. The signal
The \c Dialog emits the \c Dialog::sendText() signal when the user sends a message. The signal
automatically gets propagated to the HTML client. When the user enters a message on the HTML
side, Dialog::receiveText() is called.
side, \c Dialog::receiveText() is called.
All communication between the HTML client and the C++ server is done over a WebSocket.
The C++ side instantiates a QWebSocketServer and wraps incoming QWebSocket connections
in WebSocketTransport objects, which implement QWebChannelAbstractTransport. These objects are
in QWebChannelAbstractTransport objects. These objects are
then connected to the QWebChannel instance.
\sa {Qt WebChannel JavaScript API}
......
......@@ -40,7 +40,7 @@ qhp.QtWebChannel.subprojects.javascript.indexTitle = Qt WebChannel JavaScript
tagfile = ../../../doc/qtwebchannel/qtwebchannel.tags
depends += qtcore qtquick qtqml qmake qtdoc
depends += qtcore qtquick qtqml qmake qtdoc qtwebengine qtwebsockets
headerdirs += .. \
../../imports
......@@ -48,6 +48,7 @@ headerdirs += .. \
sourcedirs += .. \
../../imports
imagedirs += images
exampledirs += ../../../examples/webchannel
examples.fileextensions += "*.html *.json"
......
......@@ -36,6 +36,7 @@
\group qtwebchannel-examples
\brief List of Qt WebChannel examples.
The examples show how to use the QWebChannel C++ and WebChannel QML API.
The examples show how to use the QWebChannel C++ and \l [QML] WebChannel QML
API.
*/
/****************************************************************************
**
** Copyright (C) 2015 The Qt Company Ltd.
** Contact: http://www.qt.io/licensing/
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see http://www.qt.io/terms-conditions. For further
** information use the contact form at http://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: http://www.gnu.org/copyleft/fdl.html.
** $QT_END_LICENSE$
**
****************************************************************************/
/*
The nolink entries prevent autolinking of each occurrence of 'WebChannel'
'WebEngine' or 'WebSocket' to the QML type.
To link to the QML type, use explicit linking. For example:
\l [QML] WebChannel
\sa {QtWebChannel::}{WebChannel}
*/
/*!
\externalpage nolink
\title WebChannel
\internal
*/
/*!
\externalpage nolink
\title WebEngine
\internal
*/
/*!
\externalpage nolink
\title WebSockets
\internal
*/
/*!
\externalpage nolink
\title WebSocket
\internal
*/
......@@ -31,26 +31,50 @@
\title Qt WebChannel
\brief Bridges the gap between Qt applications and HTML/JavaScript.
Qt WebChannel enables peer-to-peer communication between the host
(QML/C++ application) and the client (HTML/JavaScript application). The
transport mechanism is supported out of the box by the two popular web
engines, Qt WebKit 2 and Qt WebEngine (experimental). It works on all
browsers that support Qt WebSockets, enabling Qt WebChannel applications
Qt WebChannel enables peer-to-peer communication between the server
(QML/C++ application) and the client (HTML/JavaScript or QML application). The
transport mechanism is supported out of the box by \l{Qt WebEngine}. It works on all
browsers that support \l{Qt WebSockets}, enabling Qt WebChannel applications
to run in any JavaScript runtime. Additionally, a custom transport
mechanism can also be implemented using Qt WebSockets to support Qt
WebChannel-based communication.
The module provides a JavaScript library for seamless integration of C++
and QML applications with HTML/JavaScript clients. The client must use the
and QML applications with HTML/JavaScript and QML clients. The clients must use the
JavaScript library to access the serialized QObjects published by the host
applications.
\section1 Related Information
\section1 Getting Started
To use these classes in your application, use the following include
statement:
\code
#include <QtWebChannel/QtWebChannel>
\endcode
To link against the module, add this line to your \l qmake \c .pro file:
\code
QT += webchannel
\endcode
The QML types are accessed by using:
\badcode
import QtWebChannel 1.0
\endcode
\section1 API Reference
\list
\li \l{Qt WebChannel JavaScript API}{JavaScript API}
\li \l{Qt WebChannel C++ Classes}{C++ API}
\li \l{Qt WebChannel QML Types}{QML API}
\li \l{Qt WebChannel Examples}{Examples} - show how use the API in practice
\endlist
\section1 Examples
\list
\li \l{Qt WebChannel Examples}{Examples}
\endlist
*/
......@@ -31,21 +31,20 @@
\brief This page explains how to use the JavaScript QWebChannel API in HTML clients.
\section1 Setup
\section1 Setting up the JavaScript API
To communicate with a QWebChannel or WebChannel, any HTML client must use and setup the
JavaScript API provided by \c qwebchannel.js. For HTML clients run inside Qt WebKit, you
can load the file via \c qrc:///qtwebchannel/qwebchannel.js. For external clients you will
need to copy the file to your webserver. Then instantiate a QWebChannel object and pass
To communicate with a QWebChannel or \l [QML] WebChannel, a client must use and set up the
JavaScript API provided by \c qwebchannel.js. For clients run inside \l{Qt WebEngine}, you
can load the file via \c qrc:///qtwebchannel/qwebchannel.js. For external clients, you
need to copy the file to your web server. Then instantiate a QWebChannel object and pass
it a transport object and a callback function, which will be invoked once the
initialization of the channel finished and published objects become available.
initialization of the channel finishes and the published objects become available.
The transport object implements a minimal message passing interface. It should be an object
with a \c send() function, which takes a stringified JSON message and transmits it to the
server-side QWebChannelAbstractTransport object. Furthermore, its \c onmessage property should
be called when a message from the server was received. This interface is implemented internally
by the Qt WebKit navigator.qtWebChannelTransport object. Alternatively, you can also use a
WebSocket, which also implements this interface.
be called when a message from the server was received. Alternatively, you can use a
\l{Qt WebSockets}{WebSocket} to implement the interface.
Note that the JavaScript QWebChannel object should be constructed once the transport object is
fully operational. In case of a WebSocket, that means you should create the QWebChannel in the
......
......@@ -63,7 +63,7 @@ QT_BEGIN_NAMESPACE
A list of transport objects, which implement QWebChannelAbstractTransport. The transports
are used to talk to the remote clients.
\sa WebChannel::connectTo(), WebChannel::disconnectFrom()
\sa connectTo(), disconnectFrom()
*/
/*!
......@@ -71,7 +71,7 @@ QT_BEGIN_NAMESPACE
\brief A list of objects which should be accessible to remote clients.
The objects must have the attached WebChannel::id property set to an identifier, under which the
The objects must have the attached \l id property set to an identifier, under which the
object is then known on the HTML side.
Once registered, all signals and property changes are automatically propagated to the clients.
......@@ -80,7 +80,7 @@ QT_BEGIN_NAMESPACE
If one needs to register objects which are not available when the component is created, use the
imperative registerObjects method.
\sa WebChannel::registerObjects(), WebChannel::id
\sa registerObjects(), id
*/
class QQmlWebChannelPrivate : public QWebChannelPrivate
......@@ -128,8 +128,8 @@ QQmlWebChannel::~QQmlWebChannel()
/*!
\qmlmethod void WebChannel::registerObjects(QVariantMap objects)
Register objects to make them accessible to HTML clients. The key of the map is used as an identifier
for the object on the client side.
Registers objects to make them accessible to HTML clients. The key of the
map is used as an identifier for the object on the client side.
Once registered, all signals and property changes are automatically propagated to the clients.
Public invokable methods, including slots, are also accessible to the clients.
......@@ -137,7 +137,7 @@ QQmlWebChannel::~QQmlWebChannel()
This imperative API can be used to register objects on the fly. For static objects, the declarative
registeredObjects property should be preferred.
\sa WebChannel::registeredObjects
\sa registeredObjects
*/
void QQmlWebChannel::registerObjects(const QVariantMap &objects)
{
......@@ -161,11 +161,12 @@ QQmlWebChannelAttached *QQmlWebChannel::qmlAttachedProperties(QObject *obj)
/*!
\qmlmethod void WebChannel::connectTo(QWebChannelAbstractTransport transport)
\brief Connectect to the \a transport, which represents a communication channel to a single client.
\brief Connects to the \a transport, which represents a communication
channel to a single client.
The transport object must be an implementation of QWebChannelAbstractTransport.
\sa WebChannel::transports, WebChannel::disconnectFrom()
\sa transports, disconnectFrom()
*/
void QQmlWebChannel::connectTo(QObject *transport)
{
......@@ -179,12 +180,12 @@ void QQmlWebChannel::connectTo(QObject *transport)
/*!
\qmlmethod void WebChannel::disconnectFrom(QWebChannelAbstractTransport transport)
\brief Disconnect the \a transport from this WebChannel.
\brief Disconnects the \a transport from this WebChannel.
The client will not be able to communicate with the WebChannel anymore, nor will it receive any
signals or property updates.
\sa WebChannel::connectTo()
\sa connectTo()
*/
void QQmlWebChannel::disconnectFrom(QObject *transport)
{
......
......@@ -46,7 +46,7 @@ QT_BEGIN_NAMESPACE
\class QWebChannel
\inmodule QtWebChannel
\brief Expose QObjects to remote HTML clients.
\brief Exposes QObjects to remote HTML clients.
\since 5.4
The QWebChannel fills the gap between C++ applications and HTML/JavaScript
......@@ -63,7 +63,7 @@ QT_BEGIN_NAMESPACE
features used by \c{qwebchannel.js}. As such, one can interact
with basically any modern HTML browser or standalone JavaScript runtime, such as node.js.
There also exists a declarative WebChannel API.
There also exists a declarative \l{Qt WebChannel QML Types}{WebChannel API}.
\sa {Qt WebChannel Standalone Example}, {Qt WebChannel JavaScript API}{JavaScript API}
*/
......@@ -130,7 +130,7 @@ QWebChannel::~QWebChannel()
}
/*!
Register a group of objects to the QWebChannel.
Registers a group of objects to the QWebChannel.
The properties, signals and public invokable methods of the objects are published to the remote clients.
There, an object with the identifier used as key in the \a objects map is then constructed.
......@@ -160,7 +160,7 @@ QHash<QString, QObject *> QWebChannel::registeredObjects() const
}
/*!
Register a single object to the QWebChannel.
Registers a single object to the QWebChannel.
The properties, signals and public methods of the \a object are published to the remote clients.
There, an object with the identifier \a id is then constructed.
......@@ -176,7 +176,7 @@ void QWebChannel::registerObject(const QString &id, QObject *object)
}
/*!
Deregister the given \a object from the QWebChannel.
Deregisters the given \a object from the QWebChannel.
Remote clients will receive a \c destroyed signal for the given object.
......
......@@ -44,9 +44,8 @@ QT_BEGIN_NAMESPACE
Users of the QWebChannel must implement this interface and connect instances of it
to the QWebChannel server for every client that should be connected to the QWebChannel.
The {Qt WebChannel Standalone Example}{Standalone Example} shows how this can be done
using Qt WebSockets. Qt WebKit implements this interface internally and uses the native
WebKit IPC mechanism to transmit messages to HTML clients.
The \l{Qt WebChannel Standalone Example} shows how this can be done
using \l{Qt WebSockets}.
\note The JSON message protocol is considered internal and might change over time.
......@@ -63,7 +62,7 @@ QT_BEGIN_NAMESPACE
/*!
\fn QWebChannelAbstractTransport::sendMessage(const QJsonObject &message)
Send a JSON \a message to the remote client. An implementation would serialize the message and
Sends a JSON \a message to the remote client. An implementation would serialize the message and
transmit it to the remote JavaScript client.
*/
......