聊天原型系统串联|IM Chat | 前端进阶之旅

# 前言

上文介绍了数据层SDK和UI组件的开发，大家了解了系统的分层，分别知道各个层如何实现，这章主要和读者一起串联各个模块，介绍里面串联的设计技巧，完整的搭建一个原型聊天系统，感兴趣的同学可以在这基础上扩展。

# 技术栈准备

Alibab/RAX 技术栈，开源地址
Yeoman 使用自建 generator-rax-component 脚手架构建聊天项目环境
数据SDK开发章节封装的 tbms-brandsdk-yunxin NPM包，提供标准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层 => 聊天系统

聊天系统源码地址：

github.com/ge-tbms/tbm…

# 标准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.