https://github.com/leancloud/leanmessage-demo
使用 LeanCloud 实时通讯搭建的聊天 WebApp
https://github.com/leancloud/leanmessage-demo
Last synced: 12 months ago
JSON representation
使用 LeanCloud 实时通讯搭建的聊天 WebApp
- Host: GitHub
- URL: https://github.com/leancloud/leanmessage-demo
- Owner: leancloud
- Created: 2015-05-15T06:44:59.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2023-01-23T22:25:09.000Z (about 3 years ago)
- Last Synced: 2025-03-29T14:12:48.304Z (12 months ago)
- Language: JavaScript
- Homepage: https://leanmessage.leanapp.cn
- Size: 2.16 MB
- Stars: 326
- Watchers: 39
- Forks: 111
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
LeanMessage WebApp
====
使用 LeanCloud 实时通讯搭建的聊天 WebApp。[Live Demo](https://leanmessage.leanapp.cn/)
> 在找 iOS/Android Demo？[iOS](https://github.com/leancloud/swift-sdk-demo)、[Android](https://github.com/leancloud/LeanCloudChatKit-Android)。
### 功能
- [x] 登录
- [x] 聊天室、单聊、群聊
- [x] 系统对话实现的聊天机器人
- [x] 成员管理
- [x] 邀请、移除成员
- [x] 提升、撤销管理员
- [x] 群名称修改
- [x] 消息送达回执与已读回执
- [x] 未读消息
- [x] 「正在输入」状态
- [x] 消息撤回
- [x] 图片消息
- [x] 提及（@）对话成员
- [x] 表情
- [x] 小表情（Emoji）
- [x] 大表情（Sticker）
### 文档
[即时通讯开发指南](https://leancloud.cn/docs/realtime_v2.html)
### 本地开发、调试
1. `yarn`
2. `yarn serve`
3. `open http://localhost:3000/`
### 部署
1. 运行 `yarn build` 生成 dist 目录
2. 将 dist 目录作为静态资源部署
实时通讯服务是通过校验 origin 来保证安全的，项目中默认的 AppID 是 LeanCloud 提供的测试 App 的 ID，仅允许 localhost:3000 来源的访问，当你需要在另外的域名上部署 LeanMessage WebApp 时，需要将 src/index.js 中的 appId 改为你的 LeanCloud 项目的 App ID，并且确认设置了你的域名为该项目的「安全域名」，更多关于安全方面的信息请参考 [Web 安全域名](https://leancloud.cn/docs/data_security.html#Web_安全域名)。
### 代码结构与功能
```
src/
├── app
│ ├── components // 组件
│ │ ├── message // 消息 directive
│ │ ├── reverse-infinite-list // 向上滚动无限加载列表 directive
│ │ └── user // 用户相关 service
│ ├── conversation // 会话 view，app 主界面
│ │ └── conversationMessage // 消息 view，会话 view 的子 view
│ └── login // 登录 view
├── index.html // 页面入口，ui-view 容器
├── index.js // js 入口，注册依赖模块，启动 app
├── index.run.js // 启动 app 的代码
├── index.scss
└── routes.js // 配置路由
```
#### index.js
js 入口，申明依赖模块，配置依赖模块，注册 components 与 views，启动 app。
依赖的 LeanCloud 模块有:
- [leancloud-realtime](https://leancloud.cn/docs/realtime_guide-js.html)
依赖的 angular 模块有：
- [ui.router](https://github.com/angular-ui/ui-router)：基于状态的 router
- [ngMaterial](https://material.angularjs.org/)：提供 material design UI 组件
#### routes.js
配置 ui.router
#### index.run.js
启动 app 的脚本，通过监听 ui.router 的 `stateChangeStart` 事件在视图切换时检查用户登录状态。
### How to
#### 实现用户系统
为了方便与其他系统对接，LeanMessage 服务没有内建用户系统，只有作为唯一标识的 [clientId](https://leancloud.cn/docs/realtime_v2.html#clientId)，你需要在你的用户系统中维护用户与 clientId 的关系。你可以使用 LeanStorage 提供的[「用户系统」](https://leancloud.cn/docs/js_guide.html#用户)。
本 demo 中没有关联用户系统，可以用任何的 id 登录服务。