安装

npm install baeim-sdk

打包

npm run build

本地运行

npm run dev

引入

import { BaeimSDK, RewardButton } from "baeim-sdk";

RewardButton

props:

• uid: 对方的 tgid;
• current_uid: 当前用户的 tgid;
• avatar: 对方的头像;
• username: 对方的用户名;
• isDev: 是否是开发环境;
• onError: 错误回调;
• onSuccess: 成功回调（打赏成功之后的回调）;

<RewardButton
  userInfo={{
    uid: 123,
    current_uid: 123,
    avatar: "https://baeim.oss-cn-beijing.aliyuncs.com/avatar/123.png",
    username: "test",
  }}
  isDev={true}
  onError={() => {
    console.log("error");
  }}
  onSuccess={() => {
    console.log("success");
  }}
></RewardButton>

初始化

const sdk = new BaeimSDK({
  token, // 当前登录用户的token
  userUid: String(currentUid), // 当前用户的tgid
  serverAddr: "wss://chat-dev.anyconn.org:8210", // IM服务的websocket地址
  syncConversationsCallback: async () => {
    // 最近会话数据源的接口配置 前端自己配置接口地址 和查询参数
    // 配置后 getAllConversation 才能用
    const resp = await getConversationSync({
      uid: String(currentUid), // 当前用户的tgid
      msg_count: 30, // 查询最近会话的数量
    });
    return resp;
  },
  syncMessagesCallback: async (channel: Channel, opts: SyncOptions) => {
    // 历史消息数据源的接口配置 前端自己配置接口地址 和查询参数
    // 配置后 getMessages 才能用
    const resp = await getMessagesSync({
      uid: String(currentUid), // 当前用户的tgid
      channel_id: channel.channelID,
      channel_type: channel.channelType,
      start_message_seq: opts.startMessageSeq,
      end_message_seq: opts.endMessageSeq,
      pull_mode: opts.pullMode,
      limit: 30, // 查询消息的数量
    });
    return resp;
  },
});

连接

sdk.start();

断开连接

sdk.stop();

监听连接状态变化 addConnectionStatusListener

sdk.addConnectionStatusListener((status: ConnectStatus)=>void)

获取所有会话 getAllConversation

可以看文档： https://githubim.com/sdk/jssdk/datasource.html#%E6%9C%80%E8%BF%91%E4%BC%9A%E8%AF%9D%E6%95%B0%E6%8D%AE%E6%BA%90

// 需要先配置后端接口 然后将接口函数作为初始化参数（syncConversationsCallback）传入SDK
export const getConversationSync = (params: { uid: string; msg_count: number }) => {
  // return post<Conversation[]>(`https://chat-dev.anyconn.org:5001/conversation/sync`, params)
  return post<Conversation[]>(`https://imdev.anyconn.org/conversation/sync`, params, {
    headers: { token: '662fd9dc8edae1de8cafb3822125f240' },
  })
}
// 传参数
syncConversationsCallback: async () => {
    const resp = await getConversationSync({
      uid: String(currentUid), // 当前用户的tgid
      msg_count: 30,
    })
    return resp
}

// 然后就可以使用
const res = await sdk.getAllConversation()

创建新的空会话 createEmptyConversation

createEmptyConversation(channelId: string): Promise<Conversation>

监听会话改变 addConversationListener

addConversationListener(
    listener: (conversation: Conversation, action: ConversationAction) => () => void
)

发送消息 sendMessage

export enum MessageType {
  TEXT = 'TEXT',
  IMAGE = 'IMAGE',
  VIDEO = 'VIDEO',
}
// IMAGE 和 VIDEO 时 就把上传文件后获得的媒体路径 放在url里面
// 目前url字段不是数组 所以多个媒体 就需要发多个消息。 一条消息对应一个媒体
export type Message = {
  url?: string
  text?: string
  type: MessageType
}

