Qt WebSocket的基本使用

拼搏现实的明天。 2023-02-25 11:26 26阅读 0赞

（只是作为个人纪录，如果你要使用的话在 Qt 示例里搜 websocket 看官方 Demo 就行了，代码量不多）

# 0.前言 #

（参见Qt文档说明）WebSockets 是一种通过单个 TCP 连接提供全双工通信信道的 web 技术。2011年，IETF 将 WebSocket 协议标准化为 RFC 6455 。Qt 提供的 QWebSocket 既可以用于客户端应用程序，也可以用于服务端应用程序，接口大部分和 QTcpSocket 一致。

QWebSocket 当前不支持 WebSocket 扩展和 WebSocket 子协议，仅支持 WebSocket 协议的版本13 （如 RFC 6455 中所述）。

# 1.QWebSocket与QWebSocketServer的基本使用 #

（完整代码链接，包含 Qt Server/Client 和 HTML Client：[https://github.com/gongjianbo/MyTestCode/tree/master/Qt/QtWebSocketDemo][https_github.com_gongjianbo_MyTestCode_tree_master_Qt_QtWebSocketDemo]）

要使用 Qt 的 WebSocket 模块，先在 pro 文件中加上 websockets：

QT += websockets

这是我 Demo 界面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70][]

对于服务端，需要用到 QWebSocketServer 和 QWebSocket 两个类。创建 Server 对象后，使用 listen 函数监听端口，新的连接到来时，触发 newConnection 信号，这时候才槽函数种使用 nextPendingConnection 函数获取到这个 Socket 连接。

主要实现代码：

WebSocketServer::WebSocketServer(QWidget *parent) :
        QWidget(parent),
        ui(new Ui::WebSocketServer)
    {
        ui->setupUi(this);
    
        //构造：QWebSocketServer（const QString& serverName,QWebSocketServer::SslMode secureMode,QObject *parent=nullptr）
        //使用给定的serverName构造一个新的QWebSocketServer。
        //该服务器名称将在HTTP握手阶段被用来识别服务器。它可以为空，此时不会将服务器名称发送给客户端。
        //SslMode指示服务器是通过wss（SecureMode）还是ws（NonSecureMode）运行
        //QWebSocketServer::SecureMode服务器以安全模式运行（通过wss）
        //QWebSocketServer::NonSecureMode服务器以非安全模式运行（通过ws）
        server=new QWebSocketServer("Server",QWebSocketServer::NonSecureMode,this);
    
        //服务器监听
        ui->btnSend->setEnabled(false);
        connect(ui->btnListen,&QPushButton::clicked,[this](){
            if(ui->btnListen->text()!="Listen"){
                ui->btnSend->setEnabled(false);
                ui->btnListen->setText("Listen");
                clearClient();
                server->close();
            }else{
                QHostAddress address;
                if(ui->editAddress->text()=="Any"){
                    address=QHostAddress::Any;
                }else{
                    address=QHostAddress(ui->editAddress->text());
                }
                //判断是否连接上
                if(server->listen(address,ui->editPort->text().toUInt())){
                    ui->btnSend->setEnabled(true);
                    ui->btnListen->setText("Dislisten");
                }
            }
        });
        //新的连接进来
        connect(server,&QWebSocketServer::newConnection,this,&WebSocketServer::onNewConnection);
        //发送消息给客户端
        connect(ui->btnSend,&QPushButton::clicked,[this](){
            if(!ui->editSend->toPlainText().isEmpty())
                emit sendMessage(ui->editSend->toPlainText());
        });
    }
    
    WebSocketServer::~WebSocketServer()
    {
        clearClient();
        server->close();
        delete ui;
    }
    
    void WebSocketServer::clearClient()
    {
        for(int i=clientList.count()-1;i>=0;i--)
        {
            //qDebug()<<i;
            clientList.at(i)->disconnect();
            clientList.at(i)->close();
        }
        qDeleteAll(clientList);
        clientList.clear();
    }
    
    void WebSocketServer::onNewConnection()
    {
        QWebSocket *socket=server->nextPendingConnection();
        if(!socket)
            return;
        clientList.push_back(socket);
        ui->editRecv->append(QString("[New Connect] Address:%1  Port:%2")
                             .arg(socket->peerAddress().toString())
                             .arg(socket->peerPort()));
    
        //收到消息
        connect(socket,&QWebSocket::textMessageReceived,[this](const QString &msg){
            ui->editRecv->append(msg);
        });
        //发送消息
        connect(this,&WebSocketServer::sendMessage,socket,&QWebSocket::sendTextMessage);
        //断开连接，释放
        connect(socket,&QWebSocket::disconnected,[this,socket](){
            clientList.removeAll(socket);
            socket->deleteLater();
        });
    }

对于客户端，好像没有指定 bind 自己端口的接口，只能指定服务端的 Url。通过 open 函数连接服务端的 Url ，使用 close 关闭连接。数据到来的时候有 textMessageReceived 和 binaryMessageReceived 等信号触发，也可以调用 sendTextMessage 或 sendBinaryMessage 发送数据。

主要实现代码：

