{"id":25957653,"url":"https://github.com/poboll/echo-room-frontend","last_synced_at":"2026-05-09T08:32:22.304Z","repository":{"id":280611549,"uuid":"939789671","full_name":"poboll/echo-room-frontend","owner":"poboll","description":"回声谷即时通讯系统-前端","archived":false,"fork":false,"pushed_at":"2025-03-04T10:51:29.000Z","size":416,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-04T11:25:02.740Z","etag":null,"topics":["element-plus","indexeddb","pinia","recorderjs","socket-io","vue-typescript"],"latest_commit_sha":null,"homepage":"https://echo.caiths.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/poboll.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-27T05:35:40.000Z","updated_at":"2025-03-04T10:51:32.000Z","dependencies_parsed_at":"2025-03-04T11:25:10.040Z","dependency_job_id":"fa21b92d-cbfb-4c8a-861d-0c36452fb59d","html_url":"https://github.com/poboll/echo-room-frontend","commit_stats":null,"previous_names":["poboll/echo-room-frontend"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/poboll/echo-room-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poboll%2Fecho-room-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poboll%2Fecho-room-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poboll%2Fecho-room-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poboll%2Fecho-room-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/poboll","download_url":"https://codeload.github.com/poboll/echo-room-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poboll%2Fecho-room-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27395838,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-30T02:00:05.582Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element-plus","indexeddb","pinia","recorderjs","socket-io","vue-typescript"],"created_at":"2025-03-04T17:36:03.290Z","updated_at":"2025-11-30T15:04:56.533Z","avatar_url":"https://github.com/poboll.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚡ 回声谷即时通讯系统 - 前端\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://c-ssl.duitang.com/uploads/blog/202402/17/N5SG04P6iPy7qXw.jpg\" width=\"200\" alt=\"回声谷即时通讯系统\"\u003e\n  \u003cbr\u003e\n  \u003cstrong\u003e基于 SpringBoot + Vue3 的实时通信解决方案\u003c/strong\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003ca href=\"https://github.com/poboll/echo-room-frontend/tree/vue\" target=\"_blank\"\u003eGitHub 仓库\u003c/a\u003e\n\u003c/p\u003e\n\n## 🌟 项目简介\n\n“回声谷即时通讯系统”是一个基于 SpringBoot 和 Vue3 的实时通信解决方案，支持消息必达、离线消息、语音消息、消息撤回等核心功能。前端部分采用 Vue3、TypeScript 和 Element Plus 等现代化技术栈，提供响应式、多端适配的用户界面。\n\n## 🚀 核心特性\n\n- **实时通信**  \n  利用 WebSocket（或 Socket.IO）实现即时双向通信，确保消息快速传输。\n- **离线消息支持**  \n  未在线的用户可通过离线消息队列获取历史消息。\n- **语音消息**  \n  内置语音录制与播放功能，支持浏览器端音频采集和上传。\n- **消息撤回**  \n  用户可在规定时间内撤回已发送的消息，状态同步实现双端一致。\n- **响应式设计**  \n  前端界面采用现代化设计，支持多端自适应，界面清新、交互流畅。\n\n## 🛠 技术栈\n\n### 前端架构\n\n| 模块               | 技术方案                  | 说明                                     |\n| ------------------ | ------------------------- | ---------------------------------------- |\n| **核心框架**       | Vue3 + TypeScript         | 现代化响应式开发，支持组件化和类型安全，便于维护与扩展 |\n| **状态管理**       | Pinia 或 Vuex             | 实现跨组件状态共享，集中管理应用状态       |\n| **路由管理**       | Vue Router                | 实现单页面应用的前端路由控制               |\n| **UI 框架**        | Element Plus              | 丰富且现代化的 UI 组件库，提高开发效率与界面一致性 |\n| **组件样式**       | SCSS                      | 更高效地编写模块化、可维护的样式           |\n| **数据请求**       | Axios                     | 强大简洁的 HTTP 请求库，支持请求拦截器等   |\n| **语音录制**       | Recorder.js               | 浏览器端音频采集与录制，支持语音消息上传     |\n| **实时通信**       | Socket.IO / WebSocket     | 事件驱动的实时双向通信，确保消息及时传输     |\n| **消息协议**       | STOMP over SockJS         | 基于 STOMP 协议，封装 WebSocket 通信，支持 ACK/NACK 与事务管理 |\n| **本地数据存储**   | IndexedDB                 | 浏览器本地存储解决方案，支持离线聊天记录缓存  |\n| **开发工具**       | Vue CLI, Webpack          | 快速搭建项目、代码分割、热重载和高效打包     |\n| **国际化支持**     | Vue I18n (可选)           | 多语言支持，适应全球化需求                 |\n\n### 后端接口调用\n\n| 模块               | 技术方案                  | 说明                                     |\n| ------------------ | ------------------------- | ---------------------------------------- |\n| **HTTP 请求库**    | Axios                     | 封装 RESTful API 请求，统一错误处理与提示    |\n| **请求拦截器**     | Axios Interceptors        | 全局统一处理请求和响应，解决接口异常及登录重定向问题 |\n| **开发代理**       | Vue CLI DevServer Proxy   | 开发环境下解决跨域问题，将请求转发至后端服务器   |\n\n### 实时通信\n\n| 模块               | 技术方案                  | 说明                                     |\n| ------------------ | ------------------------- | ---------------------------------------- |\n| **WebSocket 客户端** | SockJS + STOMP           | 兼容性良好的 WebSocket 封装，支持消息订阅与发布  |\n| **消息协议**       | STOMP Protocol            | 简单高效的文本协议，支持 ACK、事务和心跳机制   |\n\n### 前端架构\n\n| 模块         | 技术方案            | 说明                          |\n| ------------ | ------------------- | ----------------------------- |\n| 核心框架     | Vue3 + TypeScript   | 现代化响应式开发              |\n| 状态管理     | Pinia 或 Vuex       | 跨组件状态共享                |\n| UI 框架      | Element Plus        | 丰富且现代化的 UI 组件库      |\n| 语音录制     | Recorder.js         | 浏览器端音频采集              |\n| 实时通信     | Socket.IO / WebSocket | 事件驱动的实时通信            |\n| 数据存储     | IndexedDB           | 本地缓存聊天记录              |\n\n## 📂 项目目录结构\n\n```\necho-room-frontend/\n├── public/\n│   ├── index.html         // HTML 模板（可在此修改 title 和 favicon）\n│   └── ...                \n├── src/\n│   ├── assets/            // 静态资源，如 logo、图标等\n│   ├── components/        // 业务组件（chat 相关：card.vue、message.vue、usertext.vue、toolbar.vue 等）\n│   ├── router/            // 前端路由配置\n│   ├── store/             // 状态管理（Vuex/Pinia 配置）\n│   ├── utils/             // 工具函数及 API 封装（api.js、sockjs.js、stomp.js 等）\n│   ├── views/             // 页面级组件（如 ChatRoom.vue、Login.vue 等）\n│   └── main.js            // 入口文件\n├── .gitignore\n├── babel.config.js\n├── package.json\n└── README.md              // 本文档\n```\n\n## 📝 安装与使用\n\n1. **克隆仓库**\n\n   ```bash\n   git clone -b vue https://github.com/poboll/echo-room-frontend.git\n   cd echo-room-frontend\n   ```\n\n2. **安装依赖**\n\n   ```bash\n   npm install\n   # 或 yarn install\n   ```\n\n3. **启动开发服务器**\n\n   ```bash\n   npm run serve\n   # 或 yarn serve\n   ```\n\n   访问 [http://localhost:8081](http://localhost:8080) 预览项目。\n\n4. **打包构建**\n\n   ```bash\n   npm run build\n   # 或 yarn build\n   ```\n\n## 🎨 UI 设计理念\n\n- **现代简洁**  \n  采用亚克力风背景、透明效果以及流畅的过渡动画，打造极简而不简单的用户体验。\n- **响应式布局**  \n  无论是 PC 端还是移动端，都能获得良好的适配效果。\n\n## 🔗 相关链接\n\n- **后端仓库**： [https://github.com/poboll/echo-room-backend](https://github.com/poboll/echo-room-backend)\n- **详细文档**： [架构设计文档](./docs/ARCHITECTURE.md)\n- **联系作者**： caiths@icloud.com\n\n---\n\n欢迎大家一起参与讨论、改进和优化“回声谷即时通讯系统”，期待你的反馈和建议！\n\n## 参考\nhttps://github.com/is-liyiwei/vue-Chat-demo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoboll%2Fecho-room-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpoboll%2Fecho-room-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoboll%2Fecho-room-frontend/lists"}