{"id":18438207,"url":"https://github.com/easemob/webim-vue-demo","last_synced_at":"2025-08-20T14:32:09.272Z","repository":{"id":36694954,"uuid":"206219475","full_name":"easemob/webim-vue-demo","owner":"easemob","description":"Easemob webim demo built on top of vue from scratch.","archived":false,"fork":false,"pushed_at":"2024-04-10T08:26:58.000Z","size":3362,"stargazers_count":105,"open_issues_count":15,"forks_count":68,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-04-14T05:06:15.679Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/easemob.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":"2019-09-04T03:04:31.000Z","updated_at":"2024-05-30T12:15:42.775Z","dependencies_parsed_at":"2023-11-21T08:31:01.476Z","dependency_job_id":"4eb0705c-7b34-4f96-858d-3916213ebc24","html_url":"https://github.com/easemob/webim-vue-demo","commit_stats":null,"previous_names":[],"tags_count":60,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2Fwebim-vue-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2Fwebim-vue-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2Fwebim-vue-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2Fwebim-vue-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/easemob","download_url":"https://codeload.github.com/easemob/webim-vue-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230431103,"owners_count":18224655,"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":[],"created_at":"2024-11-06T06:19:03.040Z","updated_at":"2024-12-19T12:10:44.069Z","avatar_url":"https://github.com/easemob.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003eEasemob WebIM Demo\n\n# webim vue demo简介\nwebim-vue demo是基于环信sdk开发的一款具有单聊、群聊、聊天室、音视频等功能的应用，为了vue用户能够快速集成环信 im sdk和音视频sdk，我们特使用了vue+vuex，为大家提供参考，我们也提供了[react版demo](https://github.com/easemob/webim)。\n\n# 运行起来\n+ 说明：音视频功能需要使用https。\n+ 环境：Node 版本要低于 12.x，建议使用 10.x\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm start || HTTPS=true npm start\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n```\n# 项目结构\n\n| 目录  | 说明|   |\n|------|-----|------|\n| build  | 打包后的文件 |\n| config | 项目的配置 |\n| node_modules | 项目依赖\n| static | 资源文件 |\n| travis | CI脚本 |\n| src | 项目源文件|\n|     | components| 项目组件\n|     | config | 表情和项目中ui配置\n|     | pages | 项目页面\n|     | router | 路由\n|     | store | vuex store\n|     | utils | sdk 引入和配置\n\n# 主要功能点说明\n## sdk集成\n代码目录：src/utils/WebIM.js\n\n+ 引入sdk和配置文件，实例化。\n+ 注册监听事件\n\n## 发送消息\n代码目录：src/components/chat/index.vue\n+ 在chat组件里实现发消息以及消息上屏,index为发送消息，message为显示消息上屏\n+ 具体发送消息的方法在 src/store/chat\n\n## 音视频\n代码目录: src/components/emediaModal\n+ index为单人音视频， multiAVModal为多人音视频，\n\n## 群组\n代码目录：src/components/group\n+ 群组发送消息和单人是一样的只是type不同\n+ group下为群组设置的代码\n\n## 消息存储\n+ 消息存储在 store \u003e chat \u003e msgList\n+ 关于持久化：这个demo采用的sdk消息漫游的增值服务，可以拉取历史消息，当然你也可以采用indexdb来做本地存储，同时也可以开通实时回调服务，将消息同步到自己的服务器。\n# 写在最后\n第一期已经完成了绝大部门im基础功能，大家也可以取查看官方详细[文档](http://docs-im.easemob.com/im/web/intro/start) 当然由于接触vue时间有限，这个demo只是给大家一个参考，很多地方的实现并不是很多，大家就自行发挥吧，后续会持续优化和更新。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasemob%2Fwebim-vue-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feasemob%2Fwebim-vue-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasemob%2Fwebim-vue-demo/lists"}