vue 聊天页面

需求：店铺需要跟用户对话
我直接上代码

<template>
  <div class="message-detail message-detail-list">
    <section class="chat-section">
      <a-card class="chat-card">
        <div class="chat-title">
          <div>
            <p class="te-im">
              {{ queryParams.userName }}
              <img src="@/assets/userImg/info-blue.svg" />
            </p>
            <p>{{ queryParams.recruitTime }} {{ queryParams.title }}</p>
          </div>
          <a-button @click="toUserDetail(queryParams)">{{ $t('evaluation.detail') }}</a-button>
        </div>
        <a-card class="chat-section chat-card1">
          <!-- <span class="chat-load">加载更多信息</span> -->
          <div id="chat-box1" ref="msg-box" class="box">
            <div v-for="(item, index) in listData" :key="index">
              <div class="chart-timer">{{ item.createTime }}</div>
              //recruit_app判断用户发过来的信息，展示在左侧
              <div v-show="item.businessType === 'recruit_app'" class="item chart-left">
                <div v-if="!imgUrl" class="default-avatar">
                  <svg-icon icon-class="store" />
                </div>
                <img class="header-img" :src="imgUrl" />
                <span class="message">{{ item.message }}</span>
              </div>
              //recruit_enterprise判断客服（自己发过去）发过来的信息，展示在右侧侧
              <div v-show="item.businessType == 'recruit_enterprise'" class="item chart-right">
                <div v-if="!user.avatar" class="default-avatar">
                  <svg-icon icon-class="store" />
                </div>
                <img v-else class="header-img" :src="user.avatar" />
                <span class="message">{{ item.message }}</span>
              </div>
            </div>
          </div>
        </a-card>
        <div class="input-box">
          <a-input
            ref="sendMsg"
            v-model="contentText"
            type="text"
            :placeholder="$t('evaluation.pleaseFillIn')"
            @keyup.enter.native="sendText"
          />
          <a-button v-if="contentText" class="btn" @click="sendText">
            <img src="@/assets/userImg/send-wirte.svg" />
            {{ $t('evaluation.send') }}
          </a-button>
          <a-button v-else class="btn1">
            <img src="@/assets/userImg/send-wirte.svg" />
            {{ $t('evaluation.send') }}
          </a-button>
        </div>
      </a-card>
    </section>
  </div>
</template>

