rt-sim-training-client/src/views/trainRoom/trainChat.vue

<template>
  <!-- 聊天窗口 -->
  <div class="train-chat">
    <audio ref="audio" style="display: none;" />
    <div ref="content" class="chatContent">
      <ul class="newsList">
        <div v-for="(nor, index) in textList" :key="index" style="margin-top: 5px;">
          <li v-if="nor.self" style="position: relative">
            <div class="userName" style="position: absolute; right: 4px; top: 4px; font-size: 14px;">
              {{ nor.chatTime }} {{ nor.userName }}</div>
            <div class="news">
              <span>{{ nor.value }}</span>
            </div>
            <div v-if="nor.voice" class="yuyin" @click="playAudio(nor)">
              <i class="el-icon-caret-right" />
            </div>
          </li>
          <li v-if="nor.other" style="position: relative">
            <div class="userName" style="position: absolute; left: 12px; top: 4px; font-size: 14px;">
              {{ nor.userName }} {{ nor.chatTime }}</div>
            <div class="answers">
              <span>{{ nor.value }}</span>
            </div>
            <div v-if="nor.voice" class="yuyin1" @click="playAudio(nor)">
              <i class="el-icon-caret-right" />
            </div>
          </li>
          <li v-if="nor.join" style="font-size: 12px; text-align: center;">{{ nor.roomTip }}</li>
        </div>
      </ul>
    </div>
    <div class="footChat">
      <div class="inputBox">
        <textarea
          id="dope"
          v-model="text"
          style="width: 99%;height: 47px; border: none;outline: none;"
          name=""
          rows=""
          cols=""
        />
        <button class="sendBtn" @click="sendText()">发送文字</button>
        <div
          class="sendBtn yuyin_start zIndex1"
          :style="{background: background}"
          @mousedown="startRecording()"
          @mouseup="stopRecording()"
        >{{ speak }}</div>
        <div v-show="sending" class="sendBtn yuyin_start zIndex2" :style="{background: background}">
          发送中...</div>
      </div>
    </div>
  </div>
</template>

<script>
import HZRecorder from '@/utils/HZRecorder';
import { getHistoryVoice, chatWithText, chatWithAudio } from '@/api/chat';

