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

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

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

import Qt.WebSockets 1.0

然后，我们使用它:

import QtQuick 2.0import Ubuntu.Components 1.1import QtQuick.Layouts 1.1import 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