对于一些应用场景来说,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来得到这个信息。
运行我们的应用: