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

---

源码见文末wx名片

---

一、 系统架构总览

该系统采用 星型拓扑结构，以原生 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 列表，实现消息的群发。
  • 协议解析: 处理基于 \r\n 分隔的 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

• 分隔符: \r\n (CRLF)

• 数据格式: JSON

• 消息结构体 (TypeScript 定义):

  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 字符串并附加 \r\n，通过 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 节点显示气泡。

写在最后、源码

通过百度网盘分享的文件：…zip
链接：https://pan.baidu.com/s/1xbu6QWOItJCKOzAaG49Piw
文件已经加密，请联系请加下方（wx号），获取源码
号码：Lvnvn0508