add chat

package.json

@@ -28,7 +28,8 @@
     "vue-router": "^3.2.0",
     "vue-seamless-scroll": "^1.1.23",
     "vuex": "^3.4.0",
-    "wangeditor": "^4.5.1"
+    "wangeditor": "^4.5.1",
+    "xchat-client": "^2.2.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/im/config.js

+export const config = {
+  appId: 'tecsun',
+  password: 'ds123456',
+  eid: process.env.VUE_APP_EID || 10,
+  chatApi: 'http://xchat-ds.jinsehuaqin.com:8020/',
+  SocketUrl: 'ws://xchat-ds.jinsehuaqin.com:8010/ws',
+}
+
+export const cache = {
+  chatApiOrgId: 'chatApiOrgId',
+  chatApiToken: 'chatApiToken',
+}

src/im/index.js

+import axios from 'axios'
+import { config, cache } from './config'
+import ximInstance from './xim'
+
+export function buildHeaders() {
+  return {
+    headers: {
+      Authorization: 'Bearer ' + localStorage.getItem(cache.chatApiToken),
+    },
+  }
+}
+
+export function getImTokenAndInitChat() {
+  return axios
+    .post(`${config.chatApi}/inside/api/get_auth_token`, {
+      app_id: config.appId,
+      password: config.password,
+      eid: config.eid,
+    })
+    .then((r) => {
+      const token = r.data.data.token
+      const orgId = r.data.data.org_id
+      localStorage.setItem(cache.chatApiToken, token)
+      localStorage.setItem(cache.chatApiOrgId, orgId)
+      return initChat(token)
+    })
+}
+
+export function initChat(token) {
+  if (ximInstance.isConnected()) {
+    return Promise.resolve()
+  }
+  return ximInstance.open(config.SocketUrl, token)
+}
+

src/views/message/index.vue

@@ -141,8 +141,18 @@
       </el-form>
     </el-drawer>
     <!-- 消息详情 -->
-    <el-drawer custom-class="drawer-details" title="消息详情" size="40%" :wrapper-closable="false" :visible.sync="showMsgDrawer">
-      <span>消息详情</span>
+    <el-drawer
+      custom-class="drawer-details"
+      title="消息详情"
+      size="40%"
+      :wrapper-closable="false"
+      :visible.sync="showMsgDrawer"
+    >
+      <div style="font-size:10px">
+        <div v-for="item in msgList" :key="item.id">{{ formatMsg(item) }}</div>
+      </div>
+      <el-input v-model="msgInput" clearable placeholder="请输入" />
+      <el-button @click="sendMsg">发送</el-button>
     </el-drawer>
   </div>
 </template>
@@ -151,6 +161,8 @@
 import Pagination from '@/components/Pagination'
 import { getAreaDictionary } from '@/api/user'
 import { getSendMsg, getMsgDetails } from '@/api/Message'
+import { getImTokenAndInitChat } from '@/im/index'
+import ximInstance from '@/im/xim'
 export default {
   name: 'PersonaPortrait',
   components: { Pagination },
@@ -241,7 +253,11 @@ export default {
       showMsgDrawer: false, // 抽屉：消息详情
       taskList: [ // 任务列表
 
-      ]
+      ],
+      currentChatId: 0,
+      msgInput: '',
+      chatList: [],
+      msgList: []
     }
   },
   computed: {
@@ -268,8 +284,52 @@ export default {
   },
   created() {
     // this.initPage()
+    getImTokenAndInitChat().then(() => {
+      this.register()
+      return this.getChatList()
+    })
   },
   methods: {
+    // 注册消息刷新事件
+    register() {
+      ximInstance.off('msg', () => { })
+      ximInstance.on('msg', (msg) => {
+        console.log('收到新消息', msg)
+        this.getChatList()
+        this.openChat(this.currentChatId)
+      })
+    },
+    getChatList() {
+      ximInstance.fetchChatList().then((data) => {
+        this.chatList = data.args[0]
+        console.log('chatList', this.chatList)
+      })
+    },
+    openChat(id) {
+      ximInstance.queryLastPageMsg('users', id, 20, {
+        model: '',
+        obj: '',
+        isMember: true
+      }).then((data) => {
+        this.msgList = data
+        console.log('msgList', data)
+      })
+    },
+    sendMsg() {
+      ximInstance.sendMsg('users', this.currentChatId, 'text', JSON.stringify({
+        text: this.msgInput
+      })).then(() => {
+        this.msgInput = ''
+        this.openChat(this.currentChatId)
+      })
+    },
+    formatMsg(msg) {
+      try {
+        return JSON.parse(msg.msg).text
+      } catch {
+        return ''
+      }
+    },
     // 初始化
     initPage() {
       this.searchForm.areaCode = this.curAreaID
@@ -291,6 +351,8 @@ export default {
     },
     // 获取消息详情
     async getMsgDetails(id) {
+      this.currentChatId = 2
+      this.openChat(this.currentChatId)
       const { data } = await getMsgDetails(id)
       if (data) {
         console.log(data, '消息详情')