export default {
	name: 'TrainChat',
	props: {
		groupRoom: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			textList: [],
			topic: '/user/topic/chatroom',
			text: '',
			recorders: null,
			stomp: null,
			speak: '按住说话',
			sending: false,
			background: '',
			userId: ''
		};
	},
	watch: {
		'$store.state.socket.chatContentList': function (val) { // 房间内语音聊天
			if (val.chatInfo) {
				this.handelTextList(val);
			}
		}
	},
	async mounted() {
		this.userId = this.$store.state.user.id;
		// this.getHistory();  // 获取历史记录
	},
	methods: {
		// 发送文字
		async sendText() {
			if (!this.text.trim()) {
				alert('内容为空，不可发送！');
				this.text = '';
			} else {
				try {
					await chatWithText(this.text, this.groupRoom);
					this.text = '';
				} catch (error) {
					console.error(error);
				}
			}
		},
		// 语音录制开始
		startRecording() {
			this.background = '#ccc';
			this.speak = '录音中...';
			this.sending = false;
			HZRecorder.init.get(rec => {
				if (typeof rec == 'object') {
					this.recorders = rec;
					this.recorders.start();
				}
			});
		},
		// 停止录制
		async stopRecording() {
			this.background = '';
			this.speak = '按住说话';
			this.sending = true;
			if (this.recorders) {
				this.recorders.stop();
				var fd = new FormData();
				fd.append('file', this.recorders.getBlob());
				await chatWithAudio(fd, this.$route.query.group).catch(error => {
					this.sending = false;
					const message = JSON.parse(error.message);
					if (message.err_no == 3301) {
						this.$message({
							showClose: true,
							message: '音频质量有问题',
							type: 'error'
						});
					} else if (message.err_no == 3308) {
						this.$message({
							showClose: true,
							message: '音频过长,建议60s以下',
							type: 'error'
						});
					} else if (message.err_no == 3314) {
						this.$message({
							showClose: true,
							message: '音频太短,建议重录',
							type: 'error'
						});
					} else {
						this.$message({
							showClose: true,
							message: '网络问题，请重试',
							type: 'error'
						});
					}
				});
				this.recorders = null;
			} else {
				this.sending = false;
				this.$message({
					showClose: true,
					message: '音频太短,建议重录',
					type: 'error'
				});
			}
		},
		playAudio(nor) {
			this.$refs.audio.src = nor.src;
			this.$refs.audio.play();
		},
		// 获取历史记录
		async getHistory(obj, node, data) {
			this.textList = [];
			try {
				const res = await getHistoryVoice(this.code);
				res.data.forEach(item => {
					let isSelf = false;
					if (item.userId == this.userId) {
						isSelf = true;
					}
					const param = {
						join: false,
						value: item.message,
						self: isSelf,
						voice: item.isAudio,
						src: item.isAudio ? `${process.env.VOICE_API}/jlcloud/audio/${item.audioPath}` : '',
						other: !isSelf,
						userName: item.nickName,
						chatTime: item.chatTime
					};
					this.handelTextList(param);
				});
			} catch (error) {
				console.error(error);
			}
		},
		// 操作聊天内容list
		handelTextList(params) {
			if (!params.inSimulation) {
				this.textList.push(params);
				this.textList.sort((a, b) => {
					return a.date - b.date;
				});
			}
			this.sending = false;
			this.$store.dispatch('socket/setChatContentList', {});
			this.$nextTick(() => {
				if (this.$refs.content) {
					this.$refs.content.scrollTop = this.$refs.content.scrollHeight;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
    ul,
    li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    ::-webkit-scrollbar {
        width: 0px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #c7c7c7;
    }

    .train-chat {
        border: 1px solid #ccc;
        height: 100%;
        width: 480px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .chatContent {
            -webkit-box-flex: 1;
            overflow-y: scroll;
            padding-right: 8px;
            padding-left: 2px;
        }

        .newsList {
            list-style: none;
            margin: 0;
            padding: 10px 0;

            li {
                width: 100%;
                overflow: hidden;
                padding-top: 8px;
            }

            .news {
                max-width: 55%;
                width: auto;
                height: auto;
                background: #2683f5;
                padding: 6px 10px;
                margin-top: 15px;
                line-height: 20px;
                font-size: 14px;
                border-radius: 4px;
                position: relative;
                float: right;
                color: #fff;
                text-align: left;

                .jiao {
                    position: absolute;
                    right: -8px;
                    top: 10px;
                }
            }

            .answers {
                max-width: 55%;
                width: auto;
                height: auto;
                background: #eee;
                padding: 5px 10px;
                margin-top: 15px;
                line-height: 22px;
                font-size: 14px;
                border-radius: 5px;
                margin-left: 10px;
                position: relative;
                float: left;
                text-align: left;

                .jiao {
                    position: absolute;
                    left: -8px;
                    top: 10px;
                }
            }
        }

        .yuyin {
            width: 20px;
            height: 20px;
            cursor: pointer;
            margin-top: 21px;
            margin-right: 3px;
            float: right;
            border: 1px solid #ccc;
            border-radius: 50%;
        }

        .yuyin1 {
            width: 20px;
            height: 20px;
            cursor: pointer;
            margin-top: 21px;
            margin-left: 3px;
            float: left;
            border: 1px solid #ccc;
            border-radius: 50%;
        }

        .footChat {
            width: 100%;
            height: 83px;
            border-top: 1px solid #ccc;
            position: relative;

            .inputBox {
                textarea {
                    width: 99%;
                    height: 75px;
                    border: none;
                    outline: none;
                    resize: none;
                    font-size: 16px;
                }
            }

            .sendBtn {
                width: 70px;
                height: 25px;
                background: #0188fb;
                border: 0;
                position: absolute;
                bottom: 10px;
                right: 10px;
                color: #fff;
                cursor: pointer;
                font-size: 12px;
                line-height: 25px;
                text-align: center;
            }

            .yuyin_start {
                right: 84px;
            }
        }
    }
</style>