Qt实战：云曦聊天室篇

Posted 2022-08-25 灵彧universe

Qt实战：云曦聊天室篇

---

@TOC

---

前言

基于Qt的网络聊天室，可进行群聊，私聊，添加好友，创建群聊，添加群聊等功能

---

一、云曦聊天室效果图

1. 登录界面：

如图1所示，输入用户名和密码，点击登录，即可进入如图3所示的好友列表界面。

2. 注册界面：

如图2所示，输入用户名和密码，点击立即注册按钮，即可进行相关的注册功能，注册成功后，点击登录，即可进入如图3所示的好友列表界面。

3. 好友列表界面：

如图3所示，即为好友列表界面，用户可在此进行私聊，群聊，好友的添加，创建群聊，加入群聊等功能。

4. 好友上线提醒：

如图4所示，用户可在图3界面看到用户的相关好友的上下线提醒通知，以及关闭图3后，在左下角同QQ的托盘效果。

5. 私聊界面：

如图5所示，用户可选择任意一个好友，进行相关的私聊，其中，包括字体的样式、大小、加粗、倾斜、以及聊天记录的保存、清空等功能。

6. 私聊界面：

如图6所示，用户可在此界面进行群聊。

二、相关源代码

项目框架图：

1. .cpp部分

#include "privatechat.h"
#include "ui_privatechat.h"
#include <QLabel>
#include <QPushButton>
#include <QDesktopWidget>
#include <QWidget>
#include <QToolButton>
#include <QColorDialog>

