【Qt】网络

🌈 个人主页：Zfox_
🔥 系列专栏：Qt

一：🔥 Qt 网络概述

和多线程类似, Qt 为了支持跨平台，对网络编程的 API 也进行了重新封装.

💡 注意:

实际 Qt 开发中进行网络编程，也不一定使用 Qt 封装的网络 API，也有一定可能使用的是系统原生 API 或者其他第三方框架的 API.

在进行网络编程之前,需要在项目中的 .pro 文件 中添加 network 模块,

• 添加之后要手动编译一下项目，使 Qt Creator 能够加载对应模块的头文件

二：🔥 UDP Socket

主要的类就两个：QUdpSocket 和 QNetworkDatagram

QUdpSocket 表示一个 UDP 的 socket 文件

名称	类型	说明	对标原生 API
bind(const QHostAddress&, quint16)	方法	绑定指定端口号	bind
receiveDatagram()	方法	返回 QNetworkDatagram ，读取一个 UDP 数据报	recvfrom
writeDatagram(const QNetworkDatagram&)	方法	发送一个 UDP 数据报	sendto
readyRead	信号	在收到数据并准备就绪后触发	无（类似于 IO 多路复用的通知机制）

readyRead ：当 socket 收到请求的时候，QUdpSocket 就会触发这个信号，此时就可以在槽函数中完成读取请求的操作了

基于信号槽，就天然达成了 事件驱动 的效果

QNetworkDatagram 表示一个 UDP 数据报

名称	类型	说明	对标原生 API
QNetworkDatagram(const QByteArray&, const QHostAddress&, quint16)	构造函数	通过 QByteArray，目标 IP 地址，目标端口号 构造一个 UDP 数据报，通常用于发送数据时	无
data()	方法	获取数据报内部持有的数据，返回 QByteArray	无
senderAddress()	方法	获取数据报中包含的对端的 IP 地址	无，recvfrom 包含了该功能
senderPort()	方法	获取数据报中包含的对端的端口号	无，recvfrom 包含了该功能

🦋 代码示例

回显服务器

1）创建界面，包含一个 QListWidget 用来显示消息

2）创建 QUdpSocket 成员

修改 widget.h

class Widget : public QWidget
{Q_OBJECT
public:Widget(QWidget *parent = nullptr);~Widget();
private:Ui::Widget *ui;QUdpSocket* socket;
};

修改 widget.cpp，完成 socket 后续的初始化

一般来说，要先连接信号槽，再绑定端口.

如果顺序反过来，可能会出现端口绑定好了之后，请求就过来了，此时还没来得及连接信号槽，那么这个请求就有可能错过了.

Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{ui->setupUi(this);// 1. 设置窗⼝标题 this->setWindowTitle("服务器");// 2. 实例化 socket socket = new QUdpSocket(this);// 3. 连接信号槽, 处理收到的请求 connect(socket, &QUdpSocket::readyRead, this, &Widget::processRequest);// 4. 绑定端⼝ bool ret = socket->bind(QHostAddress::Any, 9090);if (!ret) {QMessageBox::critical(nullptr, "服务器启动出错", socket->errorString());return;}
}

3）实现 processRequest,完成处理请求的过程

• 读取请求并解析
• 根据请求计算响应
• 把响应写回到客户端

void Widget::processRequest()
{// 1. 读取请求 const QNetworkDatagram& requestDatagram = socket->receiveDatagram();QString request = requestDatagram.data();// 2. 根据请求计算响应 const QString& response = process(request);// 3. 把响应写回到客⼾端 QNetworkDatagram responseDatagram(response.toUtf8(), requestDatagram.senderAddress(), requestDatagram.senderPort());socket->writeDatagram(responseDatagram);// 显⽰打印⽇志 QString log = "[" + requestDatagram.senderAddress().toString() + ":" + QString::number(requestDatagram.senderPort()) + "] req: " + request + ", resp: " + response;ui->listWidget->addItem(log);
}

