{"id":24414870,"url":"https://github.com/yevin-yu/easy-chat-web","last_synced_at":"2025-03-13T11:25:43.199Z","repository":{"id":249082953,"uuid":"830388499","full_name":"Yevin-Yu/easy-chat-web","owner":"Yevin-Yu","description":"EasyChatWeb：一个Web端的简洁轻聊页面，基于Vue + Node.js + WS。能够快速实现简单的群组聊天交互功能。","archived":false,"fork":false,"pushed_at":"2024-11-07T16:54:07.000Z","size":1627,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-20T07:43:06.368Z","etag":null,"topics":["chat","nodejs","web","ws"],"latest_commit_sha":null,"homepage":"http://chat.yuwb.cn","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Yevin-Yu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-07-18T07:17:29.000Z","updated_at":"2024-11-19T08:10:59.000Z","dependencies_parsed_at":"2024-08-01T12:45:05.209Z","dependency_job_id":"2f78a896-66d5-462c-b3ad-ee7cfecab243","html_url":"https://github.com/Yevin-Yu/easy-chat-web","commit_stats":null,"previous_names":["iyuwb/web-chat","yevin-yu/easychatweb","yevin-yu/easy-chat-web"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yevin-Yu%2Feasy-chat-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yevin-Yu%2Feasy-chat-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yevin-Yu%2Feasy-chat-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yevin-Yu%2Feasy-chat-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yevin-Yu","download_url":"https://codeload.github.com/Yevin-Yu/easy-chat-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243394522,"owners_count":20283974,"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","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":["chat","nodejs","web","ws"],"created_at":"2025-01-20T07:41:59.541Z","updated_at":"2025-03-13T11:25:43.184Z","avatar_url":"https://github.com/Yevin-Yu.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# EasyChatWeb 🌐💬\n\n（个人练习测试使用项目）\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg alt=\"logo\" height=\"362\" width=\"664\" src=\"https://yuwb.cn/images/web-chat.png\"/\u003e\n\u003c/div\u003e\n\n\nEasyChatWeb 是一个基于网页的轻量聊天应用，使用 **Vue3**、**Node.js** 和 **WebSocket** 技术构建，旨在提供简单易用的聊天体验。无论是发送消息、分享图片还是视频，EasyChatWeb 都能让您的交流更加顺畅！✨\n\n## 功能 🚀\n\n- **创建聊天房间**：用户可以轻松创建新的聊天房间。\n- **加入聊天房间**：快速加入现有的聊天房间，与朋友畅聊。\n- **发送消息**：实时发送和接收文本消息，保持沟通无阻。\n- **发送表情**：支持发送各种表情符号，让聊天更生动！😊\n- **发送图片**：\n  - 直接选择文件上传。\n  - 拖拽图片上传，简单快捷。\n  - 复制图片直接发送，轻松分享。\n- **发送视频**：\n  - 直接选择文件上传，分享精彩瞬间。\n  - 拖拽视频上传，快速发送。\n  - 复制视频直接发送，分享乐趣无极限。\n- **新消息提醒**：及时通知用户有新消息，确保不错过任何重要信息！🔔\n\n## 技术点 🛠️\n\n### 前端\n\n- **技术栈**：Vue3 + WebSocket + ElementUI + PWA\n- **关键实现**：\n  - 使用 Vue3 的 Hook 特性，提升组件的可复用性。\n  - 实现拖拽上传文件功能 (`onDrop`)，让上传变得简单。\n  - 实现复制上传文件功能 (`onPaste`)，提升用户体验。\n  - 使用浏览器通知 API 实现消息提醒 (`Notification`)，确保用户及时获取新消息。\n  - 开启 PWA 支持，提升用户体验，随时随地畅聊。\n\n### 后台\n\n- **技术栈**：Node.js + WebSocket（使用 `ws` 包）转发和接收消息。\n  \n  ```ts\n  const WebSocket = require('ws');\n  ```\n\n## 安装 🛠️\n\n要开始使用 EasyChatWeb，请按照以下步骤操作：\n\n1. **克隆仓库**：\n   ```bash\n   git clone https://github.com/Yevin-Yu/EasyChatWeb.git\n   cd EasyChatWeb\n   ```\n\n2. **安装依赖**：\n\n   对于后端：\n   ```bash\n   cd Backend\n   // 安装依赖\n   npm install\n   // 启动服务\n   node app.js\n   ```\n\n   对于前端：\n   ```bash\n   cd Frontend\n   // 安装依赖\n   npm install\n   // 启动项目\n   npm run dev\n   ```\n   查找修改 `ws` 链接：\n   ```js\n   // 修改为自己的 ws 链接\n   socket = new WebSocket('ws://ws.yuwb.cn/');\n   ```\n\n3. **访问应用程序**：\n   打开浏览器，访问 `http://localhost:5173` 开始聊天！🎉\n\n## 贡献 🤝\n\n欢迎贡献！如果您有改进建议或新功能，请随时提出问题或提交拉取请求。您的参与将使这个项目变得更好！\n\n## 许可证 📄\n\n本项目采用 MIT 许可证。有关详细信息，请参见 [LICENSE](LICENSE) 文件。\n\n## 鸣谢 🙏\n\n感谢所有贡献者和开源社区的支持与启发。\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyevin-yu%2Feasy-chat-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyevin-yu%2Feasy-chat-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyevin-yu%2Feasy-chat-web/lists"}