rt-sim-training-client/src/views/trainRoom/e-chat.vue

<template>
  <!-- 聊天窗口 -->
  <div class="chat">
    <div class="chat__head">
      <div class="chat__head--title"> 会话窗口</div>
    </div>
    <div ref="content" class="chat__container" :style="{height: listHeight+'px'}">
      <ul class="chat__container--list">
        <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;">
              {{ covertTime(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 }} {{ covertTime(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" class="roomTip">{{ nor.roomTip }}</li>
        </div>
      </ul>
      <div v-if="recordSending" class="chat_record_tip">
        <div class="record_icon" />
        <div class="record_tip_text">正在录音...</div>
        <div class="record_tip_confirm" @click="stopRecording()">确定</div>
        <div class="record_tip_cancle" @click="cancleRecording()">取消</div>
      </div>
    </div>
    <div class="chat__footer">
      <div class="chat_tool">
        <div class="microphoneBtn" @click="startRecording()">
          <span class="el-icon-microphone" />
        </div>
      </div>
      <textarea id="dope" v-model="text" class="chat__footer--text" style="width: 99%;height: 47px; border: none;outline: none;" @keyup="handleSetInputState" />
      <button class="chat__footer--send" :disabled="disabled" @click="handleSendText">{{ $t('trainRoom.sendText') }}</button>
    </div>
  </div>
</template>

<script>
// import HZRecorder from '@/utils/HZRecorder';
import RecordRTC from 'recordrtc';
import { chatWithText, chatWithAudio } from '@/api/chat';
import { chatWithTextNew } from '@/api/jointTraining';

export default {
    props: {
        room: {
            type: Object,
            required: true
        },
        members: {
            type: Array,
            required: true
        },
        height: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            textList: [],
            recordSending:false,
            text: '',
            recorders: null,
            sending: false,
            disabled:true,
            microphone:null
        };
    },
    computed: {
        listHeight() {
            return this.height - 119;
        },
        group() {
            return this.$route.query.group;
        },
        userId() {
            return this.$store.state.user ? this.$store.state.user.id : '';
        },
        drawWay() {
            return this.$route.query.drawWay + '';
        }
    },
    watch: {
        '$store.state.socket.chatContent': function (val) { // 房间内语音聊天
            if (val.chatInfo) {
                this.handelTextList(val);
            }
        }
    },
    methods: {
        async handleSetInputState() {
            if (!this.text.trim()) {
                this.disabled = true;
            } else {
                this.disabled = false;
            }
        },
        covertTime(time) {
            return time.slice(0, time.indexOf('.'));
        },
        async handleSendText() {
            try {
                if (this.text.trim()) {
                    if (this.drawWay === 'true') {
                        await chatWithTextNew(this.text, this.group);
                    } else {
                        await chatWithText(this.text, this.group);
                    }
                    this.text = '';
                    this.disabled = true;
                }
            } catch (error) {
                console.error(error);
            }
        },
        async 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/setChatContent', {});
            this.$nextTick(() => {
                if (this.$refs.content) {
                    this.$refs.content.scrollTop = this.$refs.content.scrollHeight;
                }
            });
        },
        // 语音录制开始
        startRecording() {
            const that = this;
            if (!this.recordSending && !this.recorders && !this.microphone) {
                debugger;
                navigator.getUserMedia(
                    { audio: true } // 只启用音频
                    , function (stream) {
                        that.microphone = stream;
                        that.recorders = new RecordRTC(that.microphone, {
                            type: 'audio',
                            checkForInactiveTracks: true
                        });
                        that.recorders.startRecording();
                        that.recordSending = true;
                    }, function (error) {
                        switch (error.code || error.name) {
                        case 'PERMISSION_DENIED':
                        case 'PermissionDeniedError':
                            that.$message({
                                showClose: true,
                                message: '用户拒绝提供信息',
                                type: 'error'
                            });
                            break;
                        case 'NOT_SUPPORTED_ERROR':
                        case 'NotSupportedError':
                            that.$message({
                                showClose: true,
                                message: '浏览器不支持硬件设备',
                                type: 'error'
                            });
                            break;
                        case 'MANDATORY_UNSATISFIED_ERROR':
                        case 'MandatoryUnsatisfiedError':
                            that.$message({
                                showClose: true,
                                message: '无法发现指定的硬件设备',
                                type: 'error'
                            });
                            break;
                        default:
                            that.$message({
                                showClose: true,
                                message: '无法打开麦克风',
                                type: 'error'
                            });
                            break;
                        }
                    }
                );
                // HZRecorder.init.get(rec => {
                //     if (typeof rec == 'object') {
                //         this.recorders = rec;
                //         this.recorders.start();
                //         this.recordSending = true;
                //     }
                // });
            }
        },
        // 停止录制
        stopRecording() {
            const that = this;
            this.recorders.stopRecording(function(blobURL) {
                const data = URL.createObjectURL(that.recorders.getBlob());
                console.log('--------', data);
                const blob = that.recorders.getBlob();
                const fd = new FormData();
                fd.append('file', blob);
                chatWithAudio(fd, that.$route.query.group).then((res)=>{
                    this.recordSending = false;
                    this.$message({
                        showClose: true,
                        message: '语音发送成功',
                        type: 'success'
                    });
                }).catch(error => {
                    // this.sending = false;
                    this.recordSending = 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'
                        });
                    }
                });
                if (that.microphone) {
                    that.microphone.stop();
                    that.microphone = null;
                    that.recordSending = false;
                    that.recorders = null;
                }
            });
            // this.sending = true;
            // if (this.recorders) {
            //     this.recorders.stop();
            //     var fd = new FormData();
            //     fd.append('file', this.recorders.getBlob());
            //     chatWithAudio(fd, this.$route.query.group).then((res)=>{
            //         this.recordSending = false;
            //         this.$message({
            //             showClose: true,
            //             message: '语音发送成功',
            //             type: 'success'
            //         });
            //     }).catch(error => {
            //         // this.sending = false;
            //         this.recordSending = 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'
            //     });
            // }
        },
        cancleRecording() {
            this.recordSending = false;
            this.recorders = null;
        },
        playAudio(nor) {
            this.$refs.audio.src = nor.src;
            this.$refs.audio.play();
        }
    }
};
</script>

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

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

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

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

		&__head {
			display: flex;
			align-items: center;
			background: #f0f0f0;
			border-bottom: 1px solid #ccc;

			&--title {
				font-size: 16px;
				font-weight: bold;
                padding:10px 0px 10px 10px;
			}
		}

        &__container {
            -webkit-box-flex: 1;
            overflow-y: scroll;
            padding-right: 8px;
            padding-left: 2px;
            position: relative;
			&--list {
				list-style: none;
				margin: 0;
				padding: 10px 0;

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

                .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%;
                }

				.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;
				}

				.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;
                }

                .roomTip{
                    font-size: 12px;
                    text-align: center;
                }
			}
        }

        .chat_record_tip{
            height: 28px;
            display: inline-block;
            background: #dfe6ee;
            width: 100%;
            font-size: 13px;
            border-top: 1px #d8dce5 solid;
            padding: 6px 0px 6px 4px;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .record_icon{
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #25d825;
            border-radius: 10px;
            margin-left: 3px;
            margin-right: 0px;
            box-shadow: -1px 0px 3px #6d6d6d;
            border: 1px #28d228 solid;
        }
        .record_tip_text{
            display: inline-block;
            font-size: 12px;
            margin-left: 3px;
        }
        .record_tip_confirm{
            position: absolute;
            right: 63px;
            padding: 3px 0px 2px 0px;
            border: 1px #a2a5aa solid;
            border-radius: 5px;
            width: 45px;
            text-align: center;
            font-size: 12px;
            top: 4px;
            background: #eeeeee;
            cursor: pointer;
        }
        .record_tip_cancle{
            position: absolute;
            right: 10px;
            padding: 3px 0px 2px 0px;
            border: 1px #a2a5aa solid;
            border-radius: 5px;
            width: 45px;
            text-align: center;
            font-size: 12px;
            top: 4px;
            background: #eeeeee;
            cursor: pointer;
        }

        &__footer {
            width: 100%;
            height: 113px;
            position: relative;

            .chat_tool{
                border-top: 1px solid #d8dce5;
                width: 100%;
                padding: 5px;
            }
            .microphoneBtn{
                font-size: 18px;
                padding: 2px;
                width: 24px;
                text-align: center;
                &:hover{
                    color:#0188fb;
                    cursor: pointer;
                }
            }

			&--text {
				width: 99%;
				height: 75px;
				border: none;
				outline: none;
				resize: none;
				font-size: 16px;
                padding-left: 10px;
                padding-top: 0px;
			}

            &--send {
                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;
                &:disabled{
                    background: #6dbcff;
                    cursor: no-drop;
                }
            }
        }
    }
</style>