4）实现 process 函数

由于 我们此处是实现回显服务器，所以 process 方法中并没有包含实质性的内容

QString Widget::process(const QString& request)
{return request;
}

此时，服务器程序编写完毕。但是直接运行还看不出效果，还需要搭配客户端来使用

回显客户端

1）创建界面.包含一个 QLineEdit，QPushButton，QListwidget

• 先使用水平布局把 QLineEdit 和 QPushButton 放好,并设置这两个控件的垂直方向的 sizePolicy 为Expanding
• 再使用垂直布局把 QListwidget 和上面的水平布局放好
• 设置垂直布局的 layoutStretch 为5，1(当然这个尺寸比例根据个人喜好微调)

2）在 widget.cpp 中,先创建两个全局常量,表示服务器的 IP 和 端口

// 提前定义好服务器的 IP 和 端⼝ 
const QString& SERVER_IP = "127.0.0.1";
const quint16 SERVER_PORT = 9090;

3）创建 QUdpsocket 成员
修改 widget.h,定义成员

class Widget : public QWidget
{Q_OBJECT
public:Widget(QWidget *parent = nullptr);~Widget();
private:Ui::Widget *ui;// 创建 socket 成员 QUdpSocket* socket;
};

4）给发送按钮 slot 函数，实现发送请求

void Widget::on_pushButton_clicked()
{// 1. 获取到输⼊框的内容 const QString& text = ui->lineEdit->text();// 2. 构造请求数据 QNetworkDatagram requestDatagram(text.toUtf8(), QHostAddress(SERVER_IP), SERVER_PORT);// 3. 发送请求 socket->writeDatagram(requestDatagram);// 4. 消息添加到列表框中 ui->listWidget->addItem("客⼾端说: " + text);// 5. 清空输⼊框 ui->lineEdit->setText("");
}

5）再次修改 Widget 的构造函数，通过信号槽处理服务器响应

connect(socket, &QUdpSocket::readyRead, this, [=]() {const QNetworkDatagram responseDatagram = socket->receiveDatagram();QString response = responseDatagram.data();ui->listWidget->addItem(QString("服务器说: ") + response);
});

结果如下：

三：🔥 TCP Socket

主要的类就两个：QTcpSocket 和 QTcpServer

QTcpSocket 用于监听端口，获取客户端连接

名称	类型	说明	对标原生 API
listen(const QHostAddress&, quint16 port)	方法	绑定指定地址和端口号，并开始监听	bind 和 listen
nextPendingConnection()	方法	从系统中获取到⼀个已经建立好的 tcp 连接. 返回⼀个 QTcpSocket, 表示这个客户端的连接. 通过这个socket对象完成和客户端 之间的通信.	accept
newConnection	信号	有新的客户端端建立连接好之后触发	无（但类似于 IO 多路复用中的通知机制）

QTcpSocket 用于 客户端 和 服务器之间的数据交互

名称	类型	说明	对标原生 API
readAll()	构造函数	读取当前接收缓冲区中的所有数据 返回 QByteArray对象	read
write(const QByteArray&)	方法	把数据写入 socket 中	write
deleteLater	方法	暂时把 socket 对象标记为无效.Qt 会在下个事件循环中析构释放该对 象.	无（但类似于 “半自动化的垃圾回收”）
readyRead()	信号	有数据到达并准备就绪时触发	无（但类似于 IO 多路复用中的通知机制）

🦋 代码示例

回显服务器

1）创建界面，包含一个 QListWidget 用来显示消息

2）创建 QTcpSocket 并且初始化

修改 widget.h，添加 QTcpServer 指针成员

class Widget : public QWidget
{Q_OBJECT
public:Widget(QWidget *parent = nullptr);~Widget();
private:Ui::Widget *ui;QTcpSocket* socket;
};

修改 widget.cpp,实例化 QTcpServer 并进行后续初始化操作,

