Qt-Web混合开发-QWebSocket简单客户端（7） 原创

Qt-Web混合开发-使用QWebSocket实现的简单客户端程序💚💜🉑🍑

文章目录

• Qt-Web混合开发-使用QWebSocket实现的简单客户端程序💚💜🉑🍑
• • 1、概述🐛🦆
  • 2、实现效果😅🙏
  • 3、实现功能🐮🐴
  • 4、实现流程👊👴👊
  • 5、关键代码💳🛣️🍐
  • 6、源代码🐍🉐

更多精彩内容

👉个人内容分类汇总 👈

👉Qt - Web混合开发👈

1、概述🐛🦆

• Qt版本：V5.12.5
• WebSocket服务端程序
• WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

• WebSocket和Http的异同点

相同：

1. 建立在TCP之上，通过TCP协议来传输数据；
2. 都是可靠性传输协议；
3. 都是应用层协议。

差异：

1. WebSocket是HTML5中的协议，支持持久连接，HTTP不支持持久连接；
2. HTTP是单向协议，只能由客户端发起，做不到服务器主动向客户端推送信息。

2、实现效果😅🙏

3、实现功能🐮🐴

1. 实现连接、断开连接、数据发送、数据接收显示功能；
2. 采用的是【非安全模式】 ；

4、实现流程👊👴👊

1. 创建QWebSocket客户端对象；
2. 绑定信号槽；
   • connected：连接成功信号；
   • disconnected：断开连接信号；
   • textFrameReceived：接收到文本数据时的信号。
3. 连接WebSocket服务端QWebSocket::open(const QUrl &*url*);
4. 接收数据/发送文本数据QWebSocket::sendTextMessage(const QString &*message*)；
5. 断开连接QWebSocket::close(QWebSocketProtocol::CloseCode *closeCode* = QWebSocketProtocol::CloseCodeNormal, const QString &*reason* = QString())；
   • 参数closeCode：关闭原因；
   • 参数reason：关闭原因描述文本。

5、关键代码💳🛣️🍐

• pro文件

QT += websockets

• widget.h：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QWebSocket>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE


class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_connected();             // 连接成功
    void on_disconnected();          // 断开连接
    void on_textMessageReceived(const QString &message);   // 接收数据

    void on_but_connect_clicked();

    void on_but_send_clicked();

private:
    Ui::Widget *ui;

    QWebSocket m_client;
};
#endif // WIDGET_H

• widget.cpp

#include "widget.h"
#include "ui_widget.h"


Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->setWindowTitle(QString("QWebSocket客户端简单示例 - V%1").arg(APP_VERSION));  // 设置窗口标题

    connect(&m_client, &QWebSocket::connected, this, &Widget::on_connected);
    connect(&m_client, &QWebSocket::textFrameReceived, this, &Widget::on_textMessageReceived);
    connect(&m_client, &QWebSocket::disconnected, this, &Widget::on_disconnected);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::on_connected()
{
    ui->textEdit->append("连接成功！");
    ui->but_connect->setText("断开连接");
}

void Widget::on_disconnected()
{
    ui->textEdit->append("断开连接！");
    ui->but_connect->setText("连接");
}

/**
 * @brief          接收数据
 * @param message
 */
void Widget::on_textMessageReceived(const QString &message)
{
    ui->textEdit->append(message);
}

/**
 * @brief 连接/断开连接控制
 */
void Widget::on_but_connect_clicked()
{
    if(ui->but_connect->text() == "连接")
    {
        m_client.open(QUrl(ui->lineEdit_url->text().trimmed()));
    }
    else
    {
        m_client.close();
    }
}

/**
 * @brief 发送数据
 */
void Widget::on_but_send_clicked()
{
    if(m_client.state() == QAbstractSocket::ConnectedState)    // 判断是否连接
    {
        m_client.sendTextMessage(ui->lineEdit_send->text());
    }
}

6、源代码🐍🉐

• gitee
• github

.　　　　　／＞　　フ
　　　　　| 　●　 ● l
　 　　　／` ミ＿xノ
　　 　 /　　　 　 |
　　　 /　 ヽ　　 ﾉ
　 　 │　　|　|　|
　／￣|　　 |　|　|
　| (￣ヽ＿ヽ)__)
　＼二つ 　　 🐁