LeanMessage WebApp

使用 LeanCloud 实时通讯搭建的聊天 WebApp。Live Demo

在找 iOS/Android Demo？iOS、Android。

功能

• 登录
• 聊天室、单聊、群聊
• 系统对话实现的聊天机器人
• 成员管理
  • 邀请、移除成员
  • 提升、撤销管理员
• 群名称修改
• 消息送达回执与已读回执
• 未读消息
• 「正在输入」状态
• 消息撤回
• 图片消息
• 提及（@）对话成员
• 表情
  • 小表情（Emoji）
  • 大表情（Sticker）

文档

即时通讯开发指南

本地开发、调试

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 安全域名。

代码结构与功能

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

依赖的 angular 模块有：

• ui.router：基于状态的 router
• ngMaterial：提供 material design UI 组件

routes.js

配置 ui.router

index.run.js

启动 app 的脚本，通过监听 ui.router 的 stateChangeStart 事件在视图切换时检查用户登录状态。

How to

实现用户系统

为了方便与其他系统对接，LeanMessage 服务没有内建用户系统，只有作为唯一标识的 clientId，你需要在你的用户系统中维护用户与 clientId 的关系。你可以使用 LeanStorage 提供的「用户系统」。 本 demo 中没有关联用户系统，可以用任何的 id 登录服务。