{"id":28155022,"url":"https://github.com/xdnloveme/easychat-web","last_synced_at":"2025-05-15T06:34:40.521Z","repository":{"id":44280445,"uuid":"226785939","full_name":"xdnloveme/easychat-web","owner":"xdnloveme","description":"简聊(easychat)✨✨，简单、完全开源，轻量的一体化组件WEB端H5项目","archived":false,"fork":false,"pushed_at":"2022-02-10T20:35:03.000Z","size":5849,"stargazers_count":11,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-06T08:39:32.820Z","etag":null,"topics":["easychat","easychat-ui","easychat-web","html5","vuejs"],"latest_commit_sha":null,"homepage":"https://chat.tangyida.top","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/xdnloveme.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}},"created_at":"2019-12-09T04:40:30.000Z","updated_at":"2024-08-19T06:36:29.000Z","dependencies_parsed_at":"2022-08-29T15:23:23.781Z","dependency_job_id":null,"html_url":"https://github.com/xdnloveme/easychat-web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdnloveme%2Feasychat-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdnloveme%2Feasychat-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdnloveme%2Feasychat-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdnloveme%2Feasychat-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xdnloveme","download_url":"https://codeload.github.com/xdnloveme/easychat-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254289315,"owners_count":22046071,"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":["easychat","easychat-ui","easychat-web","html5","vuejs"],"created_at":"2025-05-15T06:34:14.175Z","updated_at":"2025-05-15T06:34:40.493Z","avatar_url":"https://github.com/xdnloveme.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# easychat-web\n简聊(easychat-web)✨✨，简单、完全开源的，轻量、一体化组件项目，有兴趣的可以pr一起改进这个项目\n\n+ 简聊H5在线预览（preview）:http://chat.tangyida.top.\n+ 服务端源码地址（server-source）:[easychat后台源码](https://github.com/xdnloveme/easychat)（koa2 + mysql ，orm层是*sequ*lize，自己搭的架构）\n+ 测试账号（Test Acount）:`admin` 密码: `123456`\n+ 本项目组件库已经单独打包（Component lib）：https://github.com/xdnloveme/easychat-ui\n\n**手机端**可以直接扫如下二维码预览：\n\n![scan](https://github.com/xdnloveme/MarkdownPictureStore/blob/master/1576056911.png?raw=true)\n\n\u003cu\u003e作者注：此项目正在测试beta版本，后续会跟进开发，有些底层组件由于个人时间有限和一些特殊情况，开发比较粗糙，文档也没完善。有兴趣开发改进底层组件的欢迎pr改进或者提交issues.\u003c/u\u003e\n\n\n\n## 🖼 截图预览（Preview）\n\n![preview-index](https://github.com/xdnloveme/MarkdownPictureStore/blob/master/15760542963337.png?raw=true)\n\n![preiview-image](https://github.com/xdnloveme/MarkdownPictureStore/blob/master/15760544133912.png?raw=true)\n\n\n\n## 🦋 起源（Why）\n\n一直对实时通讯有偏爱，同时想巩固单人前后端项目一体化的能力，前端技术栈（Vue + Vue-cli 3 + socket.io.client），没有用到**第三方组件库**，希望从零开始开发H5底层组件，希望屏幕前的你可以加入进来改善项目，此项目的组件库地址[easychat-ui](https://github.com/xdnloveme/easychat-ui)，已经打包，欢迎拍砖。\n\n\n\n## ✨特性（Features）\n\n+ 轻量（light）没有任何冗余的第三方组件库，组件全是自己编写自己提供，易于管理，容量轻量。\n+ 一体化定制化（intergration）组件高度定制化，不用担心风格不统一。\n+ 交互、过渡动效友好（transition）项目各个页面有较多的过渡动效，整体交互友好。\n+ 简单、实时高效（easy）项目结构清晰，可以支持多人聊天和一对一私聊。\n\n未来即将实现的特性（正在开发）：\n\n+ 自动化配置（auto）:剥离配置，达到配置=\u003e构造组件的逻辑，利用Webpack和黑箱脚手架实现页面可配置等效果。\n+ 优化兼容性（polyfill）:优化各个底层组件在各大浏览器性能，整体兼容性提高。\n+ PWA实现（PWA）:准备加入PWA架构，实现桌面离线版H5应用。\n\n\n\n## ⚙ 安装（Install）\n\n安装依赖\n\n```javascript\nnpm install\n```\n\n运行在开发环境\n\n```javascript\nnpm run serve\n```\n\n构建\n\n```javascript\nnpm run build\n```\n\n记得开启服务端后台：[easychat后台服务和Redis服务（需要本地安装redis-server），本地开发默认地址是`http://localhost:8080`\n\n\n\n## 📖 文档（Doc）\n\n```json\n.\n├── LICENSE\n├── README.md\n├── babel.config.js\n├── package-lock.json\n├── package.json\n├── postcss.config.js\n├── public\n│   ├── async-runtime.js\n│   ├── favicon.ico \n│   ├── img\n│   │   └── icons // PWA设置的各类图标\n│   │       ├── apple-touch-icon-152x152.png\n│   │       ├── chat_logo.png\n│   │       ├── favicon-16x16.png\n│   │       ├── favicon-32x32.png\n│   │       ├── logo-192x192.png\n│   │       └── logo-512x512.png\n│   ├── index.html\n│   └── manifest.json // PWA设置文件\n├── src\n│   ├── App.vue // 主文件入口\n│   ├── api // 接口\n│   │   ├── config.js // 请求接口配置文件\n│   │   ├── data.js // 所有关于数据的接口\n│   │   └── service.js // 所有关于服务业务的接口\n│   ├── assets\n│   │   ├── icon // 项目打包的icon资源目录\n│   │   ├── image // 项目一些图片目录\n│   │   └── style\n│   │       └── global.scss // 全局的scss样式\n│   ├── components // 组件\n│   │   ├── Icon.vue // 图标组件\n│   │   ├── common\n│   │   │   ├── Empty.vue // 空白页组件\n│   │   │   └── Loading.vue // 页面加载组件\n│   │   ├── fragment\n│   │   │   ├── ChatList.vue // 聊天列表容器\n│   │   │   ├── ChatListCell.vue // 通用列表的组件\n│   │   │   ├── ChatListItem.vue // 首页聊天列表的每个条目\n│   │   │   ├── ChatRoom.vue // 聊天室\n│   │   │   ├── ChatRoomItem.vue // 聊天室内的消息组件\n│   │   │   ├── Failure.vue // 失败提示组件\n│   │   │   ├── FormBased.vue\n│   │   │   ├── FormVerify.vue\n│   │   │   └── Success.vue // 成功提示组件\n│   │   ├── layout // 布局组件\n│   │   │   ├── Navigation.vue // 布局 - 导航栏\n│   │   │   ├── RouteTransition.vue // 布局 - 切换路由动效\n│   │   │   ├── Tabbar.vue // 布局 - tabbar\n│   │   │   ├── TabbarContainer.vue // 布局 - tabbar 容器\n│   │   │   └── TabbarItem.vue // 布局 - tabbar容器条目\n│   ├── easychat.config.js // 针对此项目的配置总和（后期抽取成黑箱操作）\n│   ├── layouts // 布局页面文件\n│   │   ├── BasicLayout.vue // 基础布局\n│   │   └── TabbarLayout.vue // tabbar布局\n│   ├── main.js // 主入口\n│   ├── registerServiceWorker.js // service-worker缓存\n│   ├── router // 路由\n│   │   └── index.js\n│   ├── service // 业务层级（接口到页面的中间层）\n│   │   ├── index.js\n│   │   ├── login.js\n│   │   ├── register.js\n│   │   └── user.js\n│   ├── service-worker.js // service-worker\n│   ├── socket // socket 服务器相关事件\n│   │   ├── chatRoom.js\n│   │   ├── createSyncEvents.js\n│   │   └── socketIo.js\n│   ├── store // 数据模型store模块\n│   │   ├── index.js\n│   │   └── modules\n│   │       ├── badge.js // 所有小红点的数据仓库\n│   │       ├── chat.js // 聊天数据仓库\n│   │       ├── contacts.js // 通讯录数据仓库\n│   │       ├── nav.js // 导航栏数据仓库\n│   │       └── square.js // 广场聊天数据仓库\n│   ├── utils // 工具类\n│   │   ├── animate.js // 动画工具\n│   │   ├── common.js // 通用\n│   │   ├── next-transit-after.js // 路由切换动画的过渡钩子\n│   │   ├── packet.js // socket传送包的构造器\n│   │   ├── service-response-temp.js // 中间层的页面模板\n│   │   ├── utils.js // 工具\n│   │   └── validation.js // 校验格式\n│   ├── vendor.js // 各类库的统一入口\n│   └── views // 各个页面\n│       ├── AddPeople\n│       ├── Avatar\n│       ├── Chat\n│       ├── ChatSquare\n│       ├── Contacts\n│       ├── EasyChat\n│       ├── Login\n│       ├── Mine\n│       ├── MineInfoEdit\n│       ├── Register\n│       ├── Setting\n│       ├── Square\n│       └── pages // 通用页面\n│           ├── 404\n│           │   └── NotFoundComponent.vue\n│           ├── AddPeopleRequest.vue\n│           ├── Auth.vue\n│           ├── RegisterActive.vue\n│           ├── RegisterResult.vue\n│           ├── UserCard.vue\n│           └── UserCardDetail.vue\n└── vue.config.js // vue 设置\n```\n\n\n\n# License\n\n[MIT](https://github.com/xdnloveme/easychat-web/blob/master/LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxdnloveme%2Feasychat-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxdnloveme%2Feasychat-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxdnloveme%2Feasychat-web/lists"}