PrivateChat::PrivateChat(QTcpSocket *s, QString u, QString f, Chatlist *c, QList<ChatWidgetInfo> *l, QWidget *parent) :
    QWidget(parent),
    ui(new Ui::PrivateChat)

    ui->setupUi(this);
    socket = s;
    userName = u;
    friendName = f;
    mainWidget = c;
    chatWidgetList = l;

    connect(mainWidget, &Chatlist::signal_to_sub_widget, this, &PrivateChat::show_text_slot);
    connect(ui->exitBtn, &QPushButton::clicked,this, &GroupChat::close);

    setWindowIcon(QPixmap(":images//C3.png"));
    QLabel *  bglabel =  new QLabel;
    bglabel=ui ->label;
    bglabel ->setPixmap(QPixmap(":images//底框.png"));
    bglabel ->setScaledContents(true);

    QLabel *  bglabel1 =  new QLabel;
    bglabel1=ui ->label_2;
    bglabel1 ->setPixmap(QPixmap(":images//主导航框.png"));
    bglabel1->setScaledContents(true);
    //控件透明化
    ui->textEdit->setStyleSheet("background-color:rgba(0,0,0,0);");
    ui->listWidget->setStyleSheet("background-color:rgba(0,0,0,0);");
    ui->textBrowser->setStyleSheet("background-color:rgba(0,0,0,0);");
    ui->widget_5->setStyleSheet("background-color:rgba(0,0,0,0);");

    //窗口去边框
    this -> setWindowFlags(Qt::FramelessWindowHint);

    ui->pushButton->setStyleSheet(
                         //正常状态样式
                         "QPushButton"
                         "border-radius:5px;"//设置圆角半径
                         ""
                         "QPushButton:hover"
                                              "background-color:#5f9ae6;"
                                              "color:white;"
                                              "");
    ui->fileButton->setStyleSheet(
                         //正常状态样式
                         "QPushButton"
                         "border-radius:5px;"//设置圆角半径
                         ""
                         "QPushButton:hover"
                                              "background-color:#5f9ae6;"
                                              "color:white;"
                                              "");
    ui->exitBtn->setStyleSheet(
                //正常状态样式
                "QPushButton"
                //"background-color:#67a6f8;"//设置按钮背景色
                "border-radius:5px;"//设置圆角半径
                "color:white;"//设置按钮字体颜色
                ""
                "QPushButton:hover"
                                     "background-color:#5f9ae6;"
                                     "color:white;"
                                     "");
    ui->exitBtn_3->setStyleSheet(
                //正常状态样式
                "QPushButton"
                //"background-color:#67a6f8;"//设置按钮背景色
                "border-radius:5px;"//设置圆角半径
                "color:white;"//设置按钮字体颜色
                ""
                "QPushButton:hover"
                                     "background-color:#5f9ae6;"
                                     "color:white;"
                                     "");
    ui->exitBtn_9->setStyleSheet(
                //正常状态样式
                "QPushButton"
                //"background-color:#67a6f8;"//设置按钮背景色
                "border-radius:5px;"//设置圆角半径
                "color:white;"//设置按钮字体颜色
                ""
                "QPushButton:hover"
                                     "background-color:#5f9ae6;"
                                     "color:white;"
                                     "");
    ui->exitBtn_5->setStyleSheet(
                //正常状态样式
                "QPushButton"
                //"background-color:#67a6f8;"//设置按钮背景色
                "border-radius:5px;"//设置圆角半径
                "color:white;"//设置按钮字体颜色
                ""
                "QPushButton:hover"
                                     "background-color:#5f9ae6;"
                                     "color:white;"
                                     "");
    ui->exitBtn_6->setStyleSheet(
                //正常状态样式
                "QPushButton"
                //"background-color:#67a6f8;"//设置按钮背景色
                "border-radius:5px;"//设置圆角半径
                "color:white;"//设置按钮字体颜色
                ""
                "QPushButton:hover"
                                     "background-color:#5f9ae6;"
                                     "color:white;"
                                     "");
    ui->exitBtn_7->setStyleSheet(
                //正常状态样式
                "QPushButton"
                //"background-color:#67a6f8;"//设置按钮背景色
                "border-radius:5px;"//设置圆角半径
                "color:white;"//设置按钮字体颜色
                ""
                "QPushButton:hover"
                                     "background-color:#5f9ae6;"
                                     "color:white;"
                                     "");
    ui->exitBtn_8->setStyleSheet(
                //正常状态样式
                "QPushButton"
                //"background-color:#67a6f8;"//设置按钮背景色
                "border-radius:5px;"//设置圆角半径
                "color:white;"//设置按钮字体颜色
                ""
                "QPushButton:hover"
                                     "background-color:#5f9ae6;"
                                     "color:white;"
                                     "");

    ui->pushButton_2->setStyleSheet(
                         //正常状态样式
                         "QPushButton"
                         "border-radius:5px;"//设置圆角半径
                         ""
                         "QPushButton:hover"
                                              "background-color:#5f9ae6;"
                                              "color:white;"
                                              "");
    ui->pushButton_3->setStyleSheet(
                         //正常状态样式
                         "QPushButton"
                         "border-radius:5px;"//设置圆角半径
                         ""
                         "QPushButton:hover"
                                              "background-color:#5f9ae6;"
                                              "color:white;"
                                              "");
    ui->pushButton_4->setStyleSheet(
                         //正常状态样式
                         "QPushButton"

                         "border-radius:5px;"//设置圆角半径
                         ""
                         "QPushButton:hover"
                                              "background-color:#5f9ae6;"
                                              "color:white;"
                                              "");
    ui->pushButton_5->setStyleSheet(
                         //正常状态样式
                         "QPushButton"

                         "border-radius:5px;"//设置圆角半径
                         ""
                         "QPushButton:hover"
                                              "background-color:#5f9ae6;"
                                              "color:white;"
                                              "");
    ui->pushButton_6->setStyleSheet(
                         //正常状态样式
                         "QPushButton"
                         "border-radius:5px;"//设置圆角半径
                         ""
                         "QPushButton:hover"
                                              "background-color:#5f9ae6;"
                                              "color:white;"
                                              "");
    ui->sendButton->setStyleSheet(
                         //正常状态样式
                         "QPushButton"
                         "background-color:#8D8D8D;"//设置按钮背景色
                         "border-radius:15px;"//设置圆角半径
                         "color:white;"//设置按钮字体颜色
                         ""
                         "QPushButton:hover"
                                              "background-color:#5f9ae6;"
                                              "color:white;"
                                              "");

    //////////////////////////////////////辅助功能//////////////////////////////////////////
    //字体

    connect(ui->fontComboBox,&QFontComboBox::currentFontChanged,this,[=](const QFont &font)
            ui->textEdit->setCurrentFont(font);
            ui->textEdit->setFocus();
        );

    //字号
    void (QComboBox:: * cbxSingal)(const QString &text) = &QComboBox::currentIndexChanged;
    connect(ui->comboBox,cbxSingal,this,[=](const QString &text)
            ui->textEdit->setFontPointSize(text.toDouble());
            ui->textEdit->setFocus();
        );

    //加粗
    connect(ui->pushButton_3,&QToolButton::clicked,this,[=](bool checked)
           if(checked)
           
               ui->textEdit->setFontWeight(QFont::Bold);
           
           else
           
               ui->textEdit->setFontWeight(QFont::Normal);
           
           ui->textEdit->setFocus();
       );

    //倾斜
    connect(ui->pushButton_4,&QToolButton::clicked,this,[=](bool checked)

            ui->textEdit->setFontItalic(checked);

            ui->textEdit->setFocus();
        );

    //下划线
    connect(ui->pushButton_5,&QToolButton::clicked,this,[=](bool checked)

           ui->textEdit->setFontUnderline(checked);

           ui->textEdit->setFocus();
       );

    //设置文本颜色
    connect(ui->pushButton_6,&QToolButton::clicked,[=]()
    QColor color = QColorDialog::getColor(Qt::red); //color对象可以在widget.h中定义私有成员
    ui->textEdit->setTextColor(color);

    );

    //保存聊天记录
    connect(ui->pushButton,&QToolButton::clicked,[=]()
        if( ui->textBrowser->document()->isEmpty())
        
           QMessageBox::warning(this,"警告","内容不能为空");
           return;
        
        else
        
            QString path = QFileDialog::getSaveFileName(this,"保存聊天记录","聊天记录","(*.txt)");
            QFile file(path);
            //打开模式加换行操作
            file.open(QIODevice::WriteOnly | QFile::Text);
            QTextStream stream(&file);
            stream << ui->textBrowser->toPlainText();
            file.close();

        
      );

    //清空聊天记录
    connect(ui->pushButton_2,&QToolButton::clicked,[=]()
           ui->textBrowser->clear();
   );