import { mapState } from 'vuex';
import { getToken } from '@/utils/auth';
import { listHistory } from '@/api/manage/message';
export default {
  name: 'MessageDetail',
  data() {
    return {
      queryParams: {},
      // table/搜索框
      tableLoading: false,
      // 分页数据(默认第一页):
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      current: 1,
      pageSize: 10,
      total: 0,
      socket: '',
      ws: null,
      contentText: '',
      // 历史分页参数
      historyParams: {
        pageSize: 10, // 加载多少页到多少页的数据
        pageNum: 1, // 加载第几页的数据
      },
      oppositeData: {},
      weData: {},
      listData: [
        // { 'appUserId': 1, 'appUserName': '国航', 'message': '服务器消息', 'recruitId': 22, 'type': 'server' },
        // { 'appUserId': 1, 'appUserName': '国航', 'message': '服务器消1息31232', 'recruitId': 22 },
      ], // 聊天记录的数组
      isShow: false,
      isShow1: false,
      chatList: [],
      isFirst: 1,
      lockReconnect: true, // 避免重复连接
      imgUrl: null,
      page: 0,
    };
  },
  computed: {
    ...mapState(['settings', 'user', 'mode']),
  },
  created() {
    this.queryParams = JSON.parse(localStorage.getItem('queryParamsMessage'));
    this.imgUrl = this.queryParams.imgUrl;
    this.getListHistory();
    // 初始化
    this.$nextTick(() => {
      this.initWebSocket();
    });
  },
  destroyed() {
    // 销毁监听
    window.removeEventListener('mousewheel', this.onScroll, false);
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('mousewheel', this.onScroll, true);
    });
  },
  methods: {
    getListHistory() {
      const params = {
        id: this.queryParams.id,
        userId: this.queryParams.userId,
        isFirst: this.isFirst,
        recruitId: this.queryParams.recruitId,
        page: this.page,
        // ...this.historyParams,
      };
      listHistory(params).then((res) => {
        if (res.code === 200) {
          this.$store.dispatch('SetUnread');
          if (res.data.length < 1) {
            if (this.page === -1) {
              this.isShow = true;
            } else {
              this.isShow1 = true;
            }
          } else {
            this.queryParams.id = res.data[0].id;
          }
          this.listData = [...this.listData, ...res.data];
          this.listData = this.listData.sort(function (a, b) {
            return a.createTime > b.createTime ? 1 : -1;
          });
        }
      });
    },
    // 获取滚动条当前的位置
    getScrollTop() {
      var scrollTop = 0;
      // const dom = document.getElementById('chat-box1');
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
      } else if (document.body) {
        scrollTop = document.body.scrollTop;
      }
      return scrollTop;
    },
    // 获取当前可视范围的高度
    getClientHeight() {
      var clientHeight = 0;
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
      } else {
        clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
      }
      return clientHeight;
    },
    // 获取文档完整的高度
    getScrollHeight() {
      return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    },
    // 滚动事件触发下拉加载
    onScroll(e) {
      const direction = e.deltaY > 0 ? 'down' : 'up'; // 该语句可以用来判断滚轮是向上滑动还是向下
      if (direction === 'up') {
        this.page = -1;
        // console.log('isShow:' + this.isShow);
        if (!this.isShow) {
          this.$nextTick(() => {
            this.getListHistory();
          });
        }
      } else {
        this.page = 1;
        // console.log('isShow1:' + this.isShow1);
        if (!this.isShow1) {
          this.$nextTick(() => {
            this.getListHistory();
          });
        }
      }
      if (this.getScrollHeight() - this.getClientHeight() - this.getScrollTop() <= 0) {
        // if (this.status === 1) {
        //   this.status = 0;
        // 页码，分页用，默认第一页
        // this.deliverParams.page += 1;
        // 调用请求函数
        //   alert('触发！！！');
        // }
      }
    },
    /** pageSize 变化的回调 */
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.current = current;
      this.getList();
    },
    /** 页码改变的回调 */
    currentPageChange(current, pageSize) {
      this.pageSize = pageSize;
      this.current = current;
      this.getList();
    },
    toDetailMessage() {
      this.$router.push({ path: '/message-detail/detail' });
    },
    returnClick() {
      this.$router.go(-1);
    },
    toScan() {
      this.$router.push({ path: '/attendance' });
    },
    toAddUser() {
      this.$router.push({ path: '/recruit-temp/index' });
    },
    toUserDetail(record) {
      this.$router.push({ path: '/recruit/detail', query: { id: record.recruitId }});
    },
    // 滚动条到底部
    scrollBottom() {
      const el = this.$refs['msg-box'];
      el.scrollTop = el.scrollHeight;
    },
    // 发送聊天信息
    sendText() {
      const _this = this;
      _this.$refs['sendMsg'].focus();
      if (!_this.contentText) {
        return;
      }
      const param = this.queryParams;
      this.chatList = {
        appUserId: param.userId,
        appUserName: param.userName,
        recruitId: param.recruitId,
        message: _this.contentText,
      };
      if (_this.ws.readyState === 1) {
        _this.ws.send(JSON.stringify(this.chatList)); // 调用WebSocket send()发送信息的方法
        this.listData.push({ ...this.chatList, businessType: 'recruit_enterprise' });
      }
      _this.contentText = '';
      setTimeout(() => {
        _this.scrollBottom();
      }, 500);
    },
    destroyed() {
      // 销毁监听
      // this.over();
      this.ws.close();
    },
    // 进入页面创建websocket连接
    initWebSocket() {
      const _this = this;
      const NODE_ENV = process.env.NODE_ENV;
      let ws = null;
      // 判断页面有没有存在websocket连接
      if (window.WebSocket) {
        if (NODE_ENV === 'development') {
          //  此处的 :8181 端口号 要与后端配置的一致
          ws = new WebSocket('ws://13.230.192.185:81/msg;' + getToken());
        } else if (NODE_ENV === 'production') {
          ws = new WebSocket('ws://13.230.192.185:81/msg;' + getToken());
        } else {
          ws = new WebSocket('ws://13.230.192.185:81/msg;' + getToken());
        }
        _this.ws = ws;
        ws.onopen = function (e) {
          console.log('服务器连接成功');
        };
        ws.onclose = function (e) {
          console.log('服务器连接关闭');
        };
        ws.onerror = function (e) {
          if (_this.lockReconnect) {
            setTimeout(() => {
              _this.initWebSocket();
              _this.$message.error(_this.$t('evaluation.again'));
            }, 5000);
          }
          console.log('服务器连接出错');
        };
        ws.onmessage = function (e) {
          // 接收服务器返回的数据
          if (e.data.indexOf('{') !== -1) {
            // 接收对方数据
            const data = JSON.parse(e.data);
            if (_this.queryParams.recruitId === data.recruitId) {
              _this.listData.push({ ...data, businessType: 'recruit_app' });
            }
          }
        };
        _this.$router.afterEach(function (e) {
          if (e.name === 'DetailMessage') {
            _this.lockReconnect = true;
          } else {
            _this.lockReconnect = false;
          }
        });
      }
    },
  },

