im-sdk

im-sdk 一个轻量级的前端消息展示框架

im-sdk是一个基于React+Mobx的聊天消息显示框架，主要组成部分为消息展示列表。

界面预览

快速开始

<!-- 页面上声明一个容器用于Mount组件 -->
<div class="root"></div>

import React from 'react';
import ImSdk from 'im-sdk';
import Product from './components/product';

// 获取sdk实例
const sdk = new ImSdk();
// 将实例渲染到root标签上，然后获取bot实例
const bot = sdk.render('#root');

bot.text('您好，我是Jimi智能机器人', 'robot').new().then(()=> {
    return bot.text('有什么我能帮助您的吗？', 'robot').new();
}).then(()=> {
    return bot.text('我想查询一下我的订单到哪里了', 'human').new();
}).then(()=> {
    return bot.component(Product, {}).new();
}).then(()=> {
    return bot.text('是这个商品吗？','robot').new();
}).then(()=> {
    return bot.text('是的','human').new();
}).then(()=> {
    return bot.text('当前商品正在配送中，预计下午两点中送达，请耐心等待！如有需要，可直接联系配送员,配送员联系电话：13800138000', 'robot').new()
});

接口预览

sdk

函数名	参数	说明
sdk.render(root)	string	渲染聊天列表组件，将其挂载到参数中提供的Dom节点上
sdk.mountEditor(editor)	React Component	添加聊天编辑框，聊天编辑框位于聊天列表下方
sdk.mountHeader(header)	React Component	添加当天对话者信息，该组件位于消息列表的上方
sdk.registerScrollEvent(fn)	function	添加下拉刷新时的回调函数，当列表到达顶部后继续下拉，则触发回调函数

bot

函数名	参数	说明
bot.text(content, target)	(string, string)	往消息列表中添加文本消息
bot.image(url, target)	(string, string)	往消息列表中添加图片消息
bot.component(com,data)	(Component, Object)	再消息列表中渲染一个自定义组件消息
bot.system(content)	string	渲染一条系统提示消息
bot.timeLine(date)	string/number/Date	渲染一条时间消息

若要正确的渲染消息，还需要再以上接口的基础上调用new()或old()方法，new()表示再消息列表底部追加新消息, old()表示在消息列表的最前面插入消息，可用于添加历史消息记录。使用方式如下所示：

bot.text('Hello world', 'human').new();  // 在消息列表底部渲染一条新信息
bot.text('Hello javascript').old();      // 在消息列表顶部插入一条信息

自定义组件示例

如果我们想在消息列表中渲染一条自定义组件消息，则需要对组件消息进行定义，下面示例定义了一个商品信息组件

• 自定义组件消息定义(product.js)

import React from 'react';

class Product extends React.PureComponent {
    render() {
        return (
            <div className="product">
                <div className="product__title">{this.props.data.name}</div>
                <div className="product__image" style={{backgroundImage: `url('${this.props.data.cover}')`}}/>
                <div className="product__price">&yen;{this.props.data.price}</div>
            </div>
        );
    }
    componentDidMount() {
        this.props.done(this.props.data);
    }
}
export default Product;

• 渲染自定义组件消息

import Product from './product.js';
const data = {
    name : '商品名称',
    cover: '商品封面',
    price: '商品价格'
};
bot.component(Product, data).new();

对于每个自定义组件，父组件会向其传入两个参数：

• data
• done

data为渲染组件需要用到的数据，done为组件渲染完成或用户主动操作后必须要调用的回调函数，若往done中添加一个参数，则上层的Promise或获取到返回的值。

bot.component(Product, data).then(res=> {
    console.log(res); // res为调用done()方法时返回的值
})