Web Sockets

webSockets不是Qt提供的。将WebSockets加入到Qt/QML中需要花费一些工作。从作者的角度来看WebSockets有巨大的潜力来添加HTTP服务缺少的功能-通知。HTTP给了我们get和post的功能，但是post还不是一个通知。目前客户端轮询服务器来获得应用程序的服务，服务器也需要能通知客户端变化和事件。你可以与QML接口比较：属性，函数，信号。也可以叫做获取/设置/调用和通知。

QML WebSocket插件将会在Qt5中加入。你可以试试来自qt playground的web sockets插件。为了测试，我们使用一个现有的web socket服务实现了echo server。

首先确保你使用的Qt5.2.x。

  1. $ qmake --version
  2. ... Using Qt version 5.2.0 ...

然后你需要克隆web socket的代码库，并且编译它。

  1. $ git clone git@gitorious.org:qtplayground/websockets.git
  2. $ cd websockets
  3. $ qmake
  4. $ make
  5. $ make install

现在你可以在qml模块中使用web socket。

  1. import Qt.WebSockets 1.0
  3. WebSocket {
  4.     id: socket
  5. }

测试你的web socket，我们使用来自http://websocket.org的echo server 。

  1. import QtQuick 2.0
  2. import Qt.WebSockets 1.0
  4. Text {
  5.     width: 480
  6.     height: 48
  8.     horizontalAlignment: Text.AlignHCenter
  9.     verticalAlignment: Text.AlignVCenter
  11.     WebSocket {
  12.         id: socket
  13.         url: "ws://echo.websocket.org"
  14.         active: true
  15.         onTextMessageReceived: {
  16.             text = message
  17.         }
  18.         onStatusChanged: {
  19.             if (socket.status == WebSocket.Error) {
  20.                 console.log("Error: " + socket.errorString)
  21.             } else if (socket.status == WebSocket.Open) {
  22.                 socket.sendTextMessage("ping")
  23.             } else if (socket.status == WebSocket.Closed) {
  24.                 text += "\nSocket closed"
  25.             }
  26.         }
  27.     }
  28. }

你可以看到我们使用socket.sendTextMessage(“ping”)作为响应在文本区域中。

Web Sockets - 图1

11.8.1 WS Server

你可以使用Qt WebSocket的C++部分来创建你自己的WS Server或者使用一个不同的WS实现。它非常有趣，是因为它允许连接使用大量扩展的web应用程序服务的高质量渲染的QML。在这个例子中，我们将使用基于web socket的ws模块的Node JS。你首先需要安装node.js。然后创建一个ws_server文件夹，使用node package manager（npm）安装ws包。

  1. $ cd ws_server
  2. $ npm install ws

npm工具下载并安装了ws包到你的本地依赖文件夹中。

一个server.js文件是我们服务器的实现。服务器代码将在端口3000创建一个web socket服务并监听连接。在一个连接加入后，它将会发送一个欢迎并等待客户端信息。每个客户端发送到socket信息都会发送回客户端。

  1. var WebSocketServer = require('ws').Server;
  3. var server = new WebSocketServer({ port : 3000 });
  5. server.on('connection', function(socket) {
  6.     console.log('client connected');
  7.     socket.on('message', function(msg) {
  8.         console.log('Message: %s', msg);
  9.         socket.send(msg);
  10.     });
  11.     socket.send('Welcome to Awesome Chat');
  12. });
  14. console.log('listening on port ' + server.options.port);

你需要获取使用的JavaScript标记和回调函数。

11.8.2 WS Client

在客户端我们需要一个链表视图来显示信息，和一个文本输入来输入新的聊天信息。

在例子中我们使用一个白色的标签。

  1. // Label.qml
  2. import QtQuick 2.0
  4. Text {
  5.     color: '#fff'
  6.     horizontalAlignment: Text.AlignLeft
  7.     verticalAlignment: Text.AlignVCenter
  8. }

我们的聊天视图是一个链表视图，文本被加入到链表模型中。每个条目显示使用行前缀和信息标签。我们使用单元将它分为24列。

  1. // ChatView.qml
  2. import QtQuick 2.0
  4. ListView {
  5.     id: root
  6.     width: 100
  7.     height: 62
  9.     model: ListModel {}
  11.     function append(prefix, message) {
  12.         model.append({prefix: prefix, message: message})
  13.     }
  15.     delegate: Row {
  16.         width: root.width
  17.         height: 18
  18.         property real cw: width/24
  19.         Label {
  20.             width: cw*1
  21.             height: parent.height
  22.             text: model.prefix
  23.         }
  24.         Label {
  25.             width: cw*23
  26.             height: parent.height
  27.             text: model.message
  28.         }
  29.     }
  30. }

聊天输入框是一个简单的使用颜色包裹边界的文本输入。

  1. // ChatInput.qml
  2. import QtQuick 2.0
  4. FocusScope {
  5.     id: root
  6.     width: 240
  7.     height: 32
  8.     Rectangle {
  9.         anchors.fill: parent
  10.         color: '#000'
  11.         border.color: '#fff'
  12.         border.width: 2
  13.     }
  15.     property alias text: input.text
  17.     signal accepted(string text)
  19.     TextInput {
  20.         id: input
  21.         anchors.left: parent.left
  22.         anchors.right: parent.right
  23.         anchors.verticalCenter: parent.verticalCenter
  24.         anchors.leftMargin: 4
  25.         anchors.rightMargin: 4
  26.         onAccepted: root.accepted(text)
  27.         color: '#fff'
  28.         focus: true
  29.     }
  30. }

当web socket返回一个信息后，它将会把信息添加到聊天视图中。这也同样适用于状态改变。也可以当用户输入一个聊天信息，将聊天信息拷贝添加到客户端的聊天视图中，并将信息发送给服务器。

  1. // ws_client.qml
  2. import QtQuick 2.0
  3. import Qt.WebSockets 1.0
  5. Rectangle {
  6.     width: 360
  7.     height: 360
  8.     color: '#000'
  10.     ChatView {
  11.         id: box
  12.         anchors.left: parent.left
  13.         anchors.right: parent.right
  14.         anchors.top: parent.top
  15.         anchors.bottom: input.top
  16.     }
  17.     ChatInput {
  18.         id: input
  19.         anchors.left: parent.left
  20.         anchors.right: parent.right
  21.         anchors.bottom: parent.bottom
  22.         focus: true
  23.         onAccepted: {
  24.             print('send message: ' + text)
  25.             socket.sendTextMessage(text)
  26.             box.append('>', text)
  27.             text = ''
  28.         }
  29.     }
  30.     WebSocket {
  31.         id: socket
  33.         url: "ws://localhost:3000"
  34.         active: true
  35.         onTextMessageReceived: {
  36.             box.append('<', message)
  37.         }
  38.         onStatusChanged: {
  39.             if (socket.status == WebSocket.Error) {
  40.                 box.append('#', 'socket error ' + socket.errorString)
  41.             } else if (socket.status == WebSocket.Open) {
  42.                 box.append('#', 'socket open')
  43.             } else if (socket.status == WebSocket.Closed) {
  44.                 box.append('#', 'socket closed')
  45.             }
  46.         }
  47.     }
  48. }

你首先需要运行服务器，然后是客户端。在我们简单例子中没有客户端重连的机制。

运行服务器

  1. $ cd ws_server
  2. $ node server.js

运行客户端

  1. $ cd ws_client
  2. $ qmlscene ws_client.qml

当输入文本并点击发送后，你可以看到类似下面这样。

Web Sockets - 图2