# WeChatClient

**Repository Path**: quilling/we-chat-client

## Basic Information

- **Project Name**: WeChatClient
- **Description**: 这是一个仿微信的客户端聊天室项目。(客户端)
- **Primary Language**: C++
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-08-03
- **Last Updated**: 2025-05-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 仿微信的即时通讯聊天系统                                                             (客户端)



<div align="center">
    <img src="./readmeImage/wechat.png" alt="wechat.png" />
</div>

# 一、项目介绍

这是一个仿微信的客户端聊天室项目，使用 Qt 实现客户端界面与后端数据交互，涵盖登录注册、气泡聊天对话框、好友搜索、历史消息查看、好友申请管理、个人详情查看和会话详情等模块。项目通过 `QSS` 和 `Qt` 动画美化界面，增强用户体验，支持多平台部署。



**功能支持**：消息发送、接收、存储与展示，添加或删除好友，历史聊天记录查看，个人信息修改，群聊创建与管理等。



**技术栈**：

- **技术框架**：`Qt`、`CMake`
- **网络通信**：`HTTP` 协议、`WebSocket `协议
- **界面美化**：`QSS`、`Qt` 动画
- **设计模式**：单例模式  工厂模式
- **序列化**：`Protobuf`
- **信号与槽**：`Qt` 的信号与槽机制
- **图形处理**：`Qt` 绘图系统



**项目特点**：

- **UI设计：** 使用Qt的丰富组件和`QSS` 进行界面美化，同时使用`Qt`动画平滑过渡效果，支持**系统托盘**提升了用户操作的便捷性。

- **群聊功能**：支持群聊的创建与管理，基于 `WebSocket` 实现多人实时通信，确保群成员消息同步的即时性和可靠性。
- **语音消息**：通过 `QAudioRecorder` 实现语音消息录制，并通过 `WebSocket` 实现语音消息的实时传输，保障高质量音频传输与客户端的无缝播放体验。
- **文件传输**：实现文件传输功能，支持图片、文档等多类型文件的发送与接收，提升应用的实用性。
- **多媒体消息展示**：支持多种消息格式的展示，包括图片、语音、文件等，消息气泡自动适应内容，提供了直观的多媒体聊天体验。
- **跨平台支持**：通过 `CMake` 实现跨平台构建，支持在 `Windows` 和 `Linux` 环境下部署，利用 `Qt` 的跨平台特性，保证了界面与功能的一致性，提升了系统的可扩展性和可维护性。



**客户端开发总结**

1. 使用 `Qt`的常用组件/布局管理器,实现界面的布局.
2. 使用 `QSS` 针对界面做样式上的优化.
3. 通过自定义控件,实现比较复杂的界面效果.
4. 通过信号槽,实现了各种需要的人机交互,
5. 通过 `protobuf` 实现了通信数据的序列化和反序列化.
6. 基于 `HTTP/Websocket` 实现和服务器之间的 异步通信
7. 还是用了**多媒体组件**,实现语音的录制和发送,
8. 应用了单例模式和工厂模式,进行代码的组织.
9. 基于 `QPainter` APl 实现了本地随机验证码的生成.
10. 搭建了 `MockServer` 辅助客户端进行各个功能点的测试

----



# 二、界面展示

**登录界面**
<div align="center">
<img src="./readmeImage/login.gif" alt="login.gif" />
</div>


**注册界面**
<div align="center">
<img src="./readmeImage/register.gif" alt="register.gif" />
</div>


**个人信息展示**
<div align="center">
<img src="./readmeImage/myself.gif" alt="myself.gif" />
</div>




**前端界面展示：**

- **消息显示界面**

<div align="center">
    <img src="./readmeImage/friendDetail.gif" alt="messageShowArea.png" style="width: 75%; height: 75%;"/>
</div>



- **好友详情界面**



<div align="center">
    <img src="./readmeImage/userInfoDialog.png" alt="userInfoDialog.png" />
</div>



- **搜索用户界面**

<div align="center">
<img src="./readmeImage/searchFriend.gif" alt="searchFriend.gif">
</div>


- **好友详情界面**

<div align="center">
<img src="./readmeImage/friendDetail.gif" alt="friendDetail.gif">
</div>




- **群组详情界面**



<div align="center">
    <img src="./readmeImage/groupDetail.gif" alt="groupDetail.gif">
</div>

---


   <div align="center">
        <img src="./readmeImage/groupsessiondetaildialog.png" alt="groupsessiondetaildialog.png" style="width: 30%; height: 30%;"/>
    </div>



- **好友选择界面**

<div align="center">
    <img src="./readmeImage/chooseFriend.gif" alt="chooseFriend.gif">
</div>


---


   <div align="center">
        <img src="./readmeImage/chooseFriendItem.png" alt="chooseFriendItem.png" style="width: 60%; height: 60%;"/>
    </div>



- **历史消息界面**

  - 按关键字搜索

<div align="center">
    <img src="./readmeImage/keywordHistoryMessageDialog.gif" alt="keywordHistoryMessageDialog.gif">
</div>

---


<div align="center">
    <img src="./readmeImage/keywordHistoryMessageDialog.png" alt="keywordHistoryMessageDialog" style="width: 50%; height: 50%;"/>
</div>


​    

  - 按时间进行搜索

  

<div align="center">
    <img src="./readmeImage/dateHistoryMessageDialog.png" alt="dateHistoryMessageDialog" style="width: 50%; height: 50%;" />
</div>
  


- 语音消息

<div align="center">
    <img src="./readmeImage/voiceMessage.gif" alt="voiceMessage.gif">
</div>




- 语音转文字

<div align="center">
    <img src="./readmeImage/voiceConvertText.gif" alt="voiceMessage.gif">
</div>




- 文件消息

<div align="center">
    <img src="./readmeImage/fileMessage.gif" alt="fileMessage.gif">
</div>




- 图片消息

<div align="center">
    <img src="./readmeImage/imageMessage.gif" alt="imageMessage.gif">
</div>

---


- 好友界面

<div align="center">
    <img src="./readmeImage/friendList.gif" alt="friendList.gif">
</div>


<div align="center">
    <img src="./readmeImage/friendList.png" alt="friendList.png">
</div>