Vue WebSocket WaveSurferJS 实现H5聊天对话交互

引言

在H5开发中，常常需要实现聊天对话交互的功能。本文将介绍如何使用Vue框架结合WebSocket和WaveSurferJS来实现这一功能。

准备工作

在开始之前，我们需要先安装Vue和WaveSurferJS。可以使用npm命令进行安装：

npm install vue wavesurfer.js

初始化Vue项目

在安装完成Vue后，我们可以通过Vue CLI来初始化一个新的Vue项目：

vue create chat-app

然后按照提示选择默认配置即可。

添加WebSocket支持

接下来，我们需要添加WebSocket的支持。在Vue项目的入口文件main.js中，添加以下代码：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

Vue.prototype.$websocket = new WebSocket('wss://your-websocket-server-url')

new Vue({
  render: h => h(App),
}).$mount('#app')

你需要将your-websocket-server-url替换为你的WebSocket服务器的地址。

创建聊天组件

我们需要创建一个Vue组件来处理聊天对话的显示和发送。在项目目录下的src文件夹中，创建一个新的Chat.vue文件，并添加以下代码：

<template>
  <div>
    <div class="chat-area">
      <div
        v-for="(message, index) in messages"
        :key="index"
        :class="{'my-message': message.from === 'myself'}"
      >
        {{ message.content }}
      </div>
    </div>
    <div class="input-area">
      <input type="text" v-model="message" @keyup.enter="sendMessage" />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      messages: []
    };
  },
  methods: {
    sendMessage() {
      this.messages.push({ content: this.message, from: 'myself' });
      this.$websocket.send(this.message);
      this.message = '';
    }
  },
  mounted() {
    this.$websocket.onmessage = event => {
      const message = event.data;
      this.messages.push({ content: message, from: 'others' });
    };
  }
};
</script>

<style scoped>
.chat-area {
  height: 300px;
  overflow-y: scroll;
}

.my-message {
  text-align: right;
}

.input-area {
  display: flex;
  align-items: center;
}

.input-area input {
  flex: 1;
}

.input-area button {
  margin-left: 8px;
}
</style>

在主应用中使用聊天组件

在App.vue文件中，我们可以使用刚刚创建的Chat组件：

<template>
  <div>
    <h1>Vue + WebSocket + WaveSurferJS 实现H5聊天对话交互</h1>
    <Chat />
  </div>
</template>

<script>
import Chat from './Chat.vue';

export default {
  components: {
    Chat
  }
};
</script>

<style>
h1 {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin: 16px 0;
}
</style>

使用WaveSurferJS实现语音聊天

除了文字聊天，在H5应用中添加语音聊天也是常见需求。我们可以使用WaveSurferJS来进行语音录制和播放。首先，在Chat.vue文件中添加以下代码：

<template>
  <div>
    <!-- 略去前面的代码 -->

    <div class="record-button-area">
      <button v-if="!isRecording" @click="startRecording">开始录制</button>
      <button v-if="isRecording" @click="stopRecording">停止录制</button>
    </div>

    <div v-for="(audio, index) in audios" :key="index">
      <audio :src="audio.url" controls></audio>
    </div>
  </div>
</template>

<script>
import WaveSurfer from 'wavesurfer.js';

export default {
  // 略去前面的代码

  data() {
    return {
      // 略去前面的代码
      isRecording: false,
      wavesurfer: null,
      audios: []
    };
  },
  methods: {
    // 略去前面的代码

    startRecording() {
      this.isRecording = true;

      navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
        const audioChunks = [];
        const mediaRecorder = new MediaRecorder(stream);

        mediaRecorder.addEventListener('dataavailable', event => {
          audioChunks.push(event.data);
        });

        mediaRecorder.addEventListener('stop', () => {
          const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
          const audioUrl = URL.createObjectURL(audioBlob);
          const audio = new Audio();
          audio.src = audioUrl;
          this.audios.push({ url: audioUrl });
        });

        mediaRecorder.start();
        this.wavesurfer.microphone = WaveSurfer.microphone.create();
        this.wavesurfer.microphone.start();
      });
    },
    stopRecording() {
      this.isRecording = false;
      this.wavesurfer.microphone.stop();

      this.wavesurfer.microphone.exportWAV(blob => {
        this.wavesurfer.microphone.play();

        const reader = new FileReader();
        reader.onloadend = () => {
          this.$websocket.send(reader.result);
        };
        reader.readAsArrayBuffer(blob);
      });
    }
  },
  mounted() {
    // 略去前面的代码

    this.wavesurfer = WaveSurfer.create({
      container: '#waveform',
      waveColor: 'violet',
      progressColor: 'purple',
      scrollParent: true
    });
    this.wavesurfer.microphone = Object.create(WaveSurfer.Microphone);
    this.wavesurfer.microphone.init(this.wavesurfer.backend);
  }
};
</script>

<style scoped>
// 略去前面的代码

.record-button-area {
  margin: 32px 0;
  text-align: center;
}

.audio-area {
  margin-top: 16px;
}
</style>

在上面的代码中，我们通过navigator.mediaDevices.getUserMedia方法来获取用户的音频流，并使用MediaRecorder来进行录制。录制完成后，将录制的音频转为Blob对象，并使用URL.createObjectURL方法生成可播放的URL。此时，我们将URL保存在audios数组中，以供播放使用。

在最后使用$webosocket来发送录制的音频数据。

结语

通过以上的步骤，我们就可以实现一个基于Vue + WebSocket + WaveSurferJS的H5聊天对话交互功能。这个功能既包括了文字聊天，也包括了语音聊天，可以满足常见的聊天需求。当然，你还可以根据实际需求进行功能扩展和优化。希望本文对你有所帮助，谢谢阅读！

本文来自极简博客，作者：微笑向暖阳，转载请注明原文链接：Vue WebSocket WaveSurferJS 实现H5聊天对话交互