• 设置窗口标题
• 实例化 TCP server.(父元素设为当前控件,会在父元素销毁时被一起销毁),
• 通过信号槽,处理客户端建立的新连接
• 监听端口

Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{ui->setupUi(this);// 1. 设置窗⼝标题 this->setWindowTitle("服务器");// 2. 实例化 Tcp socket tcpsocket = new TcpSocket(this);// 3. 通过信号槽, 处理客⼾端建⽴的新连接.  connect(tcpServer, &QTcpServer::newConnection, this, &Widget::processConnection);// 4. 监听端⼝ bool ret = tcpServer->listen(QHostAddress::Any, 9090);if (!ret) {QMessageBox::critical(nullptr, "服务器启动失败!", tcpServer->errorString());exit(1);}
}

3）继续修改 widget.cpp，实现处理连接的具体方法 processconnection

• 获取到新的连接对应的 socket.
• 通过信号槽,处理收到请求的情况
• 通过信号槽,处理断开连接的情况

void Widget::processConnection()
{// 1. 获取到新的连接对应的 socket.  QTcpSocket* clientSocket = tcpServer->nextPendingConnection(); QString log = QString("[") + clientSocket->peerAddress().toString()+ ":" + QString::number(clientSocket->peerPort()) + "] 客⼾端上线!";ui->listWidget->addItem(log);// 2. 通过信号槽, 处理收到请求的情况 connect(clientSocket, &QTcpSocket::readyRead, this, [=](){// a) 读取请求 QString request = clientSocket->readAll();// b) 根据请求处理响应 const QString& response = process(request);// c) 把响应写回客⼾端 clientSocket->write(response.toUtf8());QString log = QString("[") + clientSocket->peerAddress().toString()+ ":" + QString::number(clientSocket->peerPort()) + "] req: " + request + ", resp: " + response;ui->listWidget->addItem(log);});// 3. 通过信号槽, 处理断开连接的情况 connect(clientSocket, &QTcpSocket::disconnected, this, [=]() {QString log = QString("[") + clientSocket->peerAddress().toString()+ ":" + QString::number(clientSocket->peerPort()) + "] 客⼾端下线!";ui->listWidget->addItem(log);// 删除 clientSocket clientSocket->deleteLater();});
}

4）实现 process 函数

由于 我们此处是实现回显服务器，所以 process 方法中并没有包含实质性的内容

QString Widget::process(const QString& request)
{return request;
}

此时，服务器程序编写完毕。但是直接运行还看不出效果，还需要搭配客户端来使用

回显客户端

1）创建界面.包含一个 QLineEdit，QPushButton，QListwidget

• 先使用水平布局把 QLineEdit 和 QPushButton 放好,并设置这两个控件的垂直方向的 sizePolicy 为Expanding
• 再使用垂直布局把 QListwidget 和上面的水平布局放好
• 设置垂直布局的 layoutStretch 为5，1(当然这个尺寸比例根据个人喜好微调)

2）创建QTcpSocket 并实例化，修改widget.h创建成员

class Widget : public QWidget
{Q_OBJECT
public:Widget(QWidget *parent = nullptr);~Widget();
private:Ui::Widget *ui;// 创建 QTcpsocket QTcpSocket* socket;
};

修改 widget.cpp,对 QTcpSocket 进行实例化,

• 设置窗口标题
• 实例化 socket 对象(父元素设为当前控件,会在父元素销毁时被一起销毁)
• 和服务器建立连接
• 等待并确认连接是否出错

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 1. 设置窗⼝标题. this->setWindowTitle("客⼾端");// 2. 实例化 socket 对象. socket = new QTcpSocket(this);// 3. 和服务器建⽴连接. socket->connectToHost("127.0.0.1", 9090);// 4. 等待并确认连接是否出错. if (!socket->waitForConnected()) {QMessageBox::critical(nullptr, "连接服务器出错!", socket->errorString());exit(1);}
}

