pig-hxim v0.0.4

pig-hxim

根据常用业务场景对环信 SDK 进行了一定的封装，uni-app 版本，提供对应 UI 组件方便使用

配置步骤

1.npm 方式安装引入

npm install pig-hxim --save

2.引入 pig-hxim 主 JS 库

// 引入模块文件
import pigHxim from 'pig-hxim';

Vue.use(pigHxim);

3.配置 easycom 组件模式

此配置需要在项目 src 目录的 pages.json 中进行

 "easycom": {
    "ph-dialog-box": "pix-hxim/component/ui/index.vue"
  }

基本概念

sessionKey 会话标识

// 形如 09e6d902e0154d15b770b4b332d2799c^|^185e7a09311b4c8b8e59fdd3b3c1d3b9
// 后续提到的用户ID均为在环信中的ID，非业务ID
const sessionKey = `${toUser}^|^${fromUser}`;

msgList 消息列表

// 形如
const msgList = [
  {
    info: {
      from: '185e7a09311b4c8b8e59fdd3b3c1d3b9',
      to: '09e6d902e0154d15b770b4b332d2799c'
    },
    username: '',
    yourname: '',
    youravatar: '/static/chat/default.png',
    useravatar: '/static/chat/default.png',
    msg: {
      type: 'txt',
      url: '',
      data: [
        {
          data: '222',
          type: 'txt'
        }
      ],
      ext: {}
    },
    style: '',
    time: 1648695874705,
    mid: 'txt383742274704',
    chatType: 'chat',
    status: 'success',
    readStatus: true
  },
  {
    info: {
      from: '185e7a09311b4c8b8e59fdd3b3c1d3b9',
      to: '09e6d902e0154d15b770b4b332d2799c'
    },
    username: '',
    yourname: '',
    youravatar: '/static/chat/default.png',
    useravatar: '/static/chat/default.png',
    msg: {
      type: 'img',
      url: 'https://a1-hw.easemob.com/1101210325065211/test/chatfiles/dab40c30-b0b3-11ec-a6d7-a7935704a5c7',
      data: 'http://tmp/9KgPF9imbINR4b883ba2b88dbc5f2f6c454cfa7d1600.jpg',
      thumbnail: 'http://tmp/9KgPF9imbINR4b883ba2b88dbc5f2f6c454cfa7d1600.jpg',
      ext: {},
      size: {}
    },
    style: 'self',
    time: 1648704706520,
    mid: 'img383751106520',
    chatType: 'singleChat',
    status: 'success',
    readStatus: true
  },
  ...
];

初始化

创建连接

//连接配置
const config = {
  xmppURL: '',
  apiURL: '',
  appkey: '',
  // 初始历史消息请求接口(批量)
  getHistoryChatListURL: '',
  // 历史消息请求接口
  getHistoryMessageUR: ''
};

// 方式一
const hxim = this.$hxim.create('imTest', config);
// 方式二
// const hxim = uni.$hxim.create('imTest', config);

// 创建后可以直接赋值变量拿到对象，也可在其它地方通过get方法获取
// const hxim  = this.$hxim.get('imTest');

// 后续的操作我们均基于hxim操作，不再重复

登录

// 登录配置
const loginParam = {
  user: '',
  pwd: ''
};

// 执行登录
hxim.open(loginParam);

接收消息

*NA (后续根据业务再考虑支持，本版本暂不支持扩展)

发送消息

发送文本、表情消息

const params = {
  to: '', // 接收者ID
  msg: '', // 文本内容
  ext: {} // 扩展信息
};
hxim.sendText(params);

发送图片消息

const params = {
  to: '', // 接收者ID
  path: '', // 图片资源路径地址
  fileName: '', // 文件名，可选
  ext: {} // 扩展信息
};
hxim.sendImg(params);

发送语音消息

const params = {
  to: '', // 接收者ID
  path: '', // 语音资源路径地址
  audioLeng: '', // 语音长度
  ext: {} // 扩展信息
};
hxim.sendImg(params);

常用方法

获取版本号

const hxim = this.$hxim.version;
// const hxim = this.$hxim.VERSION ;

获取连接对象

const hxim = this.$hxim.get('imTest'); // 参数为create时传的连接标识
// const hxim  = uni.$hxim.get('imTest');

获取连接标识

const imId = hxim.getImid();

获取连接配置

const config = hxim.getConfig();

获取登录状态

const status = hxim.getLoginStatus();

获取业务 token

const status = hxim.getBussinessToken();

设置业务 token

const status = hxim.setBussinessToken(token);

新增会话用户