WebSocketClient::WebSocketClient(QWidget *parent) :
        QWidget(parent),
        ui(new Ui::WebSocketClient)
    {
        ui->setupUi(this);
    
        //构造：QWebSocket(const QString &origin = QString(), QWebSocketProtocol::Version version = QWebSocketProtocol::VersionLatest, QObject *parent = nullptr)
        //使用给定的源，要使用的协议版本和parent创建一个新的QWebSocket 。
        client=new QWebSocket;
        client->setParent(this);
    
        //连接服务端
        connect(ui->btnOpen,&QPushButton::clicked,[this](){
            if(ui->btnOpen->text()!="Open"){
                client->close();
            }else{
                client->open(QUrl(ui->editUrl->text()));
            }
        });
        //连接结果
        ui->btnSend->setEnabled(false);
        connect(client,&QWebSocket::connected,[this](){
            ui->btnSend->setEnabled(true);
            ui->btnOpen->setText("Close");
            ui->footLabel->setText(QString("Address:%1  Port:%2")
                                   .arg(client->localAddress().toString())
                                   .arg(client->localPort()));
            qDebug()<<"connected";
        });
        connect(client,&QWebSocket::disconnected,[this](){
            ui->btnSend->setEnabled(false);
            ui->btnOpen->setText("Open");
            qDebug()<<"disconnected";
        });
        //发送数据
        connect(ui->btnSend,&QPushButton::clicked,[this](){
            if(!ui->editSend->toPlainText().isEmpty())
                client->sendTextMessage(ui->editSend->toPlainText());
        });
        //接收数据
        connect(client,&QWebSocket::textMessageReceived,[this](const QString &msg){
            ui->editRecv->append(msg);
        });
    }
    
    WebSocketClient::~WebSocketClient()
    {
        //结束的时候没关会异常
        client->close();
        delete ui;
    }

网页 WebSocket 客户端的简单 Demo：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Qt WebSocket Demo</title>
    </head>
    
    <body>
        <input type="text" id="edit_url" value="ws://localhost:12345" />
        <input type="button" id="btn_open" value="Open" onclick="doOpen()" />
        <br />
        <p>Recv:</p>
        <br />
        <textarea id="edit_recv" cols="50" rows="10"></textarea>
        <br />
        <p>Send:</p>
        <br />
        <textarea id="edit_send" cols="50" rows="10">Hello</textarea>
        <br />
        <input type="button" value="Send" onclick="doSend()" />
        <script>
            var edit_url = document.getElementById("edit_url");
            var btn_open = document.getElementById("btn_open");
            var edit_recv = document.getElementById("edit_recv");
            var edit_send = document.getElementById("edit_send");
    
            var client = null;
    
            function doOpen() {
                console.log("open")
                if (!("WebSocket" in window)) {
                    //不支持WebSocket
                    return;
                }
                if (client === null) {
                    client = new WebSocket(edit_url.value);
    
                    client.onopen = function () {
                        btn_open.value = "Close";
                    }
                    //收到数据后追加到尾巴上
                    client.onmessage = function (event) {
                        edit_recv.value += String(event.data);
                    }
                    client.onclose = function () {
                        client = null;
                        btn_open.value = "Open";
                    }
                } else {
                    client.close();
                    client = null;
                }
            }
    
            function doSend() {
                console.log("send")
                if (client === null)
                    return;
                client.send(edit_send.value);
            }
        </script>
    </body>
    
    </html>

# 2.使用带SSL的WebSocket（略，暂时没用到） #

# 3.提示\[LspTrace\]ReadAccConfig returns false! #

![20200712222142181.png][]

Windows 命令行（管理员权限）输入 netsh winsock reset，等出现提示后重启电脑。

![20200712222413691.png][]

参考：[https://blog.csdn.net/zxl\_1996/article/details/86333945][https_blog.csdn.net_zxl_1996_article_details_86333945]

Netsh winsock reset是一个命令提示程序，用于将winsock目录重置为默认设置或清除状态。如有时候上不了网或者网络出现问题经常用到它，简单地理解就是：重置程序通过操作系统链接网络的入口点。虽然使用此命令可以恢复网络连接，也应谨慎使用，因为可能需要重新安装LSPLSP: layered service privider 分层服务提供商。LSP是TCP/IP等协议的接口。

参考：[https://baijiahao.baidu.com/s?id=1621092219410327325&wfr=spider&for=pc][https_baijiahao.baidu.com_s_id_1621092219410327325_wfr_spider_for_pc]

# 4.参考 #

Qt 文档：[https://doc.qt.io/qt-5/qwebsocket.html][https_doc.qt.io_qt-5_qwebsocket.html]

HTML Websocket：[https://www.runoob.com/html/html5-websocket.html][https_www.runoob.com_html_html5-websocket.html]

[https_github.com_gongjianbo_MyTestCode_tree_master_Qt_QtWebSocketDemo]: https://github.com/gongjianbo/MyTestCode/tree/master/Qt/QtWebSocketDemo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70]: /images/20230209/39d26b29b375448aacdbfb9ffa387eb8.png
[20200712222142181.png]: /images/20230209/2981289da60a4d6fa7f4cb0455f13c23.png
[20200712222413691.png]: /images/20230209/27fc831e5a814e8782412d013947ec28.png
[https_blog.csdn.net_zxl_1996_article_details_86333945]: https://blog.csdn.net/zxl_1996/article/details/86333945
[https_baijiahao.baidu.com_s_id_1621092219410327325_wfr_spider_for_pc]: https://baijiahao.baidu.com/s?id=1621092219410327325&wfr=spider&for=pc
[https_doc.qt.io_qt-5_qwebsocket.html]: https://doc.qt.io/qt-5/qwebsocket.html
[https_www.runoob.com_html_html5-websocket.html]: https://www.runoob.com/html/html5-websocket.html