基于 TCP 的鸿蒙聊天室即时通讯系统（前端鸿蒙、后端 Flask Web）
一、系统架构总览
该系统采用 星型拓扑结构，以原生 Python TCP 服务器为核心枢纽，分别支撑 Web 网页端和 HarmonyOS 移动端的实时通信。
二、系统演示截图
（1）文件结构
/chat_app
/static
/css - style.css # 样式文件
/js - main.js # 前端 JavaScript 逻辑
/templates
/index.html # 主页面 HTML
/src
/chat_client.py # TCP 客户端模块
/app.py # Flask 应用主文件
/chat_server.py # 原有 TCP 聊天服务器
/server_log.txt # 服务器日志
/app_log.txt # Flask 应用日志
（2）服务器端
（3）进入用户端
（4）进行聊天
（5）查看当前聊天室人数
（6）查看服务器端消息
（7）管理员发消息
（8）人员下线提示
（9）查看终端面板
三、系统详细介绍
1. 核心交换层
- 代码文件:
chat_server.py - 角色: 中央枢纽、消息路由中心。
- 技术栈: Python Native Socket,
threading(多线程)。 - 关键机制:
- 连接管理: 为每个接入的客户端（无论是 HarmonyOS 手机还是 Flask 网关）分配独立的监听线程。
- 广播机制: 维护全局
clients列表，实现消息的群发。 - 协议解析: 处理基于
2. Web 网关层
- 代码文件:
app.py,chat_client.py,static/ - 角色: 协议转换代理。让不支持原生 TCP Socket 的浏览器也能接入网络。
- 技术栈: Flask, Flask-SocketIO, Gevent (异步 I/O 补丁)。
- 工作流:
- 浏览器通过 WebSocket 发送消息给 Flask。
- Flask 内部运行一个
ChatClient，将消息通过 TCP 转发给核心服务器。 - 核心服务器的广播消息通过 TCP 回传给 Flask，再由 Flask 通过 WebSocket 推送到浏览器。
- 亮点: 使用
gevent.monkey.patch_all()实现了高并发的 I/O 处理，解决了 Web 服务器作为 TCP 客户端时的阻塞问题。
3. 鸿蒙原生客户端
- 代码文件:
Index.ets,TcpDemoEntryAbility.ts - 角色: 移动端用户终端。
- 技术栈: HarmonyOS ArkTS,
@ohos.net.socket。 - 核心能力:
- 直连通信: 绕过 Web 层，直接通过 IP:Port 连接核心 TCP 服务器。
- 健壮性设计:
- 粘包处理: 实现了
msgData.split('\r\n')循环处理，防止多条消息合并导致解析失败。 - UI 防抖: 使用
setTimeout延迟 60ms 滚动到底部，避免渲染冲突导致的闪退。
- 粘包处理: 实现了
- ACK 机制: 实现了消息回执处理 (
type: 'ack')，能更新 UI 显示'已送达 x 人'。
四、通信协议定义
全系统统一使用 基于文本的 JSON 流协议。
- 传输层: TCP
- 分隔符:
- 数据格式: JSON
消息结构体 (TypeScript 定义):
interface ChatMessage {
type: 'message' | 'status' | 'command' | 'ack'; // 消息类型
sender: string; // 发送者昵称
content: string; // 文本内容
timestamp: number; // 毫秒级时间戳
status: string; // sending/sent/received
info?: string; // (可选) 附加信息，如回执文案
}
五、数据流向示例
场景：鸿蒙手机用户 'UserA' 发送 'Hello' 给 网页端用户 'UserB'
- 发送: UserA (HarmonyOS) 点击发送。ArkTS 将
{type: 'message', content: 'Hello'...}序列化为 JSON 字符串并附加 - 路由:
chat_server.py收到 TCP 数据流，解析 JSON。 - 回执: Server 立即向 UserA 回复一条
type: 'ack'消息，UserA 的气泡下更新为'已送达'。 - 广播: Server 遍历所有连接。
- 找到 Web 后端 (
app.py) 的 TCP 连接，发送 JSON 数据。 - 找到其他手机客户端，直接发送 JSON 数据。
- 找到 Web 后端 (
- 推送: Web 后端 (
app.py) 收到 TCP 消息，触发handle_server_message回调，通过socketio.emit('new_message')将消息推送到 UserB 的浏览器。 - 展示: UserB 浏览器里的 JavaScript 收到 WebSocket 消息，渲染 DOM 节点显示气泡。
