QML WebSocket error: Unsupported WebSocket scheme: http

Question

I created a simple chat application using QML's WebSockets component. It's just the client:

Window {
    id: root
    visible: true
    width: 1024
    height: 768

    property variant messages: []

    WebSocket {
        id: sock
        url: "http://localhost:3700"
        onTextMessageReceived: {
            var data = message;
            var messages = root.messages;
            if(data.message) {
                messages.push(data);
                var html = '';
                for(var i = 0; i < messages.length; i++) {
                    html += '<b>' + (messages[i].username ? messages[i].username : 'Server') + ': </b>';
                    html += messages[i].message + '<br />';
                }
                messageBox.append(html);
            } else {
                messageBox.append("There is a problem:", data);
            }
        }
        onStatusChanged: {
            if (sock.status == WebSocket.Error) {
                messageBox.append("Error: " + sock.errorString);
            }
            else if (sock.status == WebSocket.Open) {
                messageBox.append("Socket open");
            }
            else if (sock.status == WebSocket.Closed) {
                messageBox.append("Socket closed");
            }
        }
        active: false
    }

The server is implemented on Node.js and Socket.io using this article. The problem is, when I try to connect to the server the app throws this:

Error: Unsupported WebSocket scheme: http

If I change the protocol to ws, then the server closes the connection. What can I do?

The server code:

var express = require("express");
var app = express();
var port = 3700;

app.set('views', __dirname + '/tpl');
app.set('view engine', "jade");
app.engine('jade', require('jade').__express);
app.get("/", function(req, res){
    res.render("page");
});

app.use(express.static(__dirname + '/public'));

var io = require('socket.io').listen(app.listen(port));

io.sockets.on('connection', function (socket) {
    socket.emit('message', { message: 'welcome to the chat' });
    socket.on('send', function (data) {
        io.sockets.emit('message', data);
    });
});

console.log("Listening on port " + port);

Answer 1

From Qt documentation: The url must have one of 2 schemes: ws:// or wss://. When not supplied, then ws:// is used. The url must have one of 2 schemes: ws:// or wss://. When not supplied, then ws:// is used. So you have to specify the url as

url: "ws://localhost:3700"

or wss:// if you use secured connection.

Also take into account that QML WebSocket supports only version 13 of the WebSocket protocol. See RFC documentation for more info.

Answer 2

I found a much simplier solution for this problem.

It isn't as easy as setting url to "ws://localhost:3000" when using websockets with socket.io You also have to set the transport-type when talking to socket.io, for example:

url: "ws://127.0.0.1:3000/socket.io/?EIO=3&transport=websocket"

This can be used with the QML WebSockets example provided by qt here http://doc.qt.io/qt-5/qtwebsockets-qmlwebsocketclient-qml-qmlwebsocketclient-main-qml.html