Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/easemob/circle-demo-web
https://github.com/easemob/circle-demo-web
Last synced: 1 day ago
JSON representation
- Host: GitHub
- URL: https://github.com/easemob/circle-demo-web
- Owner: easemob
- Created: 2022-08-30T10:42:48.000Z (about 2 years ago)
- Default Branch: dev
- Last Pushed: 2024-06-21T05:39:04.000Z (5 months ago)
- Last Synced: 2024-06-21T23:17:42.668Z (5 months ago)
- Language: JavaScript
- Size: 5.67 MB
- Stars: 13
- Watchers: 9
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 环信超级社区（Circle）示例项目
## 简介
环信超级社区（Circle）是一款基于环信 IM 打造的类 Discord 实时社区应用场景方案，支持社区（Server）、频道（Channel） 和子区（Thread） 三层结构。一个 App 下可以有多个社区，同时支持陌生人/好友单聊。用户可创建和管理自己的社区，在社区中设置和管理频道将一个话题下的子话题进行分区，在频道中根据感兴趣的某条消息发起子区讨论，实现万人实时群聊，满足超大规模用户的顺畅沟通需求。
该仓库包含了使用环信即时通讯 IM Web SDK 实现超级社区的示例项目。
## 项目结构
```
.
├── README.md
├── config
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
├── scripts
├── src
│ ├── App.js
│ ├── App.less
│ ├── App.test.js
│ ├── assets //静态资源
│ ├── components //基础组件
│ ├── index.css
│ ├── index.js
│ ├── layout //页面入口
│ │ ├── Channel //频道相关页面
│ │ │ ├── InviteUser //邀请用户加入频道
│ │ │ ├── SideBar // 频道列表及当前server展示页面
│ │ │ └── index.js //频道页面入口
│ │ ├── ChannelSetting //频道设置页面
│ │ │ └── index.js //频道设置页面入口
│ │ ├── Contacts
│ │ │ ├── SideBar 联系人列表页面
│ │ │ └── index.js //联系人页面入口
│ │ ├── Main
│ │ │ ├── ScrollBar //社区列表页面
│ │ │ ├── ServerForm //创建、编辑社区
│ │ │ └── index.js //主页面入口
│ │ ├── Server
│ │ │ ├── SideBar //广场菜单页面
│ │ │ └── index.js //广场页面入口
│ │ ├── ServerSetting //频道设置页面
│ │ │ └── index.js //频道设置页面入口
│ │ └── UserInfo
│ │ ├── SideBar //用户信息页面
│ │ └── index.js //用户信息页面入口
│ ├── routes //路由
│ ├── setupTests.js
│ ├── store //数据管理
│ │ └── models
│ │ ├── app.js //app 数据管理
│ │ ├── channel.js //频道数据管理
│ │ ├── contact.js //联系人数据管理
│ │ ├── server.js //社区数据管理
│ │ ├── rtc.js //音视频数据管理
│ │ └── thread.js //子区数据管理
│ ├── utils sdk及公用方法
│ └── views //页面组件
│ ├── Channel
│ │ ├── components //频道聊天页面组件
│ │ └── index.js //频道聊天页面
│ ├── ChannelSetting
│ │ ├── components //频道设置页面组件
│ │ └── index.js //频道设置页面
│ ├── ServerSetting
│ │ ├── components //社区设置页面组件
│ │ └── index.js //社区设置页面
│ ├── Chat
│ │ ├── components //联系人聊天页面组件
│ │ └── index.js //联系人聊天页面
│ ├── ContactsOperation
│ │ └── index.js //联系人页面
│ ├── Login
│ │ └── login.js //登录页面
│ ├── ServerSquare
│ │ └── index.js //广场页面
│ ├── Thread
│ │ ├── components //子区页组件
│ │ └── index.js //子区页面
│ └── UserInfo
│ └── index.js //更新用户信息
```
## 运行项目
1、克隆项目
```bash
git clone https://github.com/easemob/Circle-Demo-Web.git
```
2、安装依赖
```bash
npm install
```
3、设置appKey
在"/src/utils/WebIM.js"文件中设置你的appKey。
如需语聊房服务，需要设置appId
在"/src/utils/basicVoiceCall.js"文件中设置你的appId。
4、运行项目
```bash
npm start
```
## 反馈
如果你有任何问题或建议，可以通过 issue 的形式反馈。
## 参考文档
产品概述及开发文档：
https://docs-im.easemob.com/ccim/circle/overview
## 代码许可
示例项目遵守 MIT 许可证。