前两天忙着面试，所以断更了两天，这一集给聊天室搞个ui界面以及传输图片的功能。前两集链接在这第二集手搓多人聊天室项目-部署云服务器，第一集手搓多人聊天室项目

客户端的ui界面设计的有点潦草

客户端开发环境：QT（windows）

服务器端开发环境：vscode（windows）

首先用QT设计个简单的ui界面

testEdit	用于显示接收和自己发送的消息
InputTextEdit	用于输入消息
pushButton	发送按键
sendImageButton	发送图片按键

程序运行后通过autoConnect连接服务器以及连接信号槽

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
    , tcpSocket(new QTcpSocket(this))
    , messageModel(new QStandardItemModel(this))
{
    ui->setupUi(this);
    setupConnections();
    ui->InputTextEdit->installEventFilter(this);
    ui->textEdit->setReadOnly(true);  // 设置为只读，用于显示消息
    ui->textEdit->setAcceptRichText(true);  // 接受富文本
    ui->textEdit->setLineWrapMode(QTextEdit::WidgetWidth);
    QTimer::singleShot(5000, this, &MainWindow::autoConnect);
}
void MainWindow::autoConnect()
{
    tcpSocket->connectToHost(SERVER_IP, SERVER_PORT);
}
void MainWindow::setupConnections()
{
    // 连接TCP socket的信号槽
    connect(tcpSocket, &QTcpSocket::connected, this, &MainWindow::onConnected);
    connect(tcpSocket, &QTcpSocket::disconnected, this, &MainWindow::onDisconnected);
    connect(tcpSocket, &QTcpSocket::readyRead, this, &MainWindow::onSocketReadyRead);
}

发送文本按键程序：

点击按键后将InputTextEdit的内容进行处理，因为要发送文本消息和图片消息，所以对内容进行简单的处理，发送给服务器的消息由消息类型、消息长度、消息内容组成

void MainWindow::on_pushButton_clicked()
{
    static int times = 0;
    QString message = ui->InputTextEdit->toPlainText().trimmed();
    if(!message.isEmpty())
    {
        QByteArray data;
        QDataStream stream(&data, QIODevice::WriteOnly);
        stream << (quint8)TextMessage;
        QByteArray textData = message.toUtf8();
        stream << (quint32)textData.size();
        stream.writeRawData(textData.constData(), textData.size());
        tcpSocket->write(data);
        ui->InputTextEdit->clear();
        if(times == 0)
        {
            m_nickname = message;
            times = 1;
            QString tmp = "系统: 你的昵称是：" + m_nickname;
            addMessage(tmp); // 新增：显示昵称设置成功的提示
        }
        else
        {
            QString timestamp = QDateTime::currentDateTime().toString("hh:mm:ss");
            QString fullMessage = QString("[%1] [%2](我): %3").arg(timestamp, m_nickname, message);
            addMessage(fullMessage);
        }
    }
}

发送图片按键程序:

使用QPixmap加载图片，然后将QPixmap转换为字节数组，按自定义TCP协议封装消息类型+消息长度+消息内容。

最终效果如下：

完整代码可在公众号中获取，关键词：QT客户端程序

另外最近也是秋招的高峰期了，有需要帮忙看简历的同学也可以在公众号中联系，可以针对简历提出一些修改建议