在Ubuntu QML应用中使用WebSocket建立TCP/IP连接

对于一些应用场景来说，TCP/IP连接是唯一的一种通讯的协议。对于我们的QML应用来说，我们可以使用WebSocket来建立一个双工的(full-duplex)的TCP/IP连接。在今天的例程中，我们将来介绍如何使用WebSocket来建立这种连接，并实现通信。

首先，我们得import我们需要的模块：

import Qt.WebSockets 1.0

然后，我们使用它:

import QtQuick 2.0
import Ubuntu.Components 1.1
import QtQuick.Layouts 1.1
import Qt.WebSockets 1.0

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "websocket.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(60)
    height: units.gu(85)

    function appendMessage(msg) {
        var length = output.length;
        output.insert(length, msg + "\r\n");
    }

    Page {
        id: page
        title: i18n.tr("websocket")

        WebSocket {
            id: socket
            url: input.text
            onTextMessageReceived: {
                console.log("something is received!");
                appendMessage("received: " + message);
            }

            onStatusChanged: if (socket.status == WebSocket.Error) {
                                 console.log("Error: " + socket.errorString)
                             } else if (socket.status == WebSocket.Open) {
                                 appendMessage("sending \"Hello world\"");
                                 socket.sendTextMessage("Hello World")
                             } else if (socket.status == WebSocket.Closed) {
                                 appendMessage("Socket closed");
                             }
            active: true
        }

        Column {
            anchors.fill: parent
            spacing: units.gu(1)

            RowLayout {
                id: top
                width: parent.width

                TextField {
                    id: input
                     Layout.minimumWidth: page.width *.7
                    text: "ws://echo.websocket.org"
                }

                Button {
                    id: get
                    text: "Get"
                    onClicked: {
                        socket.active = true
                        socket.sendTextMessage("Nice to meet you!")
                    }
                }
            }

            TextArea {
                id: output
                width: parent.width
                height: page.height - top.height - units.gu(1)
            }
        }
    }
}

在上面的代码中：

       WebSocket {

            id: socket

            url: input.text

            onTextMessageReceived: {

                console.log("something is received!");

                appendMessage("received: " + message);

            }

            onStatusChanged: if (socket.status == WebSocket.Error) {

                                 console.log("Error: " + socket.errorString)

                             } else if (socket.status == WebSocket.Open) {

                                 appendMessage("sending \"Hello world\"");

                                 socket.sendTextMessage("Hello World")

                             } else if (socket.status == WebSocket.Closed) {

                                 appendMessage("Socket closed");

                             }

            active: true

        }

我们从input.text中得到url。当active为真时，建立起Socket的连接。我们可以在onStatusChhanged中得到这个变化。当我们把active设为假时，安全套接字将被自动断开。在例程中，我们使用了一个公共的网站

ws://echo.websocket.org

每当我们向这个地址发送信息时，就会得到和发送信息一模一样的信息(是一个echo服务器）。我们可以通过onTextMessageReceived来得到这个信息。

运行我们的应用：

整个应用的源码在：https://github.com/liu-xiao-guo/websocket