web-live/src/components/chat.vue

<template>
  <div id="chats">
    <el-row>
      <el-col :span="24" class="info chat_frame" id="chat">
        <template v-for="(i, index) in talk">
          <template v-if="isSender(i, index)">
            <el-col :span="24" class="senderTime" :key="`div${i.id}${index}`">
              <span :key="`senderTime${i.id}${index}`">[{{ i.send_time }}] {{ i.sender_name }}</span>
              <span v-html="i.content" :key="`senderContent${i.id}${index}`"></span>
            </el-col>
          </template>
          <template v-else>
            <el-col :span="24" class="receverTime" :key="`div${i.id}${index}`">
              <span :key="`receverTime${i.id}${index}`"> {{ i.sender_name }} [{{ i.send_time }}]</span>
              <span v-html="i.content" :key="`receverContent${i.id}${index}`"></span>
            </el-col>
          </template>
        </template>
      </el-col>
      <el-col :span="24" style="text-align:center">
        <el-input v-model="content" type="textarea"></el-input>
        <el-button type="primary" size="mini" @click="sendMessage" style="margin-top:10px">发送</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import wangEditor from '@common/src/components/frame/wang-editor.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: personChat } = createNamespacedHelpers('personChat');
const _ = require('lodash');
export default {
  name: 'chats',
  props: {
    room: { type: Object },
  },
  components: {},
  data: () => {
    return {
      content: '',
      talk: [],
    };
  },
  created() {},
  async mounted() {
    this.channel();
  },
  methods: {
    ...personChat(['create', 'query']),
    async search() {
      let res = await this.query({ room_id: this.room.id });
      if (this.$checkRes(res)) {
        this.$set(this, `talk`, res.data);
        this.turnBottom();
      }
    },
    async sendMessage() {
      if (this.content != '') {
        let obj = { room_id: this.room.id, content: this.content, sender_id: this.user.id, sender_name: this.user.name };
        let pos = 'p1';
        if (_.get(this.room, 'p1_id') === this.user.id) pos = 'p2';
        obj.receiver_id = _.get(this.room, `${pos}_id`);
        obj.receiver_name = _.get(this.room, pos);
        let res = await this.create(obj);
        // this.$refs.editor.setContent();
        this.$set(this, `content`, '');
        this.$forceUpdate();
        if (this.$checkRes(res, null, res.errmsg || '发言失败')) {
          this.talk.push(res.data);
          this.turnBottom();
        }
      } else this.$message.error('请输入信息后发送');
    },
    channel() {
      //TODO 修改订阅地址
      if (!this.room.id) {
        console.warn('未获取到房间id,无法进行订阅');
        return;
      }
      // console.log(`/exchange/personChat/${this.room.id}/${this.user.id}`);
      this.$stomp({
        [`/exchange/personChat/${this.room.id}.${this.user.id}`]: this.onMessage,
      });
    },
    onMessage(message) {
      let body = _.get(message, 'body');
      if (body) {
        body = JSON.parse(body);
        this.talk.push(body);
        this.turnBottom();
      }
    },
    turnBottom() {
      this.$nextTick(() => {
        document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight;
      });
    },
    isSender(data) {
      return this.user.id !== data.sender_id;
    },
  },
  watch: {
    room: {
      handler(val) {
        if (val.id) this.search();
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.chat_frame {
  height: 350px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  overflow-y: auto;
}
.info {
  float: left;
  width: 100%;
  padding: 15px;
}
/deep/.info p {
  margin: 0 !important;
  padding: 0 !important;
}
.senderTime {
  float: left;
  width: 100%;
  text-align: left;
}
.receverTime {
  float: right;
  width: 100%;
}
.receverTime span:first-child {
  float: right;
  width: 100%;
  text-align: right;
}
.receverTime span:last-child {
  float: right;
  width: 100%;
  text-align: right;
}
</style>