springboot_vue_xhs/web/src/views/common/Im.vue

<template>
  <div>
    <el-dialog
      :title="user.displayName"
      append-to-body
      top="15vh"
      width="60%"
      :visible.sync="dialogVisible"
      center
      @close="handleCancel"
    >
      <div class="el-dialog-div" style="height:60vh;">
        <lemon-imui
          width="100%"
          height="60vh"
          position="center"
          :user='this.user' ref="IMUI"
          @pull-messages='handlePullMessages'
          @send="handleSend"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getAuthorChatList,getAuthorChat} from "@/api/business/chat/chat";
  import {isNotEmpty} from "@/utils";
  import webSocketManager from "@/api/websocket.js";

  export default {
    name: "Im",
    props: {
      sellList: Array,
    },
    data() {
      return {
        dialogVisible: false,
        temp:{},
        page:1,
        user:{id:8,displayName:'官方客服-薯队长',avatar:'http://8.146.211.120:8080/upload/avatar/kefu.jpg'},
      }
    },
    mounted(){
      console.log(process.env.VUE_APP_WEBSOCKET_API)
      webSocketManager.connect( process.env.VUE_APP_WEBSOCKET_API + '?authorId=8')

      // 设置收到消息回调函数
      webSocketManager.onMessage((data) => {
        if(data.handlerType == '6'){
          console.log('mounted')
          console.log(JSON.stringify(data.body))
          const {IMUI} = this.$refs;
          IMUI.appendMessage(data.body);
          IMUI.messageViewToBottom()
        }
      });

    },
    methods: {
      open() {
        this.dialogVisible = true
        this.getAuthorList()
      },
      getAuthorList(){
        getAuthorChatList({authorId:8}).then(response=> {
          this.$nextTick(() => {
              const {IMUI} = this.$refs;
              const authorList = response.data;
              const contacts = [];
              for (let item of authorList) {
                let data = {
                  id: item.id,
                  displayName: item.displayName,
                  avatar: item.avatar,
                  index: item.index,
                  unread: item.unread,
                  //最近一条消息的内容，如果值为空，不会出现在“聊天”列表里面。
                  //lastContentRender 函数会将 file 消息转换为 '[文件]', image 消息转换为 '[图片]'，对 text 会将文字里的表情标识替换为img标签,
                  //最近一条消息的发送时间
                  lastSendTime: item.lastSendTime,
                }
                if(isNotEmpty(item.lastContent)){
                  data.lastContent = IMUI.lastContentRender({type: 'text', content: item.lastContent})
                }
                contacts.push(data)
              }
              IMUI.initContacts(contacts);
          })
        })
      },
      handleCancel(){
        this.dialogVisible = false
      },
      submit(){

      },
      handleSend(message, next, file) {
        console.log('发送了信息')
        message.handlerType = '6'
        webSocketManager.sendMessage(JSON.stringify(message))
        //执行到next消息会停止转圈，如果接口调用失败，可以修改消息的状态 next({status:'failed'});
        next();
      },
      handlePullMessages(contact, next) {
        console.log(contact)
        getAuthorChat({authorId:8,fromId:contact.id,limit:6,page:this.page}).then(res=> {
          console.log(res.data.records)
          next(res.data.records.reverse(),true);
        })
        //将第二个参数设为true，表示已到末尾，聊天窗口顶部会显示“暂无更多消息”，不然会一直转圈。
      },
    },
  }
</script>
<style scoped>
  /deep/ .el-dialog__headerbtn{
    top:10px;
  }
  /deep/  .el-dialog__header{
    padding: 5px 20px 5px;background: #F7F7F7;
  }
  /deep/  .el-dialog--center  .el-dialog__body{
    padding:0;
  }
</style>