往期回顾

【QT进阶】Qt http编程之nlohmann json库使用的简单介绍-CSDN博客

【QT进阶】Qt http编程之websocket的简单介绍-CSDN博客

【QT进阶】Qt http编程之实现websocket server服务器端-CSDN博客

 【QT进阶】Qt http编程之实现websocket client客户端

一、最终效果

通过给定服务器端的url，实现客户端连接服务器端

二、具体实现

1、代码思路

 创建一个WebSocket客户端演示程序，通过Qt框架实现UI界面和WebSocket连接功能。用户可以输入WebSocket服务器的URL，连接服务器，发送和接收消息，并断开连接。通过信号和槽机制实现WebSocket连接状态的更新和消息的处理。

2、主要方法

 2.1设置服务器端url

在构造函数里设置需要访问的服务器端url，并设置相应的信号槽机制

WebSocketClientDemo::WebSocketClientDemo(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);

    ui.lineEdit_URL->setText("ws://192.168.0.109:8000/topic=10001"); //访问的服务器端url
    ui.label_ConnectStatus->clear();


    //成功连接时执行onconnected()信号
    connect(&m_websocket, SIGNAL(connected()), this, SLOT(onconnected()));
    //断开连接时执行closeConnection()信号
    connect(&m_websocket, SIGNAL(disconnected()), this, SLOT(closeConnection()));
    //收到服务器端发送的消息执行onTextMessageReceived(QString)信号
    connect(&m_websocket, SIGNAL(textMessageReceived(QString)), this, SLOT(onTextMessageReceived(QString)));
}

2.2连接服务器 

void WebSocketClientDemo::on_btnConnect_clicked()
{
    QString _text = ui.lineEdit_URL->text();
    QUrl url = QUrl(_text);
    m_websocket.open(url);
}

2.3发送消息 

void WebSocketClientDemo::on_btnSend_clicked()
{
    QString msg = ui.textEdit_send->document()->toPlainText();

    string dataMsg = R"(
        "sender":"10002",
        "receiver":"10001",
        "msg":"你好"
    )";
    
    m_websocket.sendTextMessage(msg);
}

三、服务器端与客户端通信流程分析 

代码示例很简单，更重要的是理解怎么实现的客户端和服务器端的通信功能

1、通信流程

1、服务器端启动WebSocket服务器，并监听指定的IP和端口。

2、客户端通过WebSocket协议连接到服务器端。

3、服务器端接受客户端的连接请求，建立WebSocket连接。

4、一旦连接建立成功，服务器端和客户端之间可以通过该WebSocket连接进行实时通信。

5、服务器端可以向客户端发送消息，客户端也可以向服务器端发送消息。

6、服务器端和客户端可以通过事件处理机制来处理连接、消息接收和断开等事件。

2、具体分析

服务器端通过QWebSocketServer类创建WebSocket服务器实例，然后监听客户端的连接请求。当有新的客户端连接到服务器时，会触发onNewConnection()槽函数，服务器端会保存连接，并更新在线用户列表。服务器端可以通过processTextMessage()函数处理接收到的消息，并实现消息的转发。当客户端断开连接时，会触发socketDisconnected()函数，服务器端会从在线用户列表中移除断开的客户端。

---

以上就是如何实现websocket client客户端的简单介绍

都看到这里了，点个赞再走呗朋友~

加油吧，预祝大家变得更强！