wt-im.js sdk 设计

发布前执行 npm version patch

下载

npm install wt-im.js

引用

import wtIm from 'wt-im.js';

初始化

带 token ,userId,callBacks（初始化回调函数）进行 web IM 初始化配置

初始化后在 onConnected 函数中返回初始化数据 userInfo，friendsList，groupChatList，group，offlineMsg

wtIm.connectPre({
  token: '<token>',
  userId: '<userId>',
  callBacks: {
    onError: (evt) => {
      console.log('socket连接异常', evt);
    },
    onConnected: (evt) => {
      console.log('socket连接成功', evt);
    },
    onClose: (evt) => {
      console.log('socket连接关闭', evt);
    },
  },
});

单聊

发送文本消息

wtIm.sendTxt(
  toId: '<toId>',
  message: '<message>',
);

发送图片消息

wtIm.sendImg(
  toId: '<toId>',
  fileData: '<new FormData()>', // fileData：文件 new FormData 对象
);

发送文件消息

wtIm.sendFile(
  toId: '<toId>',
  fileData: '<new FormData()>', // fileData：文件 new FormData 对象
);

发送需同步等待的消息

wtIm
  .sendSyncMsg('test')
  .then((data) => {
    console.log('%c 成功data: ', 'font-size:20px;background-color: #F5CE50;color:#fff;', data);
  })
  .catch((err) => {
    console.log('%c 超时err: ', 'font-size:20px;background-color: #465975;color:#fff;', err);
  });

设置监听

初始化完成后设计事件监听器，以便及时获取相关事件通知

wtIm.on('business', (data) => {
  console.log('服务端主动推送的业务消息', data);
});
wtIm.on('talk_one', (data) => {
  console.log('单聊消息', data);
});
...

返回

// 单聊相关
  {
    talkType: number; // 1 单聊 2 群聊
    data: any;
    toId: string;
    sendId: string;
    code?: number; // 状态码 非必项
    tip?: string; // 提示语非必项
    msgType: number; // 消息类型 1 文本 2 图片 3：文件 4：语音 5：视频 6：地理位置
    file?: any; // 文件消息 非必项（文件会有，包含文件名称，文件大小）
  }
// 服务端主动推的业务消息
  {
    data: any;
    toId: string;
    sendId: string;
    code?: number;
    tip?: string;
  }

事件类型

  Events {
  talk_one, // 单聊
  business, // 服务端主动推送
}

本地存储

localStorage.setItem(`D5C_${USER_ID}`, list);

• 按 userID 存储 list
• 聊天列表 list 登录成功后获取消息列表-> 没有消息列表就创建用户所归属的消息列表

list = [
  {
    id: '消息id', // 唯一id ${type}_${userId}
    type: '消息类型：1单聊，2：群聊', // 消息类型
    upTime: '最后更新时间', // 用作内存上限时消息清理的条件
    userId: '用户id或群id',
    isTop: '是否置顶',
    unReadNum: '未读消息条数',
    lastMsg: '最后一条消息',
  },
];

• 消息记录 records 根据聊天列表 id 获取消息记录

records = [
  {
    id: '消息列表id', // 唯一id ${type}_${userId} 关联聊天列表list中id
    data: [
      {
        // 每发送一条消息存入，每收到一条消息存入
        msgType: '内容类型：1：文字，2：文件，3：图片', // 消息类型
        createTime: '消息发送时间',
        float: '展示位置：left/right', //
        content: '消息内容',
        // isSuccess: '是否发送成功',
        sendId: '发送人Id', // 根据用户id获取用户头像
        toId: '接收者id', // 根据用户id获取用户头像
      },
    ],
  },
];

• 好友/群友 用户信息列表 userInfoList

userInfoList: [
  {
    userId: '用户id', // 用户id 关联list中userId，关联records中sendId/toId
    img: '图像地址',
    gender: 2, // 0:未知，1:男 2:女
    name: '姓名',
    rName: '昵称',
    isFriend: '是否是好友', // 1是 0否
  },
];

断开连接 closeD5cIM

断开后触发 onClose 回调函数

wtIm.closeD5cIM();

22/06/18 1.1 版本 新增 api

answerFriApply 回应好友申请

  answerFriApply(toId: string, data: {agree:"是否同意",userName:'用户备注名称'})

ApplyFriend 好友申请

  ApplyFriend(userId: string, data: {msg:"申请的备注信息",from?:"来源",describe?:"备注描述"})
  .then((data) => data)
  .catch((err) => err);

DelFriend 删除好友

  DelFriend(userId: string)
  .then((data) => data)
  .catch((err) => err);

searchUserByPhone 通过手机号搜索好友

searchUserByPhone(phone)
  .then((data) => data)
  .catch((err) => err);

getFriends 获取好友列表

const friends = getFriends(); // 返回好友列表

GetUserInfo 通过好友 id 查找好友信息

const userData = GetUserInfo(userId<string>); // 返回好友信息

user_apply 收到好友申请的推送

D5cIM.on('user_apply', (data) => {
  // 执行拒绝
  // 执行同意
});

22/06/27 1.1 版本 新增 api （群相关）

getMyGroupChat 获取我的群聊

const groups = getMyGroupChat(); // 返回群聊列表

createGroupChat 获取我的群聊

createGroupChat(name <'群名称'>, data <[{ uId: '用户id' }]>)
  .then((res) => {})
  .catch((err) => err);

inviteGroupChat 邀请加入群聊

inviteGroupChat(groupId<'群id'>,groupName<'群名称'>, data < [{ uId: '用户id' }]>)
  .then((res) => {})
  .catch((err) => err);

exitGroupChat 自己退出群聊

exitGroupChat(groupId<'群id'>)
  .then((res) => {})
  .catch((err) => err);

removeGroupChat T 出群聊（只有群主才可以）

removeGroupChat(groupId<'群id'>, uId<'用户id'>)
  .then((res) => {})
  .catch((err) => err);

modifyGroupChatName 修改群名称

modifyGroupChatName(groupId<'群id'>, name<'新的群名称'>)
  .then((res) => {})
  .catch((err) => err);

getGroupChatInfo 获取群信息

getGroupChatInfo(groupId<'群id'>)
  .then((res) => {})
  .catch((err) => err);

delGroupChat 解散群（只有群主才可以）

delGroupChat(groupId<'群id'>)
  .then((res) => {})
  .catch((err) => err);

gchat_notice 群相关的通知推送

D5cIM.on('gchat_notice', (data) => {
  // data = {
  //   code: 200,
  //   tip: '提示语',
  //   data: {
  //     groupId: '613647384b3956b1c75f', // 群id
  //     type: 5, // 通知类型
  //     typeStr: '群解散', // 通知类型
  //   },
  // };
}).catch(() => {});

通知类型 type

1：群创建
2：退出成员
3：新加入成员
4：成员被T
5：群解散
6：群信息变动
7：群公告
8：用户群昵称修改
9：添加管理员
10：删除管理员
11：创建者转让