# 前言
上文介绍了数据层SDK和UI组件的开发,大家了解了系统的分层,分别知道各个层如何实现,这章主要和读者一起串联各个模块,介绍里面串联的设计技巧,完整的搭建一个原型聊天系统,感兴趣的同学可以在这基础上扩展。
# 技术栈准备
- Alibab/RAX 技术栈,开源地址
- Yeoman 使用 自建
generator-rax-component脚手架构建聊天项目环境 - 数据SDK开发章节封装的
tbms-brandsdk-yunxinNPM包,提供标准SDK。 - UI组件章节封装的
tbms-components的NPM包,提供UI组件。
# 相关技术栈源码
generator-rax-component: github.com/ge-tbms/gen…
tbms-brandsdk-yunxin: github.com/ge-tbms/tbm…
tbms-components: github.com/ge-tbms/tbm…
# 数据和UI层结合
整体结合思路,通过数据层SDK的标准数据结构和回调,通过 dispatch 和 UI层组件结合起来,在封装消息HOC组件, 实现所见即所得。
数据层 + UI层 => 聊天系统

聊天系统源码地址:
# 标准SDK使用
# 初始化SDK
import {createElement, Component, render, findDOMNode} from 'rax';
// 1、数据层沉淀的 `tbms-brandsdk-yunxin` SDK NPM包
import YUNXINSDK from 'tbms-brandsdk-yunxin';
// 2、组件容器
class App extends Component {
constructor() {
super();
// 3、初始化SDK,初始化参数及标准事件回调
this.sdk = new YUNXINSDK({
uid: uid, // 登录用户ID
touid: touid, // 目标用户ID
onmsg: this.onMsg.bind(this), // 收到及时消息回调
onofflinemsg: this.onOfflineMsg.bind(this), // 收到离线消息回调
onerror: this.onError.bind(this), // 错误情况回调
onconversation: this.onConversation.bind(this), // 建立或者更改会话回调
onsystemmsg: this.onSystemMsg.