手把手带你做一个自己的网络调试助手(3) - TCP客户端

Tcp客户端ui界面搭建:

ui界面图

运行效果图

实现Tcp客户端的连接

效果演示

实现Tcp客户端的接收

建立接收的信号与槽

//在 构造函数 里面建立连接

//建立接收消息的信号与槽

connect(client,SIGNAL(readyRead()),this,SLOT(mRead_Data_From_Server()));

实现接收槽函数

//接收消息槽函数
void Widget::mRead_Data_From_Server()
{
  ui->textEditRev->insertPlainText(client->readAll());
}

效果演示

、

实现Tcp客户端的发送

实现发送槽函数

//TcpServer已经把处理写好了，我们只需要向QTcpSocket对象中write即可

void Widget::on_btnSend_clicked()
{
    // 读取发送框的内容进行发送
    client->write(ui->textEditSend->toPlainText().toUtf8());
}

效果演示

实现Tcp客户端的ui页面优化

优化连接 槽函数

//添加setEnabled  的状态控制

void Widget::on_btnConnect_2_clicked()
{
    qDebug()<<"connecting";
    //    virtual void
    //    connectToHost(const QHostAddress &address, quint16 port, QIODevice::OpenMode openMode = ReadWrite)

    // 读取客户端输入的ip 和 端口号进行连接
    client->connectToHost(ui->lineEditIpAddr->text(),ui->lineEditPort->text().toUInt());
    //判断是否已经连接
    if(client->state() == QAbstractSocket::ConnectedState ||
       client->state() == QAbstractSocket::ConnectingState){
     ui->textEditRev->append("连接成功!"); //在文本框内给出连接提示
     //设置控件状态
     ui->btnConnect_2->setEnabled(false);
     ui->lineEditPort->setEnabled(false);
     ui->lineEditIpAddr->setEnabled(false);
     ui->btnDisconnect->setEnabled(true);
     ui->btnSend->setEnabled(true);

    }


}

实现断开连接槽函数

void Widget::on_btnDisconnect_clicked()
{
    client->close();
    ui->textEditRev->append("断开连接!");
    //设置控件状态
    ui->btnConnect_2->setEnabled(true);
    ui->lineEditPort->setEnabled(true);
    ui->lineEditIpAddr->setEnabled(true);
    ui->btnDisconnect->setEnabled(false);
    ui->btnSend->setEnabled(false);

}

实现效果

设置字体颜色

设置字体函数

//设置字体颜色
void Widget::mInsertTextByColor(Qt::GlobalColor color,QString str)
{
    QTextCursor cursor = ui->textEditRev->textCursor();//获取光标对象
    // void setForeground(const QBrush &brush)
    QTextCharFormat format;
    // QBrush::QBrush(const QColor &color) //QBrush的构造
    // QColor::QColor(Qt::GlobalColor color) //QColor的构造
    format.setForeground(QBrush(QColor((color))));//构造函数实例化format对象
    cursor.setCharFormat(format); // 设置样式

    cursor.insertText(str);//在当前光标位置插入指定颜色的文本
}

修改的发送槽函数

//发送消息槽函数
void Widget::on_btnSend_clicked()
{
    // 读取发送框的内容进行发送
    QByteArray sendData = ui->textEditSend->toPlainText().toUtf8();
    client->write(sendData);
    mInsertTextByColor(Qt::red,sendData);

}

修改的接收槽函数

//接收消息槽函数
void Widget::mRead_Data_From_Server()
{
 mInsertTextByColor(Qt::black,client->readAll());
}

效果演示: