• 【QT】Qt中Websocket的使用

    一、WebSocket的定义

            WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。        

            WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。想对应http协议来说，websocket更加的平等，在http协议中，只有客户端向服务器发送申请请求之后，服务器才会返回请求的数据，如果要保证实时性的话，就需要不断地轮询，每隔一段时间就向服务器发送一个请求，这样就会造成很大的开销，而WebSocket服务器主动向客户端发送数据，而不需要申请，客户端发送数据给服务器也是如此

            简单来说，就是浏览器和服务器之间通信的一种协议，相比较http来说，数据交换更加平等，开销更小；

    二、服务器和客户端

            要想在Qt实现websocket那么我们主要的就是实现一个服务器，由网页实现一个客户端

    2.1 服务器的实现

            要实现服务器，首先要认识QWebSocketServer Class，我们需要通过这个类实现

     1）类分析

            从上图可以知道，需要在.pro文件中添加QT+=websockets，然后添加头文件，新建一个WebSocketTest窗口应用程序，试图如下

    2）添加库

            在WebSocketTest中添加下面的语句

    QT       += websockets

    3）添加头文件

            在websockettest.h中添加头文件，声明变量

    1. #ifndef WEBSOCKETTEST_H
    2. #define WEBSOCKETTEST_H
    3.  
    4. #include 
    5. #include 
    6.  
    7. QT_BEGIN_NAMESPACE
    8. namespace Ui { class WebSocketTest; }
    9. QT_END_NAMESPACE
    10.  
    11. class WebSocketTest : public QWidget
    12. {
    13.     Q_OBJECT
    14.  
    15. public:
    16.     WebSocketTest(QWidget *parent = nullptr);
    17.     ~WebSocketTest();
    18.  
    19. private:
    20.     Ui::WebSocketTest *ui;
    21.  
    22.     //声明QWebSocketServer变量
    23.     QWebSocketServer *web_server;
    24.  
    25. };
    26. #endif // WEBSOCKETTEST_H

    4）QWebSocketServer类的使用

            再来看一看关于这个类的使用，类名上面F1进入帮助界面，可以看到

    翻译过来就是

    QWebSocketServer是一个基于QTcpServer模型的类，用于处理WebSocket协议的服务器端通信。如果你知道如何使用QTcpServer，你就可以很轻松的使用QWebSocketServer。

    QWebSocketServer类主要用于接收并处理来自客户端的WebSocket连接，你可以手动设定服务端的端口，也可以让QWebSocketServer自动选择。调用listen()函数即可让服务器开始侦听连接请求。

    每当有新的客户端尝试连接服务器时，newConnection()信号就会发出。服务器可以调用nextPendingConnection()方法接受这个握手请求，同时返回一个已经连接状态的QWebSocket对象指针，服务器即可通过这个指针和客户端进行通信。

    如果在过程中发生错误，serverError()方法可以获取错误类型，同时可以调用errorString()方法获取人类可读的错误描述。

    当服务器侦听连接请求时，可以通过serverAddress()和serverPort()来获取服务器正在侦听的地址和端口。调用close()函数可以使QWebSocketServer停止侦听连接请求。

    QWebSocketServer当前还不支持WebSocket拓展和WebSocket子协议。该类仅支持RFC 6455中规定的WebSocket协议的13版。

    有一个默认的握手超时设置为10秒，主要用于防止拒绝服务攻击，该超时时间可以通过setHandshakeTimeout()自定义。

    参见WebSocket Server Example和QWebSocket。

            也就是说使用listen函数监听连接请求，一旦有新的客户端连接，就可以触发newConnection()信号，再由服务器通过nextPendingConnection()方法接收这个客户端的连接，这个方法返回一个QWebsocket的对象指针，通过这个指针就可以和客户端通信了

    5）代码实现

            首先客户端代码我这里直接提供一个可以测试的html，新建一个文本文件，将下面内容复制进去，保存后，将后缀改为html,点击使用浏览器打开。

    1. html>
    2. <html>
    4. WebSocket Test
    7. <body>
    8. <button id="testButton">Send Test Messagebutton>
    9. <div id="messageDisplay">div>
    10.

    服务器相关代码

    构造函数

    1.  web_server = new QWebSocketServer("Myserver",QWebSocketServer::NonSecureMode,this);
    2.  
    3.     if(web_server->listen(QHostAddress::Any,15678))
    4.     {
    5.         qDebug()<<"开始监听";
    6.         connect(web_server,&QWebSocketServer::newConnection,this,&WebSocketTest::newCilentConnect);
    7.  
    8.     }

    槽函数

    1. void WebSocketTest::newCilentConnect()
    2. {
    3.     //返回客户端
    4.     web_client = web_server->nextPendingConnection();
    5.     qDebug() << "有新的 WebSocket 客户端连接。";
    6.  
    7. }

    编译运行服务器，然后点击html文件，可以发现会打印”有新的 WebSocket 客户端连接“；

    6）接收客户端的消息

    1. void WebSocketTest::newCilentConnect()
    2. {
    3.     //返回客户端
    4.     web_client = web_server->nextPendingConnection();
    5.     qDebug() << "有新的 WebSocket 客户端连接。";
    6.  
    7.     // 处理接收到的消息
    8.     connect(web_client , &QWebSocket::textMessageReceived, this, &WebSocketTest::onTextMessageReceived);
    9.  
    10. }
    11.  
    12. void WebSocketTest::onTextMessageReceived(const QString &message)
    13. {
    14.       qDebug() << "收到客户端消息：" << message;
    15.  
    16.       if(message=="Test")
    17.       {
    18.            /*在这里执行你实现的操作，如网页一个按钮，点击后发送打开摄像头信息给服务器，
    19.            服务器执行打开摄像头的操作*/
    20.        }
    21. }

            编译运行，点击网页上的按钮，服务器就可以收到这个消息了；

    2.2 客户端的实现

            到前面为止就可以实现客户端发送数据到服务器的操作，现在实现服务器发送数据给客户端

    1.  
    2. // 向客户端发送数据
    3. void WebSocketTest::sendClientData(const QString &str)
    4. {
    5.     if (web_client->isValid()) {
    6.         web_client->sendTextMessage(str);
    7.     }
    8. }

    然后在界面上添加一个按钮发送信息给客户端

    1.  
    2. void WebSocketTest::on_btn_send_clicked()
    3. {
    4.     sendClientData("Hello");
    5. }

    编译运行，刷新网页后，点击按钮查看效果

     三、完整源码

    websocket.c

    1. #include "websockettest.h"
    2. #include "ui_websockettest.h"
    3.  
    4. WebSocketTest::WebSocketTest(QWidget *parent)
    5.     : QWidget(parent)
    6.     , ui(new Ui::WebSocketTest)
    7. {
    8.     ui->setupUi(this);
    9.  
    10.     // 创建 WebSocket 服务器
    11.     web_server = new QWebSocketServer("Myserver",QWebSocketServer::NonSecureMode,this);
    12.  
    13.     //监听
    14.     if(web_server->listen(QHostAddress::Any,15678))
    15.     {
    16.         qDebug()<<"开始监听";
    17.         connect(web_server,&QWebSocketServer::newConnection,this,&WebSocketTest::newCilentConnect);
    18.  
    19.     }
    20.  
    21.  
    22. }
    23.  
    24. void WebSocketTest::newCilentConnect()
    25. {
    26.     web_client = web_server->nextPendingConnection();
    27.     qDebug() << "有新的 WebSocket 客户端连接。";
    28.  
    29.  
    30.     // 处理客户端断开连接
    31.     connect(web_client, &QWebSocket::disconnected, this, [this, web_client]() {
    32.         qDebug() << "WebSocket 客户端断开连接。";
    33.         web_client->deleteLater();
    34.     });
    35.     // 处理接收到的消息
    36.     connect(web_client, &QWebSocket::textMessageReceived, this, &WebSocketTest::onTextMessageReceived);
    37.  
    38. }
    39. void WebSocketTest::onTextMessageReceived(const QString &message)
    40. {
    41.       qDebug() << "收到客户端消息：" << message;
    42.  
    43.  
    44. }
    45.  
    46. // 向客户端发送数据
    47. void WebSocketTest::sendClientData(const QString &str)
    48. {
    49.     if (web_client->isValid()) {
    50.         web_client->sendTextMessage(str);
    51.     }
    52. }
    53.  
    54. void WebSocketTest::on_btn_send_clicked()
    55. {
    56.     sendClientData("Hello");
    57. }
    58.  
    59. WebSocketTest::~WebSocketTest()
    60. {
    61.     delete ui;
    62. }
    63.  
    64.  
    65.

    websocket.h

    1. #ifndef WEBSOCKETTEST_H
    2. #define WEBSOCKETTEST_H
    3.  
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8.  
    9.  
    10. QT_BEGIN_NAMESPACE
    11. namespace Ui { class WebSocketTest; }
    12. QT_END_NAMESPACE
    13.  
    14. class WebSocketTest : public QWidget
    15. {
    16.     Q_OBJECT
    17.  
    18. public:
    19.     WebSocketTest(QWidget *parent = nullptr);
    20.     ~WebSocketTest();
    21.  
    22. private:
    23.     Ui::WebSocketTest *ui;
    24.  
    25.     //声明QWebSocketServer变量  服务器
    26.     QWebSocketServer *web_server;
    27.  
    28.     //客户端
    29.     QWebSocket* web_client;
    30.  
    31. private slots:
    32.     //客户端连接槽函数
    33.     void newCilentConnect();
    34.     
    35.     //接收新客户端消息函数
    36.     void onTextMessageReceived(const QString &message);
    37.  
    38.     //发送消息给客户端函数
    39.     void on_btn_send_clicked();
    40.  
    41. private:
    42.     //发送消息给客户端
    43.     void sendClientData(const QString &str);
    44.  
    45. };
    46. #endif // WEBSOCKETTEST_H

    websocket.html

    1. html>
    2. <html>
    4. WebSocket Test
    7. <body>
    8. <button id="testButton">Send Test Messagebutton>
    9. <div id="messageDisplay">div>
    10.

  • 相关阅读:
    几十万换来的DDoS攻击防护经验(转载)
    惊了！10万字的Spark全文！
    分布式定时任务
    等保三级安全要求简要攻略-安全物理环境
    To_Heart—题解——CF1592F1
    ubuntu linux 环境下的程序打包
    windows编程基础概念
    gRPC 拦截器 & 自定义命名解析
    作为测试工程师的发展之路-如何做好测试开开发？
    Tranalyzer2安装及简单使用教程
  • 原文地址：https://blog.csdn.net/weixin_62370184/article/details/140994642