vue-im

基于Vue的即时通讯组件

注意：

1. 该组件会将部分聊天记录保存在localStorage，尽量不要将头像转成base64格式，不然会localStorage或溢出
2. 部分数据使用了layim模拟数据，如有侵权请告知修改

• demo

安装

$ npm install vue-im --save

引入

• 单文件组件

 
    import vueIM from 'vue-im'
    import Vue from 'vue'
    Vue.use(vue-im)

• script引用

<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="dist/vue-im.min.css">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 
 
<!-- 引入组件 -->
<script src="dist/vue-im.min.js"></script>
 

使用

数据格式

1. 当前用户

    
    {
        'username': '会飞的猪',
        'id': '100000',
        'avatar': 'http://ofl49b399.bkt.clouddn.com/1.jpg'
    }
 

2. 联系人数组

 
若未提供groupname， 会处理为默认的未命名分组中
 
    [
        {
      "groupname": "我心中的女神",
      "id": 3,
      "list": [{
        "username": "林心如",
        "id": "76543",
        "avatar": "http://tp3.sinaimg.cn/1223762662/180/5741707953/0"
      }, {
        "username": "佟丽娅",
        "id": "4803920",
        "avatar": "http://tp4.sinaimg.cn/1345566427/180/5730976522/0"
      }]
    }
        ...
    ]

3. 群组列表

    [
      {
        'groupname': '前端群',
        'id': '101',
        'avatar': 'http://tp2.sinaimg.cn/2211874245/180/40050524279/0'
      }, {
        'groupname': 'Fly社区官方群',
        'id': '102',
        'avatar': 'http://tp2.sinaimg.cn/5488749285/50/5719808192/1'
      }
    ]

1. 群组成员

[{
    'username': '奔跑的五花肉',
    'id': '100001',
    'avatar': '//ofl49b399.bkt.clouddn.com/2.jpg'
  },
  {
    'username': '刘涛tamia',
    'id': '100001222',
    'avatar': '//tva4.sinaimg.cn/crop.0.1.1125.1125.180/475bb144jw8f9nwebnuhkj20v90vbwh9.jpg'
  },
  {
    'username': '谢楠',
    'id': '10034001',
    'avatar': '//tva2.sinaimg.cn/crop.1.0.747.747.180/633f068fjw8f9h040n951j20ku0kr74t.jpg'
  },
  {
    'username': '马小云',
    'id': '168168',
    'avatar': '//tva1.sinaimg.cn/crop.0.0.180.180.180/7fde8b93jw1e8qgp5bmzyj2050050aa8.jpg'
}]
 
 

5. 聊天记录

 
{
    total: 21,  //总条数
    size: 20,  // 每页显示条数
    records: [  // 聊天记录具体能容
      {
        content: '你好',
        'username': '奔跑的五花肉',
        'avatar': 'https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg',
        sender: '100001',
        recver: '100000',
        time: 1513215782417,
        sendername: '奔跑的五花肉',
        recvername: '会飞的猪'
      },
      {
        content: '你好',
        'username': '奔跑的五花肉',
        'avatar': 'https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg',
        sender: '100001',
        recver: '100000',
        time: 1513215782417,
        sendername: '奔跑的五花肉',
        recvername: '会飞的猪'
      }
    ]
}
 

6. 新消息

    {
      content: '你好呀',  // 消息内容
      avatar: this.lists[0].avatar, // 发送者头像
      sender: this.lists[0].id, // 发送人id
      recver: this.mine.id, // 接收人id，当前登录用户
      time: new Date().getTime(), // 发送时间
      sendername: this.lists[0].username, // 发送人名称
      recvername: this.mine.username // 接收人名称， 当前登录用户
      chatlogType: 'text'  // 消息类型， text为文本，file文件，image图片
    }
 

7.发送文件和图片

发送文件和图片后台接口的返回值格式：

    {
        //图片路径
      src: ‘’
    }
 

2. 分页控制

监听 on-page-change 事件能够获取当前点击的页数，根据页数修改 history.records 会自动触发更新

3. 接收到新消息

接收到信息时， 需要调用getMessage 方法，将消息内容传递给组件

html
    ....
 
<vue-im ref="vueim"></vue-im>
 
    ....
 

    ....
    this.refs.vueim.getMessage({
        content: '你好呀',
        avatar: this.lists[0].avatar,
        sender: this.lists[0].id,
        recver: this.mine.id,
        time: new Date().getTime(),
        sendername: this.lists[0].username,
        recvername: this.mine.username,
        chatlogType: 'text'  // 消息类型， text为文本，file文件，image图片
    })
    ....
 

4、查看历史记录和群组成员

提供了相应的事件接口和属性，监听相应的事件，获取数据，再利用属性值传递给组件即可

API 文档

props

名称	类型	默认值	描述
mine	Object	——	初始值，必需
lists	Array	空数组	联系人数组，好友数组
history	Object	空对象	历史记录数据
brief	Boolean	false	是否使用客服模式
voice	String	——	新消息声音提醒，需要传入声音文件，使用mp3格式
ext	Array	[]	配置图片发送支持的格式
action	String	——	图片上传的后台地址，启用图片发送功能时该项为必需
upload-name	String	image	图片上传的表单的name属性
members-list	Array	空数组	聊天的群组成员列表
groups-list	Array	空数组	聊天的群组列表
chat	Object	——	客服模式下的会话对象，客服模式下必需
un-read-list	Array	空数组	离线消息，格式同消息

events

名称	参数	描述
on-chat-change	Object	聊天框切换时触发该回调， 参数是当前的聊天用户
on-send	Object	发送消息时触发该回调
on-page-change	Number: page	切换聊天记录分页是触发
on-view-history	Object, 当前对话的用户	点击查看历史聊天记录时触发
on-view-members	Object, 当前点击的群组对象	点击查看群信息和成员时触发

methods

名称	参数	描述
getMessage	Object	接收的的新消息内容

TODOS

• 添加好友，删除好友功能
• ...

暂时只想到这些，有想法的可以提issues，可以添加

Dependencies (依赖)

• moment

update(更新内容)

• 更新日志

Licence (证书)

Issues

• issues

vueIM is open source and released under the MIT Licence.

Copyright (c) 2017 liuziyang