WebSocket with QtWebAssembly

David_001

Hello,

yesterday i tried to compile the two websockets example with 5.13 gcc and everything works fine.

https://doc.qt.io/qt-5/qtwebsockets-echoclient-example.html#
https://doc.qt.io/qt-5/qtwebsockets-echoserver-example.html#

After that i compiled the server with 5.13 gcc to run on my local machine and compiled the client with 5.13 emc (webassembly) to run inside my firefox. For the emc version i started "python -m SimpleHTTPServer 8080" a simple httpserver and tried to open "localhost:8080".

As i can see the webassembly program is starting but hangs at "compiling"

Does anywone knows why it does not finish the compiling process inside firefox? I would like to create a server application (5.13 gcc) with a socket that can communicate with another (5.13 webassembly) socket. The reason for that is to transfer serialized data from server to webassembly application.

Side Note:
I also tried it with an QSslSocket but as i see QSslSocket is disabled by Qt for emc.

//EDIT:
I created new Project with "QGuiApplication app(argc, argv);" and a QML file and added both classes now it is working!

Now i tried to do the same with:
https://doc.qt.io/qt-5/qtwebsockets-sslechoclient-example.html#
https://doc.qt.io/qt-5/qtwebsockets-sslechoserver-example.html#

Fehler: no member named 'sslErrors' in 'QWebSocket'
connect(&m_webSocket, QOverload<const QList<QSslError>&>::of(&QWebSocket::sslErrors),

Fehler: no member named 'ignoreSslErrors' in 'QWebSocket'
m_webSocket.ignoreSslErrors();

Is there a Way to create SSL Websockt for WebAssembly?

fokhagyma

"Is there a Way to create SSL Websockt for WebAssembly?" I have this same problem.

fokhagyma

I found, that connecting from a webassembly websocket client to a wss server works with the sshechoclient and sshechoserver example programs by doing a little modification to the sshechocilent program: delete or comment out the parts which relate to security:

// Copyright (C) 2016 Kurt Pattyn <pattyn.kurt@gmail.com>.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
#include "sslechoclient.h"
#include <QtCore/QCoreApplication>
#include <QtCore/QDebug>
#include <QtCore/QFile>
#include <QtWebSockets/QWebSocket>

QT_USE_NAMESPACE

//! [constructor]
SslEchoClient::SslEchoClient(const QUrl &url, QObject *parent) :
    QObject(parent)
{
    connect(&m_webSocket, &QWebSocket::connected, this, &SslEchoClient::onConnected);
    // connect(&m_webSocket, QOverload<const QList<QSslError>&>::of(&QWebSocket::sslErrors),
            // this, &SslEchoClient::onSslErrors);

    // QSslConfiguration sslConfiguration;
    // QFile certFile(QStringLiteral(":/localhost.cert"));
    // certFile.open(QIODevice::ReadOnly);
    // QSslCertificate certificate(&certFile, QSsl::Pem);
    // certFile.close();
    // sslConfiguration.addCaCertificate(certificate);
    // m_webSocket.setSslConfiguration(sslConfiguration);

    m_webSocket.open(QUrl(url));
}
//! [constructor]

//! [onConnected]
void SslEchoClient::onConnected()
{
    qDebug() << "WebSocket connected";
    connect(&m_webSocket, &QWebSocket::textMessageReceived,
            this, &SslEchoClient::onTextMessageReceived);
    m_webSocket.sendTextMessage(QStringLiteral("Hello, world!"));
}
//! [onConnected]

//! [onTextMessageReceived]
void SslEchoClient::onTextMessageReceived(QString message)
{
    qDebug() << "Message received:" << message;
    qApp->quit();
}

// void SslEchoClient::onSslErrors(const QList<QSslError> &errors)
// {
//     qWarning() << "SSL errors:" << errors;
//     m_webSocket.ignoreSslErrors();

    //qApp->quit();
// }
//! [onTextMessageReceived]

Important!: If the wss server is running on localhost with fake certs, then in Edge browser, client connecting to the server will work, but not in other browsers. But if your wss server has domain name with valid cert (e.g. type of Let's Encrypt), then it will work in major browsers (Chrome, Edge, Firefox) (I tested, it works). Also, host your client application through https connection, e.g. with qtwasmserver.

fokhagyma

Additionally, you can make it work in all major browsers with self-made certificate in the following way:

Download the proper mkcert software for your system.
Execute this command with mkcert, e.g. for Windows 64bit x86:

.\mkcert-v1.4.4-windows-amd64.exe -install

Add this line to the file /etc/hosts on Linux, C:\Windows\System32\drivers\etc\hosts on Windows:

127.0.0.1        test.dev

Execute this command with mkcert, e.g. for Windows 64bit x86:

.\mkcert-v1.4.4-windows-amd64.exe test.dev

In the sslechoserver program, change the cert and key file paths to the paths of the previously generated files ("test.dev.pem", "test.dev-key.pem"). And change the listening address to 127.0.0.1 like QHostAddress("127.0.0.1").
In the sslechoclient program, modify the url.setHost in main.cpp:

url.setHost("test.dev");

Build and run the sslechoserver and sslechoclient applications, and it should work in all major browsers.

Also, in my previous comment I falsely wrote that sshechoserver and sshechoclient because it is "ssl" not "ssh".