基于 TCP 的鸿蒙聊天室即时通讯系统（前端鸿蒙、后端 Flask）

（5）查看当前聊天室人数

（6）查看服务器端消息

（7）管理员发消息

（8）人员下线提示

（9）查看终端面板

三、系统详细介绍

1. 核心交换层

• 代码文件: chat_server.py
• 角色: 中央枢纽、消息路由中心。
• 技术栈: Python Native Socket, threading (多线程)。
• 关键机制:
  • 连接管理: 为每个接入的客户端（无论是 HarmonyOS 手机还是 Flask 网关）分配独立的监听线程。
  • 广播机制: 维护全局 clients 列表，实现消息的群发。
  • 协议解析: 处理基于 分隔的 JSON 数据流，解决 TCP 粘包问题。

2. Web 网关层

• 代码文件: app.py, chat_client.py, static/
• 角色: 协议转换代理。让不支持原生 TCP Socket 的浏览器也能接入网络。
• 技术栈: Flask, Flask-SocketIO, Gevent (异步 I/O 补丁)。
• 工作流:
  1. 浏览器通过 WebSocket 发送消息给 Flask。
  2. Flask 内部运行一个 ChatClient，将消息通过 TCP 转发给核心服务器。
  3. 核心服务器的广播消息通过 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
• 分隔符: (CRLF)
• 数据格式: 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'

1. 发送: UserA (HarmonyOS) 点击发送。ArkTS 将 {type: 'message', content: 'Hello'...} 序列化为 JSON 字符串并附加 ，通过 TCP Socket 发送。
2. 路由: chat_server.py 收到 TCP 数据流，解析 JSON。
3. 回执: Server 立即向 UserA 回复一条 type: 'ack' 消息，UserA 的气泡下更新为'已送达'。
4. 广播: Server 遍历所有连接。
   • 找到 Web 后端 (app.py) 的 TCP 连接，发送 JSON 数据。
   • 找到其他手机客户端，直接发送 JSON 数据。
5. 推送: Web 后端 (app.py) 收到 TCP 消息，触发 handle_server_message 回调，通过 socketio.emit('new_message') 将消息推送到 UserB 的浏览器。
6. 展示: UserB 浏览器里的 JavaScript 收到 WebSocket 消息，渲染 DOM 节点显示气泡。