Qt WebChannel Standalone Example | Qt WebChannel | Qt 6.12.0
Description: A simple chat between a server and a remote client running in a browser.
Keywords: example

- Qt 6.12
- Qt WebChannel
- Qt WebChannel Examples
- Qt WebChannel Standalone Example
- Qt 6.12.0 Reference Documentation

# Qt WebChannel Standalone Example

A simple chat between a server and a remote client running in a browser.

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.

#### Running the Example

You can run the example from:

- Qt Creator

  Open the Welcome mode and select the example from Examples. For more information, see Qt Creator: Tutorial: Build and run.

- Qt Extension for Visual Studio Code

  Run the Qt: Open Qt examples command from the Command Palette, and select the example from the list. For more information, see Qt Extension for Visual Studio Code: Tutorial: Build and run.

#### Communicating with a Remote Client

The C++ application sets up a QWebChannel instance and publishes a `Core` object over it. On the remote client side, `index.html` runs in your default browser. Both show a dialog with the list of received messages and an input box to send messages to the other end.

The `Core` emits the `Core::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, `Core::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 QWebChannelAbstractTransport objects. These objects are then connected to the QWebChannel instance.

#### Serving the Client Page

The `index.html` page and the `qwebchannel.js` script it loads are compiled into the application as Qt resources. The application serves them over a minimal loopback HTTP server and opens the default browser at the resulting `http://` URL. A loopback URL works even when the browser and the application do not share a filesystem, as on a sandboxed or cross-compiled platform.

The example implements its own minimal HTTP server so that building it does not require the Qt HTTP Server module. In a real application, you would use QHttpServer instead.

Example project @ code.qt.io

See also Qt WebChannel JavaScript API.