热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Qt6QMLBook/网络设置/WebSockets

WebSocketsTheWebSocketsmoduleprovidesanimplementationoftheWebSocketsprotocolforWebSocketsc


Web Sockets

The WebSockets module provides an implementation of the WebSockets protocol for WebSockets clients and servers. It mirrors the Qt CPP module. It allows sending a string and binary messages using a full duplex communication channel. A WebSocket is normally established by making an HTTP connection to the server and the server then “upgrades” the connection to a WebSocket connection.

WebSockets模块为WebSockets客户端和服务器提供WebSockets协议的实现。它反映了Qt CPP模块。它允许使用全双工通信信道发送字符串和二进制消息。WebSocket通常通过与服务器建立HTTP连接来建立,然后服务器将连接“升级”到WebSocket连接。

In Qt/QML you can also simply use the WebSocket and WebSocketServer objects to creates direct WebSocket connection. The WebSocket protocol uses the “ws” URL schema or “wss” for a secure connection.

在Qt/QML中,还可以简单地使用WebSocket和WebSocketServer对象来创建直接的WebSocket连接。WebSocket协议使用“ws”URL模式或“wss”进行安全连接。

You can use the web socket qml module by importing it first.

您可以通过先导入web套接字qml模块来使用它。

import QtWebSockets
WebSocket {
id: socket
}

WS Server


WS服务器

You can easily create your own WS server using the C++ part of the Qt WebSocket or use a different WS implementation, which I find very interesting. It is interesting because it allows connecting the amazing rendering quality of QML with the great expanding web application servers. In this example, we will use a Node JS based web socket server using the ws module. For this, you first need to install node js. Then, create a ws_server folder and install the ws package using the node package manager (npm).

​您可以使用QT的C++模块Qt WebSocket轻松创建自己的WS服务器,或者使用不同的WS实现,这是非常有趣的。这很有趣,因为它可以将QML惊人的渲染质量与不断扩展的web应用服务器连接起来。在本例中,我们将使用ws模块使用基于Node JS的web套接字服务器。为此,首先需要安装node.js。然后,创建一个ws_server文件夹,并使用node包管理器(npm)安装ws包。

The code shall create a simple echo server in NodeJS to echo our messages back to our QML client.

代码将在NodeJS中创建一个简单的回显服务器,将我们的消息回显到我们的QML客户端。

cd ws_server
npm install ws

The npm tool downloads and installs the ws package and dependencies into your local folder.

npm工具将ws包和依赖项下载并安装到您的本地文件夹中。

server.js file will be our server implementation. The server code will create a web socket server on port 3000 and listens to an incoming connection. On an incoming connection, it will send out a greeting and waits for client messages. Each message a client sends on a socket will be sent back to the client.

server.js文件将是我们的服务器实现。服务器代码将在端口3000上创建一个web套接字服务器,并侦听传入的连接。在传入连接上,它将发送问候并等待客户端消息。客户端在套接字上发送的每条消息都将被发送回客户端。

const WebSocketServer = require('ws').Server
const 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.toString())
});
socket.send('Welcome to Awesome Chat')
});
console.log('listening on port ' + server.options.port)

You need to get used to the notation of Javascript and the function callbacks.

您需要习惯Javascript的符号和函数回调。


WS Client


WS客户端

On the client side, we need a list view to display the messages and a TextInput for the user to enter a new chat message.

在客户端,我们需要一个列表视图来显示消息,还需要一个文本输入,以便用户输入新的聊天消息。

We will use a label with white color in the example.

在本例中,我们将使用白色标签。

// Label.qml
import QtQuick
Text {
color: '#fff'
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}

Our chat view is a list view, where the text is appended to a list model. Each entry is displayed using a row of prefix and message label. We use a cell width cw factor to split the with into 24 columns.

我们的聊天视图是列表视图,文本被附加到列表模型中。每个条目都使用一行前缀和消息标签显示。我们使用单元格宽度cw因子将宽度拆分为24列。

// ChatView.qml
import QtQuick
ListView {
id: root
width: 100
height: 62
model: ListModel {}
function append(prefix, message) {
model.append({prefix: prefix, message: message})
}
delegate: Row {
id: delegate
required property var model
property real cw: width / 24
width: root.width
height: 18
Label {
width: delegate.cw * 1
height: parent.height
text: delegate.model.prefix
}
Label {
width: delegate.cw * 23
height: parent.height
text: delegate.model.message
}
}
}

The chat input is just a simple text input wrapped with a colored border.

聊天输入只是一个用彩色边框包装的简单文本输入。

