Qt+QML+Html의 개발 모델.

QT += qml quick webengine

import QtQuick 2.5
import QtQuick.Window 2.2
import QtWebEngine 1.4
import QtQuick.Controls 2.0
import QtWebSockets 1.1

Window {
    visible: true
    width: 1500
    height: 900
    title: qsTr("Hello World")

    WebEngineView {
        id: eCharts
        anchors.fill: parent
        url: "qrc:/index.html"
        Component.onCompleted: {

        }
    }

    //  websocket    .
    WebSocketServer {
        id: server
        port: 12335
        listen: true
        onClientConnected: {
            webSocket.onTextMessageReceived.connect(function(message) {
                console.log((qsTr("Server received message: %1").arg(message)));
                webSocket.sendTextMessage(qsTr("Hello html!"));
            });
        }
        onErrorStringChanged: {
            console.log(qsTr("Server error: %1").arg(errorString));
        }

    }

    Button{
        id:btFunc
        text: "PressMe"
        anchors.bottom:eCharts.bottom
        onClicked: {
            //  html     sayHelloFromQML,         result
            eCharts.runJavaScript("window.sayHelloFromQML(\""+"Hello HTML"+"\")",
                                  function(result) {
                                      console.log(result);
                                  }
                    );
        }
    }

}

    
    
    




    hello qml

    
        if ("WebSocket" in window)
        {

        }else{
            alert("         WebSocket!");
        }
        //      web socket
        var ws = new WebSocket("ws://localhost:12335/echo");

        ws.onopen = function()
        {
           // Web Socket     ，   send()       
           alert("websocket   ...");
        };

        ws.onmessage = function (evt)
        {
           var received_msg = evt.data;
           alert("     ..."+received_msg);
        };

        ws.onclose = function()
        {
           //    websocket
           alert("     ...");
        };

        //         QML
        function sendMsgToQML(){
            ws.send("Hello QML");
        }

        //     QML  
        function sayHelloFromQML(msg){
            alert(msg)
            return "sayHelloToQML"
        }