PrivateChat::~PrivateChat()

    delete ui;


void PrivateChat::on_sendButton_clicked()

    QString text = ui->textEdit->toPlainText();
    QJsonObject obj;
    obj.insert("cmd", "private_chat");
    obj.insert("user_from", userName);
    obj.insert("user_to", friendName);
    obj.insert("text", text);
    QByteArray ba = QJsonDocument(obj).toJson();
    socket->write(ba);

    ui->textEdit->clear();
    ui->textBrowser->append(text);
    ui->textBrowser->append("\\n");


void PrivateChat::show_text_slot(QJsonObject obj)

    if (obj.value("cmd").toString() == "private_chat")
    
        if (obj.value("user_from").toString() == friendName)
        
            if (this->isMinimized())
            
                this->showNormal();
            
            this->activateWindow();
            ui->textBrowser->append(obj.value("text").toString());
            ui->textBrowser->append("\\n");
        
    


void PrivateChat::closeEvent(QCloseEvent *event)

    for (int i = 0; i < chatWidgetList->size(); i++)
    
        if (chatWidgetList->at(i).name == friendName)
        
            chatWidgetList->removeAt(i);
            break;
        
    
    event->accept();


void PrivateChat::on_fileButton_clicked()

    QString fileName = QFileDialog::getOpenFileName(this, "发送文件", QCoreApplication::applicationFilePath());
    if (fileName.isEmpty())
    
        QMessageBox::warning(this, "发送文件提示", "请选择一个文件");
    
    else
    
        QFile file(fileName);
        file.open(QIODevice::ReadOnly);
        QJsonObject obj;
        obj.insert("cmd", "send_file");
        obj.insert("from_user", userName);
        obj.insert("to_user", friendName);
        obj.insert("length", file.size());
        obj.insert("filename", fileName);
        QByteArray ba = QJsonDocument(obj).toJson();
        socket->write(ba);
    

2. .h部分

#ifndef PRIVATECHAT_H
#define PRIVATECHAT_H

#include <QWidget>
#include <QTcpSocket>
#include <QJsonObject>
#include <QJsonDocument>
#include <QList>
#include <QFileDialog>
#include <QCoreApplication>
#include <QFile>

class Chatlist;
struct ChatWidgetInfo;
#include "chatlist.h"

namespace Ui 
class PrivateChat;


class PrivateChat : public QWidget

    Q_OBJECT

public:
    explicit PrivateChat(QTcpSocket *s, QString u, QString f, Chatlist *c, QList<ChatWidgetInfo> *l, QWidget *parent = 0);
    ~PrivateChat();
    void closeEvent(QCloseEvent *event);

private slots:
    void on_sendButton_clicked();
    void show_text_slot(QJsonObject);

    void on_fileButton_clicked();

private:
    Ui::PrivateChat *ui;
    QTcpSocket *socket;
    QString userName;
    QString friendName;
    Chatlist *mainWidget;
    QList<ChatWidgetInfo> *chatWidgetList;
    QPoint  label;
;

#endif // PRIVATECHAT_H

总结

以上是云曦聊天室（YXChatting）的相关简介和私聊部分代码，详细代码与相关讲解会后续逐步更新，如果有急于使用的，可以通过以下方式进行下载和使用，以及访问我主页的Qt界面优化系列文章，里面有相关细节的界面优化代码。
如有问题，也可直接私聊或在下方评论，技术萌新，初来乍到，如有不妥之处，还请各位大佬进行指正与谅解。

微信公众号下载地址：
搜索关注微信公众号“云曦智划”，回复“云曦Chatting”，即可免费获取完整源代码与可执行程序。希望能帮助到大家，感谢大家支持～(￣▽￣～)~