3）修改widget.cpp，给按钮增加点击的slot函数，实现发送请求给服务器

void Widget::on_pushButton_clicked()
{// 获取输⼊框的内容 const QString& text = ui->lineEdit->text();// 清空输⼊框内容 ui->lineEdit->setText("");// 把消息显⽰到界⾯上 ui->listWidget->addItem(QString("客⼾端说: ") + text);// 发送消息给服务器 socket->write(text.toUtf8());
}

4）再次修改 Widget 的构造函数，通过信号槽处理服务器响应

// 处理服务器返回的响应. 
connect(socket, &QTcpSocket::readyRead, this, [=]() {QString response = socket->readAll();qDebug() << response;ui->listWidget->addItem(QString("服务器说: ") + response);
});

先启动服务器,再启动客⼾端(可以启动多个)，最终执行效果:

• 由于我们使用信号槽处理同⼀个客户端的多个请求，不涉及到循环，也就不会使客户端之间相互影响 了.

三：🔥 Http Client

进行 Qt 开发时,和服务器之间的通信很多时候也会用到 HTTP 协议.

• 通过 HTTP 从服务器获取数据
• 通过 HTTP 向服务器提交数据,

🦋 API 概述

关键类主要是三个，QNetworkAccessManager、QNetworkRequest，QNetworkReply

QNetworkAccessManager 提供了HTTP的核心操作,

方法	说明
get(const QNetworkRequest&)	发起一个 HTTP GET 请求，返回 QNetworkReply 对象
post(const QNetworkRequest&, const QByteArray&)	发起一个 HTTP POST 请求。返回 QNetworkReply 对象

QNetworkRequest 表示⼀个HTTP请求(不含body).

• 如果需要发送⼀个带有body的请求(比如post)，会在 QNetworkAccessManager 的 post方法 中通过单独的参数来传入 body

方法	说明
QNetworkRequest(const QUrl &)	通过 URL 构造 HTTP 请求
setHeader(QNetworkRequest::KnowHeaders header, const QVariant &value)	设置请求头

其中的 QNetworkRequest::KnownHeaders 是⼀个枚举类型，常用取值：

取值	说明
ContentTypeHeader	描述 body 类型
ContentLengthHeader	描述 body 长度
LocationHeader	用于重定向报文中指定重定向地址（响应中使用，请求用不到）
CookieHeader	设置 Cookie
UserAgenHeader	设置 User-Agent

QNetworkReply 表示⼀个HTTP响应。这个类同时也是 QIODevice 的⼦类

方法	说明
error()	获取出错状态
errorString()	获取出错原因的文本
readAll()	读取响应 body
header(QNetworkRequest::KnownHeaders header)	读取响应指定 header 的值

此外：QNetworkReply 还有⼀个重要的信号 finished 会在客户端收到完整的响应数据之后触发.

🦋 代码示例

1）创建界面：包含一个 QLineEdit，QPushButton、QPlainTextEidt

• 先使用水平布局把 QLineEdit 和 QPushButton 放好，并设置这两个控件的垂直方向的 sizePolicy 为Expanding
• 再使用垂直布局把 QPlainTextEidt 放好（QPlainTextEdit 的 readOnly 设为 true）
• 设置垂直布局的 layoutStretch 为5，1(当然这个尺寸比例根据个人喜好微调)

此处建议使用 QPlainTextEdit，而不是 QTextEdit，主要因为 QTextEdit 要进行 富文本解析，如果得到的HTTP响应体积很大，就会导致界面渲染缓慢甚至被卡住

2）修改 widget.h ，创建 QNetworkAccessManager 属性

class Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();private:Ui::Widget *ui;QNetworkAccessManager* manager;
};

3）修改 widget.cpp 创建实例

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 实例化属性manager = new QNetworkAccessManager(this);
}

4）编写按钮的 slot 函数，实现发送 HTTP 请求功能