// ChatInput.qml
import QtQuick
FocusScope {
id: root
property alias text: input.text
signal accepted(string text)
width: 240
height: 32
Rectangle {
anchors.fill: parent
color: '#000'
border.color: '#fff'
border.width: 2
}
TextInput {
id: input
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 4
anchors.rightMargin: 4
color: '#fff'
focus: true
onAccepted: function () {
root.accepted(text)
}
}
}

When the web socket receives a message it appends the message to the chat view. Same applies for a status change. Also when the user enters a chat message a copy is appended to the chat view on the client side and the message is sent to the server.

当web套接字收到消息时,它会将消息附加到聊天视图中。这同样适用于状态更改。此外,当用户输入聊天信息时,会在客户端的聊天视图中添加一份副本,并将该信息发送到服务器。

// ws_client.qml
import QtQuick
import QtWebSockets
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: function(text) {
print('send message: ' + text)
socket.sendTextMessage(text)
box.append('>', text)
text = ''
}
}
WebSocket {
id: socket
url: "ws://localhost:3000"
active: true
onTextMessageReceived: function (message) {
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')
}
}
}
}

You need first run the server and then the client. There is no retry connection mechanism in our simple client.

您需要先运行服务器,然后运行客户端。在我们的简单客户端中没有重试连接机制。

Running the server

运行服务器

cd ws_server
node server.js

Running the client

运行客户端

cd ws_client
qml ws_client.qml

When entering text and pressing enter you should see something like this.

当输入文本并按enter键时,您应该会看到类似的内容。

示例源码下载



推荐阅读
  • 本文详细介绍了Java中的泛型概念及其在类、接口和方法中的应用。泛型是自JDK 1.5以来引入的一项重要特性,旨在增强代码的灵活性和安全性。 ... [详细]
  • 本文探讨了在使用Apache Flink向Kafka发送数据过程中遇到的事务频繁失败问题,并提供了详细的解决方案,包括必要的配置调整和最佳实践。 ... [详细]
  • 我们正在使用GNU Make来构建我们的系统,在makefile文件的末尾,我们通过一个名为Makedepends的包含来生成一系列的.d文件。然而,当文件被删除或移动时,依赖关系会中断,我们需要寻找一种方法来优雅地处理这种情况。 ... [详细]
  • Java 中静态和非静态嵌套类的区别 ... [详细]
  • PHP网站部署指南:从零开始搭建PHP网站
    本文提供了详细的步骤指导,帮助开发者在不同环境下成功部署PHP网站,包括在IIS和Apache服务器上的具体操作。 ... [详细]
  • 使用EF Core在.Net Core控制台应用中操作SQLite数据库
    本文介绍如何利用Visual Studio 2019和Windows 10环境,通过Entity Framework Core(EF Core)实现对SQLite数据库的读写操作。项目源代码可从百度网盘下载。 ... [详细]
  • PHP 5.4.8 编译安装指南
    本文详细介绍了如何在Linux环境下编译安装PHP 5.4.8,并配置为FastCGI模式运行。包括所需依赖包的安装、源代码下载、编译配置及启动服务等步骤。 ... [详细]
  • 解决JavaWeb项目中因IPv6导致的IP转换错误
    本文探讨了在JavaWeb项目中,当尝试将客户端IP地址从字符串形式转换为整数时遇到的问题,并提供了详细的解决方案。具体问题表现为在本地环境中通过`request.getRemoteHost()`获取到的IP地址为IPv6格式,而非预期的IPv4格式。 ... [详细]
  • 本文探讨了如何从文本文件中正确读取一行数据,并将其赋值给C语言中的变量,同时解决了常见的错误和注意事项。 ... [详细]
  • 本文探讨了Lua中元表和元方法的使用,通过具体的代码示例展示了如何利用这些特性来实现类似C语言中的运算符重载功能。 ... [详细]
  • 拖拉切割直线 ... [详细]
  • 本文详细介绍如何在Spring Boot项目中集成和使用JPA,涵盖JPA的基本概念、Spring Data JPA的功能以及具体的操作步骤,帮助开发者快速掌握这一强大的持久化技术。 ... [详细]
  • Mac环境下Java与Ant自动化构建环境搭建指南
    本文详细介绍了如何在Mac操作系统上为测试工程师搭建Java和Ant开发环境,包括环境变量配置等关键步骤。 ... [详细]
  • VSCode中实现大型项目函数跳转的方法
    在处理大型代码项目时,简单的C/C++插件往往无法满足需求。本文介绍如何通过配置GNU Global等工具,在VSCode中实现高效的函数跳转。 ... [详细]
  • 搜索引擎架构设计
    本文详细介绍了搜索引擎的主要组成部分,包括爬虫模块、索引模块和搜索模块。其中,索引模块采用了高效的二元分词技术进行数据存储,而搜索模块则基于ASP.NET框架实现了一个用户友好的界面和高效的搜索算法。 ... [详细]
author-avatar
衢江大道
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有