@obr-fe/business-im
v1.0.0
Published
欧倍尔新云平台-聊天系统
Keywords
Readme
@obr-fe/business-im
基于 vite5.x + vue3.x + antd-design-vue4.x + typescript5.x 的欧倍尔新云平台-聊天系统(lib)
安装使用(全时安)
配置组织@obr-fe的npm源
- 方式一:在与
package.json同级目录下创建.npmrc文件,并增加如下配置@obr-fe:registry = https://dev-fe.oberyun.com/npm/ - 方式二:终端切到
package.json同级目录下,执行下面的命令即可touch .npmrc echo "@obr-fe:registry = https://dev-fe.oberyun.com/npm/" > .npmrc
- 方式一:在与
安装依赖
yarn add @obr-fe/business-im在合适的位置引用组件并编写弹窗逻辑
以全时安为例:编写
Chat.vue组件并在layout组件中引用src/layout/components/Chat.vue<script> import { mapState } from 'vuex' // vuex state import { setup } from '@obr-fe/business-im' // 引入im库 import { getToken } from '@/utils/auth' // 获取token的方法 // 本地IndexedDB库名 const DB_NAME = 'DB_CJDL_IM' export default { name: 'Chat', data() { return { instance: null, visible: false, chatReady: false } }, computed: { ...mapState(['user']), hasLogin() { return this.user && Object.keys(this.user).length > 0 } }, mounted() { // 组件挂载渲染后执行加载IM的函数 this.initChat() }, beforeUnmount() { // 组件卸载前销毁IM实例 this.instance.close() }, methods: { // 初始化IM库 initChat() { this.$nextTick(() => { const t = setTimeout(() => { const el = this.$refs.chatDom this.instance = setup(el, { token: getToken(), orgId: this.user.organId, orgName: this.user.roleNameList.includes(3) ? 'student' : 'teacher', userId: this.user.id, username: this.user.realname, dbname: DB_NAME }) // 监听IM聊天窗口的显示/隐藏状态的改变 this.instance.visibleChange(() => { this.visible = this.instance.visible }) this.chatReady = true clearTimeout(t) }, 1000) }) }, // 打开IM聊天窗口 调用实例上的changeVisible函数 handleOpenChat() { this.visible = true this.instance.changeVisible(true) } } } </script> <template> <div class="chat-wrap" :class="[visible && 'chat-wrap_visible']"> <div v-if="chatReady" title="在线聊天" class="icon-chat" @click="handleOpenChat" /> <div v-show="visible" id="chatDom" ref="chatDom" /> </div> </template> <style scoped lang="scss"> .chat-wrap { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 1002; .icon-chat { position: fixed; right: 0; bottom: 40vh; width: 48px; height: 48px; background-size: 100% 100%; background-position: 0; background-repeat: no-repeat; background-image: url("@/assets/icon/icon-chat.png"); pointer-events: all; cursor: pointer; } #chatDom { background-color: #000; position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 1200px; height: 675px; pointer-events: all; } } .chat-wrap_visible { width: 100vw; height: 100vh; pointer-events: all; } </style>src/layout/components/Header.vue<script> import { mapState, mapGetters, mapActions } from "vuex"; import Chat from "./Chat.vue"; export default { components: { Chat }, name: "Header", data() { return { }; }, computed: { ...mapState(["user"]), hasLogin() { return this.user && Object.keys(this.user).length > 0; }, } }; </script> <template> <el-header> ... <!-- 聊天组件 --> <Chat v-if="hasLogin" /> </el-header> </template>配置请求前缀代理
开发时请在vue.config.js中配置
# http请求 location /obrim-api { proxy_pass http://xxx; } # websocket请求 location /obrim-ws { proxy_http_version 1.1; proxy_pass http://xxx; # 前端在vue.config.js中配置时记得换成ws协议 # ...... }启动相应的项目
yarn run serve效果图