// channelId 是receiver的 tgid
// content 是消息数据toString后的结果，消息的数据结构如上
sdk.sendMessage(content: string, channelId: string)

监听消息 addMessageListener

const handleMessage = (message: Message) => {
  log("-------message from server-------- ", message);
  try {
    // 数据放在content 的 text里面 是字符串
    if (message?.content?.text) {
      // TODO 处理你接收到的消息 比如给他加上sender receiver channel 然后添加到消息列表
      receiveMessage(JSON.parse(message.content.text));
    }
  } catch (error) {
    logError("message from server parse error:", error);
  }
};

sdk.addMessageListener(handleMessage);

清空消息队列

sdk.flush();

使用

// 每个监听函数会返回清除函数，可以在页面离开的时候清除当前订阅

// 初始化
const sdk = new BaeimSDK({
  token,
  userUid: String(currentUid),
  serverAddr: "wss://chat-dev.anyconn.org:8210",
  syncConversationsCallback: async () => {
    const resp = await getConversationSync({
      uid: String(currentUid),
      msg_count: 30,
    });
    return resp;
  },
  syncMessagesCallback: async (channel: Channel, opts: SyncOptions) => {
    // 历史消息数据源的接口配置 前端自己配置接口地址 和查询参数
    // 配置后 getMessages 才能用
    const resp = await getMessagesSync({
      uid: String(currentUid), // 当前用户的tgid
      channel_id: channel.channelID,
      channel_type: channel.channelType,
      start_message_seq: opts.startMessageSeq,
      end_message_seq: opts.endMessageSeq,
      pull_mode: opts.pullMode,
      limit: 30, // 查询消息的数量
    });
    return resp;
  },
});

// 开始连接
sdk.start();
sdk.addMessageListener(handleMessage); // 监听消息
setConnection(sdk);

// 添加状态监听
removeConnectionStatusListener = sdk.addConnectionStatusListener(
  async (status) => {
    if (status === ConnectStatus.Connected) {
      try {
        // 第一次加载 app 时 可以获取最近的会话 返回的结果里面有recents字段 包含这个会话最近的聊天数据
        const res = await sdk.getAllConversation();
        // TODO setChatList(res)

        // 添加会话变化监听
        removeSyncConversationListener = sdk.addConversationListener(
          (conversation, action) => {
            // 这里可以监听会话变化 然后自己处理前端逻辑
            if (action === ConversationAction.add) {
              addChatListItem(conversation);
            } else if (action === ConversationAction.update) {
              updateChatListItem(conversation);
            } else if (action === ConversationAction.remove) {
              deleteChatListItem(conversation.channel.channelID);
            }
          }
        );
        log("getAllConversation", res);
      } catch (error) {
        log("getAllConversation error", error);
      }
    } else if (
      status === ConnectStatus.ConnectKick ||
      status === ConnectStatus.Disconnect
    ) {
      removeSyncConversationListener && removeSyncConversationListener();
    }
  }
);

处理会话的 unread 状态

需要自己配置后端接口 和最近会话和历史消息一样 只不过 unread 不用传给 sdk 前端自己处理 可以查看文档 设置最近会话未读数量

export const getMessagesSync = (params: {
  uid: string;
  channel_id: string;
  channel_type: number;
  start_message_seq: number;
  end_message_seq: number;
  pull_mode: number;
  limit: number;
}) => {
  return post<Message[]>(
    `https://imdev.anyconn.org/channel/messagesync`,
    params,
    {
      headers: { token: "662fd9dc8edae1de8cafb3822125f240" },
    }
  );
};

export const setUnread = (params: {
  uid: string;
  channel_id: string;
  channel_type: number;
  unread: number;
}) => {
  return post<Message[]>(
    `https://imdev.anyconn.org/conversations/setUnread`,
    params,
    {
      headers: { token: "662fd9dc8edae1de8cafb3822125f240" },
    }
  );
};