快速开始

技术栈

• Node 18+ 推荐 Node 20+ LTS 版本
• vue3 + ElementPlus
• @openim/[email protected]版本 OpenIM 技术文档

安装

pnpm i mdm-im-v3@latest -S

使用

组件中引入

<template>
  <mdm-im-v3 ref="chatRef" />
</template>
<script setup>
import { ref, watch } from 'vue'
import 'mdm-im-v3/style/index.css'
import { useMessage } from 'mdm-im-v3/core'
import { mdmImV3 } from 'mdm-im-v3'

// 调用hookes方法，获取IM初始化方法和IM的登录状态
const { initIM, loginStatus } = useMessage()
// 初始化IM并登录
et imInstance = null
const chatRef = ref()
const toLogin = () => {
  imInstance = initIM({
    apiUrl: 'https://10.2.12.103:8443', // IM api 地址，必填
    wsUrl: 'wss://10.2.12.103:8443', // IM ws地址，必填
    userID: loginForm.value.loginCode, // 用户ID，必填
    userName: loginForm.value.userName, // 用户名，必填
    satoken: loginForm.value.token, // 系统token，上传文件接口使用，必填
    imToken: loginForm.value.imToken, // OpenIM 用户令牌，业务后台验证用户账号密码后，通过user_token来获取
  })
  if (imInstance?.login) {
    setTimeout(() => {
      imInstance.login()
    }, 500)
  }
}

//监听IM登录状态，登录成功后，调用组件暴露的afterLogged方法，传入IM实例
watch(
  () => loginStatus.value,
  status => {
    // 登录成功后，调用afterLogged。3-登录成功，1-登录失败，2-登录中
    if (status === 3) {
      setTimeout(() => {
        chatRef.value?.afterLogged(imInstance)
      }, 500)
    }
  },
  { deep: true }
)
</script>