<style lang="scss" scoped>
.chat-load {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  margin: -11px 0 20px 0;
}
.message-detail {
  padding: 10px 48px;
  max-width: 1200px;

  .chat-card1 {
    background: #f5f5f5ff;
    border-radius: 10px;
    height: 600px;
    overflow: auto;
  }
  .chat-section {
    margin-top: 40px;
    padding: 20px 20px 60px 20px;

    .chat-card {
      border-radius: 10px;
      padding: 20px 20px 60px 20px;
      .chat-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .te-im {
          display: flex;
          align-items: center;
          img {
            width: 16px;
            margin-left: 10px;
          }
        }
      }
    }

    /*
聊天item采用flex布局
*/
    .item {
      display: flex;
      margin-bottom: 20px;
    }

    .chart-left {
      flex-direction: row;
      .message {
        border-radius: 0 10px 10px 10px;
        background: #fff;
        align-items: center;
        color: #333333ff;
        margin-left: 10px;
      }
    }

    .chart-right {
      flex-direction: row-reverse;
      .message {
        border-radius: 10px 0 10px 10px;
        background: #26d4e0ff;
        color: #fff;
        margin-right: 10px;
      }
    }

    .header-img {
      width: 42px;
      height: 42px;
      border-radius: 100px;
    }

    .message {
      display: flex;
      min-height: 25px;
      padding: 9px 10px;
      align-items: center;
      word-break: break-all;
      max-width: 41%;
    }

    .input-box {
      position: absolute;
      bottom: 0px;
      left: 0;
      right: 0;
      display: flex;
      padding: 15px 40px;
      box-sizing: border-box;
    }

    .input-box input {
      flex: 1;
      border-radius: 3px;
      border: 1px #cecece solid;
      padding: 20px;
      outline: none;
    }
    .btn {
      background: #26d4e0ff;
    }
    .btn1 {
      background: #ccccccff;
    }
    .input-box button {
      width: 80px;
      border-radius: 3px;
      border: 1px #fffa solid;
      color: #ffffff;
      margin: 0px 6px;
      outline: none;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      img {
        width: 14.71px;
        margin-right: 5px;
      }
    }
    button:active {
    }

    .chart-timer {
      text-align: center;
      color: #616161;
      font-size: 13px;
    }
  }
}
.chat-box {
  margin: 0 auto;
  background: #fafafa;
  position: absolute;
  height: 100%;
  width: 100%;
  max-width: 700px;
  header {
    position: fixed;
    width: 100%;
    height: 3rem;
    background: #409eff;
    max-width: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
    font-size: 1rem;
  }
  .msg-box {
    position: absolute;
    height: calc(100% - 6.5rem);
    width: 100%;
    margin-top: 3rem;
    overflow-y: scroll;
    .msg {
      width: 95%;
      min-height: 2.5rem;
      margin: 1rem 0.5rem;
      position: relative;
      display: flex;
      justify-content: flex-start !important;
      .user-head {
        min-width: 2.5rem;
        width: 20%;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: #f1f1f1;
        display: flex;
        justify-content: center;
        align-items: center;
        .head {
          width: 1.2rem;
          height: 1.2rem;
        }
        // position: absolute;
      }
      .user-msg {
        width: 80%;
        // position: absolute;
        word-break: break-all;
        position: relative;
        z-index: 5;
        span {
          display: inline-block;
          padding: 0.5rem 0.7rem;
          border-radius: 0.5rem;
          margin-top: 0.2rem;
          font-size: 0.88rem;
        }
        .left {
          background: white;
          animation: toLeft 0.5s ease both 1;
        }
        .right {
          background: #53a8ff;
          color: white;
          animation: toright 0.5s ease both 1;
        }
        @keyframes toLeft {
          0% {
            opacity: 0;
            transform: translateX(-10px);
          }
          100% {
            opacity: 1;
            transform: translateX(0px);
          }
        }
        @keyframes toright {
          0% {
            opacity: 0;
            transform: translateX(10px);
          }
          100% {
            opacity: 1;
            transform: translateX(0px);
          }
        }
      }
    }
  }
  .input-box {
    padding: 0 0.5rem;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3.5rem;
    background: #fafafa;
    box-shadow: 0 0 5px #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      height: 2.3rem;
      display: inline-block;
      width: 100%;
      padding: 0.5rem;
      border: none;
      border-radius: 0.2rem;
      font-size: 0.88rem;
    }
    .btn {
      height: 2.3rem;
      min-width: 4rem;
      background: #e0e0e0;
      padding: 0.5rem;
      font-size: 0.88rem;
      color: white;
      text-align: center;
      border-radius: 0.2rem;
      margin-left: 0.5rem;
      transition: 0.5s;
    }
    .btn-active {
      background: #409eff;
    }
  }
}
.default-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: #fff;
  color: #999999;
  border-radius: 50%;
  font-size: 50px;
  padding: 6px;
}
</style>