会同步指定用户的历史信息（近 50 条）

// 方式一
hxim.addSessionUser('09e6d902e0154d15b770b4b332d2799c')

// 方式二
hxim.addSessionUser(['09e6d902e0154d15b770b4b332d2799c',...])

// 方式三
hxim.addSessionUser({
  userId: '09e6d902e0154d15b770b4b332d2799c' // 用户ID
  avatar: '' // 可选参数，可一并把头像注册进来
})

// 方式四
hxim.addSessionUser([
  {
  userId: '09e6d902e0154d15b770b4b332d2799c' // 用户ID
  avatar: '' // 可选参数，可一并把头像注册进来
},
...
])

删除会话用户

// 方式一
hxim.delSessionUser('09e6d902e0154d15b770b4b332d2799c')

// 方式二
hxim.delSessionUser(['09e6d902e0154d15b770b4b332d2799c',...])

获取会话用户

hxim.getSessionUser();

获取会话用户信息

// 包含userId外的其它信息
hxim.getSessionUserInfo();

获取指定用户与登录用户的会话 ID

const sessionKey = hxim.getSessionKey('09e6d902e0154d15b770b4b332d2799c');

获取指定会话的消息记录

const msgList = hxim.getUserMsgList(sessionKey);

更新指定会话的消息记录

hxim.setUserMsgList(sessionKey, msgList);

获取指定用户未读消息数

const unreadMsgNu = hxim.getUserUnreadMsgNum(sessionKey);

更新指定用户信息全部已读，或某条已读

// 更新会话全部已读
hxim.updateUserReadMsg(sessionKey);

// 更新会话的某条消息已读
// mid 消息id
hxim.updateUserReadMsg(sessionKey, mid);

注册业务头像

hxim.setUserAvatar({
  // 设置默认头像
  fromAvatar: '',
  toAvatar: '',
  // 为指定用户id设置头像
  '09e6d902e0154d15b770b4b332d2799c': ''
});

获取用户业务头像

// 获取头像对象 （全部用户）
hxim.getUserAvatar();

// 获取指定用户头像
hxim.getUserAvatar('09e6d902e0154d15b770b4b332d2799c');

根据条件获取消息

// 根据指定起始时间获取limit条某会话的消息
hxim.getMsgListByCondition({
  sessionKey: '', // 会话标识
  startTime: '', // 默认从当前时间开始获取
  limit: 30 // 默认值为30
});

时间格式化

// 当前时间格式化输出 yyyy-MM-dd HH:mm:ss
hxim.time();

// 当前时间格式化输出,time为时间字符串，如: 前天 10:01、昨天 10:01 等
hxim.formatTime(time);

常用事件

收到新消息通知

const newChatMsgFn = ({ renderableMsg, curChatMsg, sessionKey }) => {
  console.log(renderableMsg, curChatMsg, sessionKey);
  // do some thing
};

// 注册监听
hxim.$on('newChatMsg', newChatMsgFn);

// 移除监听
hxim.$off('newChatMsg', newChatMsgFn);

收到消息更新通知

const updateChatMsgFn = ({ renderableMsg, curChatMsg, sessionKey }) => {
  console.log(renderableMsg, curChatMsg, sessionKey);
  // do some thing
};

// 注册监听
hxim.$on('updateChatMsg', updateChatMsgFn);

// 移除监听
hxim.$off('updateChatMsg', updateChatMsgFn);

会话初始完毕

const initHistoryRecordsFn = ({ curChatMsg, sessionKey }) => {
  console.log(curChatMsg, sessionKey);
  // do some thing
};

// 注册监听
hxim.$on('initHistoryRecords', initHistoryRecordsFn);

// 移除监听
hxim.$off('initHistoryRecords', initHistoryRecordsFn);

引用对话页组件

<style lang="scss" scoped></style>
<template>
  <ph-dialog-box :imId="imId" :toUser="toUser" theme="blue" />
</template>
<script>
  export default {
    data() {
      return {
        // 数据实际从业务中获取
        imId: 'imTest', // hxim 创建时指定的 id
        toUser: '8710256f4dc643d7b01ea77a4e4c5bc' 用户id
      };
    }
  };
</script>

<style lang="scss" scoped></style>

参数

chooseList

const chooseList = [
  {
    name: 'test',
    type: 'test',
    icon: '',
    handler: () => {
      console.log('you click me !!!');
    }
  }
]

msgRender

const chooseList 
const msgRender = msg => {
  if (msg.mid === 'txt385558888649') {
    return `<text style="color: red">${msg.msg.data}</text>`;
  }
},

预览对话页组件