void Widget::on_pushButton_clicked()
{// 1. 获取输入到输入框的 URL，构造 QURL 对象QUrl url(ui->lineEdit->text());// 2. 构造 HTTP 请求对象QNetworkRequest request(url);// 3. 发送 GET 请求QNetworkReply* response = manager->get(request);// 4. 通过信号槽处理connect(response, &QNetworkReply::finished, this, [=](){if(response->error() == QNetworkReply::NoError){// 响应正确QString html(response->readAll());ui->plainTextEdit->setPlainText(html);}else{ui->plainTextEdit->setPlainText(response->errorString());}response->deleteLater();});
}

执行程序，观察效果

四：🔥 【Qt】音视频

🔥 在Qt中，视频播放的功能主要是通过 QMediaPlayer 类和 QVideoWidget 类来实现。在使用这两个类时要添加对应的模块 multimedia 和 multimediawidgets

核心 API 概述

名称	作用
setMedia()	设置当前媒体源
setVideoOutput()	将 QVideoWidget 视频输出附加到媒体播放器，如果媒体播放器已经添加了视频输出，将更换一个新的

代码示例

首先在 .pro 文件中添加 multimedia 和 multimediawidgets 两个模块；如下图示：

/********************************* widget.h *********************************/
#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>
#include <QHBoxLayout> //⽔平布局 
#include <QVBoxLayout> //垂直布局 
#include <QVideoWidget> //显⽰视频 
#include <QMediaPlayer> //播放声⾳ 
#include <QPushButton> //按钮 
#include <QStyle> //设置图标 
#include <QFileDialog> //选择⽂件/⽂件夹 
class Widget : public QWidget
{Q_OBJECT
public:Widget(QWidget *parent = nullptr);~Widget();public slots:void chooseVideo();
private:QMediaPlayer *mediaPlayer;QVideoWidget *videoWidget;QVBoxLayout *vbox;//创建两个按钮：选择视频按钮和开播放按钮 QPushButton *chooseBtn,*playBtn;
};
#endif // WIDGET_H/********************************* widget.cpp *********************************/
#include "widget.h"
#include <QMediaPlayer>
#include <QSlider>
Widget::Widget(QWidget *parent): QWidget(parent)
{//对象实例化 mediaPlayer = new QMediaPlayer(this);videoWidget = new QVideoWidget(this);//设置播放画⾯的窗⼝ videoWidget->setMinimumSize(600,600);//实例化窗⼝布局---垂直布局 this->vbox = new QVBoxLayout(this);this->setLayout(this->vbox);//实例化选择视频按钮 chooseBtn = new QPushButton("选择视频",this);//实例化播放按钮 playBtn = new QPushButton(this);//设置图标代替⽂件 playBtn->setIcon(this->style()->standardIcon(QStyle::SP_MediaPlay));//实例化⼀个⽔平布局，将以上控件放⼊⽔平布局中 QHBoxLayout *hbox = new QHBoxLayout;//添加控件 hbox->addWidget(chooseBtn);hbox->addWidget(playBtn);//将播放窗⼝和⽔平布局都添加到垂直布局中 vbox->addWidget(videoWidget);//布局中添加布局 vbox->addLayout(hbox);//将选择视频对应的按钮和槽函数进⾏关联 connect(chooseBtn,&QPushButton::clicked,this,&Widget::chooseVideo);
}void Widget::chooseVideo()
{//选择视频，返回⼀个播放视频的名字 QString name = QFileDialog::getSaveFileName(this,"选择视频",".","WMV(*.wmv)");//设置媒体声⾳ mediaPlayer->setMedia(QUrl(name));//输出视频画⾯mediaPlayer->setVideoOutput(videoWidget);//播放 mediaPlayer->play();
}Widget::~Widget()
{}

五：🔥 共勉

😋 以上就是我对 【Qt】网络 的理解, 觉得这篇博客对你有帮助的，可以点赞收藏关注支持一波~ 😉