med-im-components
im 组件库,包含了最基本的一些组件
Usage
# 安装组件库 npm i med-im-components -S# 安装im-sdk,用于与服务端建立连接通信 npm i med-im-sdk -S
下面给出一个简单的使用,代码运行实例可以参考med-im-chat
项目
import { MsgContainer } from 'med-im-components';import MedIm, { Reference, MedImEvent, EnhanceMessage, ConversationType, createTextPayload, createImagePayload,} from 'med-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} /> );}