11.6 使用 OAuth 驗(yàn)證
OAuth 是一種開放協(xié)議穿肄，允許從 Web闺阱，移動(dòng)和桌面應(yīng)用程序的簡(jiǎn)單和標(biāo)準(zhǔn)方法進(jìn)行安全授權(quán)焚辅。OAuth 用于針對(duì)常見的 Web 服務(wù)（如 Google浪漠、Facebook 和 Twitter）驗(yàn)證客戶端秕豫。
** 注意： **
對(duì)于自定義 Web 服務(wù)朴艰，我們還可以使用標(biāo)準(zhǔn)的 HTTP 身份驗(yàn)證观蓄，例如在 get 方法中使用 XMLHttpRequest 用戶名和密碼（例如 xhr.open(verb, url, true, username, password)）
OAuth 目前不是 QML/JS API 的一部分。所以我們需要編寫一些 C++ 代碼祠墅，并將認(rèn)證導(dǎo)出到 QML/JS 端侮穿。另一個(gè)問題是訪問令牌的安全存儲(chǔ)。
這里有一些我們覺得有用的鏈接：
- http://oauth.net/
- http://hueniverse.com/oauth/
- https://github.com/pipacs/o2
- http://www.johanpaul.com/blog/2011/05/oauth2-explained-with-qt-quick/
11.7 Engin IO
Engin.IO 是由 DIGIA 運(yùn)行的網(wǎng)絡(luò)服務(wù)毁嗦。它可以從 Qt/QML 應(yīng)用程序訪問 Engin.IO 的 NoSQL 存儲(chǔ)亲茅。它是一個(gè)基于云的存儲(chǔ)對(duì)象存儲(chǔ)，具有易于訪問的 Qt/QML API 和管理控制臺(tái)狗准。如果要從 QML 應(yīng)用程序存儲(chǔ)云中的一些數(shù)據(jù)克锣，這將是一個(gè)簡(jiǎn)單的入口路徑，具有出色的 QML/JS 支持腔长。
有關(guān)進(jìn)一步的幫助袭祟，請(qǐng)參閱 EnginIO 文檔。
11.8 Web Sockets
WebSockets 模塊提供了 WebSockets 客戶端和服務(wù)器的 WebSockets 協(xié)議捞附。它映射了 Qt/CPP 模塊巾乳。它允許使用全雙工通信通道發(fā)送字符串和二進(jìn)制消息。通常通過與服務(wù)器建立 HTTP 連接來建立 websocket鸟召，然后服務(wù)器將連接 “升級(jí)到” WebSocket 連接胆绊。
在 Qt/QML 中，我們還可以簡(jiǎn)單地使用 WebSocket 和 WebSocketServer 對(duì)象來創(chuàng)建直接的 websocket 連接欧募。websocket 協(xié)議使用 “ws” url 模式或 “wss” 進(jìn)行安全連接压状。
我們可以通過對(duì) web 套接字 qml 模塊進(jìn)行導(dǎo)入來使用它。
import Qt.WebSockets 1.0
WebSocket {
id: socket
}
要測(cè)試我們的網(wǎng)絡(luò)套接字跟继，我們將使用 http://websocket.org 的 echo 服務(wù)器种冬。
import QtQuick 2.5
import Qt.WebSockets 1.0
Text {
width: 480
height: 48
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
WebSocket {
id: socket
url: "ws://echo.websocket.org"
active: true
onTextMessageReceived: {
text = message
}
onStatusChanged: {
if (socket.status == WebSocket.Error) {
console.log("Error: " + socket.errorString)
} else if (socket.status == WebSocket.Open) {
socket.sendTextMessage("ping")
} else if (socket.status == WebSocket.Closed) {
text += "\nSocket closed"
}
}
}
}
可以看到我們發(fā)送 socket.sendTextMessage("ping") 的 ping 消息作為文本字段中的響應(yīng)。
11.8.1 WS 服務(wù)器
我們可以使用 Qt WebSocket 的 C++ 部分輕松創(chuàng)建自己的 WS 服務(wù)器还栓，或使用不同的 WS 實(shí)現(xiàn)碌廓，我覺得這非常有趣。這是有趣的剩盒，因?yàn)樗试S將令人驚嘆的 QML 渲染質(zhì)量與使用大量擴(kuò)展的 Web 應(yīng)用服務(wù)器連接起來谷婆。在這個(gè)例子中，我們將使用基于 Node JS 的 Web 套接字服務(wù)器使用 ws 模塊辽聊。為此纪挎，我們首先需要安裝節(jié)點(diǎn) js。然后創(chuàng)建一個(gè) ws_server 文件夾跟匆，并使用節(jié)點(diǎn)包管理器 （npm） 安裝 ws 包异袄。
代碼將在 Node JS 中創(chuàng)建一個(gè)簡(jiǎn)單的回顯服務(wù)器，將我們的消息回傳給我們的 QML 客戶端玛臂。
$ cd ws_server
$ npm install ws
npm 工具下載并將 ws 包和依賴項(xiàng)安裝到本地文件夾中烤蜕。
server.js 文件將是我們的服務(wù)器實(shí)現(xiàn)封孙。服務(wù)器代碼將在端口 3000 上創(chuàng)建一個(gè) Web 套接字服務(wù)器，并偵聽傳入的連接讽营。在傳入的連接上虎忌，它會(huì)發(fā)出一個(gè)問候語，并等待客戶端消息橱鹏∧ご溃客戶端在套接字上發(fā)送的每個(gè)消息都將發(fā)送回客戶端。
var WebSocketServer = require('ws').Server;
var server = new WebSocketServer({ port : 3000 });
server.on('connection', function(socket) {
console.log('client connected');
socket.on('message', function(msg) {
console.log('Message: %s', msg);
socket.send(msg);
});
socket.send('Welcome to Awesome Chat');
});
console.log('listening on port ' + server.options.port);
我們需要習(xí)慣 JavaScript 的符號(hào)和函數(shù)回調(diào)莉兰。
11.8.2 WS 客戶端
在客戶端挑围，我們需要一個(gè)列表視圖來顯示消息和一個(gè) TextInput，供用戶輸入一個(gè)新的聊天消息糖荒。
我們將在示例中使用白色的標(biāo)簽杉辙。
// Label.qml
import QtQuick 2.5
Text {
color: '#fff'
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
我們的聊天視圖是列表視圖，文本附加到列表模型寂嘉。每個(gè)條目都使用一行前綴和消息標(biāo)簽顯示奏瞬。 我們使用單元寬度 cw 因子將其分成 24 列。
// ChatView.qml
import QtQuick 2.5
ListView {
id: root
width: 100
height: 62
model: ListModel {}
function append(prefix, message) {
model.append({prefix: prefix, message: message})
}
delegate: Row {
width: root.width
height: 18
property real cw: width/24
Label {
width: cw*1
height: parent.height
text: model.prefix
}
Label {
width: cw*23
height: parent.height
text: model.message
}
}
}
聊天輸入只是一個(gè)包含彩色邊框的簡(jiǎn)單文本輸入泉孩。
// ChatInput.qml
import QtQuick 2.5
FocusScope {
id: root
width: 240
height: 32
Rectangle {
anchors.fill: parent
color: '#000'
border.color: '#fff'
border.width: 2
}
property alias text: input.text
signal accepted(string text)
TextInput {
id: input
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 4
anchors.rightMargin: 4
onAccepted: root.accepted(text)
color: '#fff'
focus: true
}
}
當(dāng) Web 套接字收到消息時(shí)，會(huì)將消息附加到聊天視圖并淋。這同樣適用于狀態(tài)更改寓搬。此外，當(dāng)用戶輸入聊天消息時(shí)县耽，副本被附加到客戶端的聊天視圖句喷，并且該消息被發(fā)送到服務(wù)器。
// ws_client.qml
import QtQuick 2.5
import Qt.WebSockets 1.0
Rectangle {
width: 360
height: 360
color: '#000'
ChatView {
id: box
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: input.top
}
ChatInput {
id: input
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
focus: true
onAccepted: {
print('send message: ' + text)
socket.sendTextMessage(text)
box.append('>', text)
text = ''
}
}
WebSocket {
id: socket
url: "ws://localhost:3000"
active: true
onTextMessageReceived: {
box.append('<', message)
}
onStatusChanged: {
if (socket.status == WebSocket.Error) {
box.append('#', 'socket error ' + socket.errorString)
} else if (socket.status == WebSocket.Open) {
box.append('#', 'socket open')
} else if (socket.status == WebSocket.Closed) {
box.append('#', 'socket closed')
}
}
}
}
我們需要先運(yùn)行服務(wù)器兔毙，然后再運(yùn)行客戶端唾琼。我們的簡(jiǎn)單客戶端沒有重試連接機(jī)制。
運(yùn)行服務(wù)器：
$ cd ws_server
$ node server.js
運(yùn)行客戶端：
$ cd ws_client
$ qmlscene ws_client.qml
輸入文字并按 Enter 鍵時(shí)澎剥，應(yīng)該會(huì)看到類似下圖這樣的界面锡溯。
11.9 本章總結(jié)
本章簡(jiǎn)單講解了關(guān)于 QML 網(wǎng)絡(luò)的知識(shí)。請(qǐng)記住哑姚，Qt 目前在 QML 方面擁有更豐富的網(wǎng)絡(luò) API祭饭。但本章的思想是推動(dòng) QML 網(wǎng)絡(luò)的界限，以及如何與云服務(wù)進(jìn)行集成叙量。
