@medlinker/im-components

im 组件库，包含了最基本的一些组件

Usage

# 安装组件库
npm i @medlinker/im-components -S
# 安装im-sdk，用于与服务端建立连接通信
npm i @medlinker/im-sdk -S

下面给出一个简单的使用，代码运行实例可以参考med-im-chat项目

import { MsgContainer } from '@medlinker/im-components';
import MedIm, {
  Reference,
  MedImEvent,
  EnhanceMessage,
  ConversationType,
  createTextPayload,
  createImagePayload,
} from '@medlinker/im-sdk';

function App() {
  const imRef = useRef<MedIM>(null);
  const [messages, setMessages] = useState<EnhanceMessage[]>([]);
  const getHistory = useCallback(() => {
    // 请求历史记录
  }, []);

  useEffect(() => {
    let im = imRef.current;
    if (!im) {
      im = new MedIm(
        {
          // 传入创建消息类型
          type: ConversationType.Group,
          // 当前登录用户
          from: {
            id: loginUserId,
            reference: Reference.medlinker,
          },
          // 当前消息类型对应的信息
          group: {
            id: groupId,
          },
        },
        {
          // im接口
          imApi: '//im-api-qa.medlinker.com',
          // im获取网关接口
          imGate: '//im-wss-qa.medlinker.com/gate',
        }
      );
    }
    const unshiftMessage = (message: EnhanceMessage) => {
      setMessages((prev) => prev.concat(message));
    };
    if (im) {
      // sdk登录准备就绪，登录成功后调用
      im.on(MedImEvent.sdkReady, getHistory);
      // 接收到消息时调用
      im.on(MedImEvent.receiveMessage, unshiftMessage);
    }

    return () => {
      if (im) {
        im.off(MedIm.MedImEvent.sdkReady, getHistory);
        im.off(MedIm.MedImEvent.receiveMessage, unshiftMessage);
      }
    };
  }, []);

  return (
    <MsgContainer
      messages={messages}
      loginUser={{ id: loginUserId, reference: Reference.medlinker }}
      onTopReached={getHistory}
    />
  );
}