当前位置：首页 > VUE

vue websocket 实现录音聊天

2026-01-23 10:02:59VUE

Vue 中使用 WebSocket 实现录音聊天

录音功能实现

使用浏览器提供的 MediaRecorder API 进行录音，需要先获取用户麦克风权限：

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

    mediaRecorder.ondataavailable = event => {
      audioChunks.push(event.data)
    }

    mediaRecorder.onstop = () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' })
      // 发送到 WebSocket
    }
  })

WebSocket 连接管理

在 Vue 中创建 WebSocket 连接：

data() {
  return {
    socket: null,
    isRecording: false
  }
},
methods: {
  initWebSocket() {
    this.socket = new WebSocket('ws://your-server-endpoint')

    this.socket.onmessage = (event) => {
      // 处理接收到的音频消息
      const audio = new Audio(URL.createObjectURL(event.data))
      audio.play()
    }
  }
}

音频数据传输

将录制的音频通过 WebSocket 发送：

sendAudio(blob) {
  if (this.socket.readyState === WebSocket.OPEN) {
    this.socket.send(blob)
  }
}

组件生命周期管理

确保在组件销毁时关闭连接：

beforeDestroy() {
  if (this.socket) {
    this.socket.close()
  }
}

服务器端处理

Node.js 服务器的简单实现示例：

const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 8080 })

wss.on('connection', ws => {
  ws.on('message', message => {
    // 广播给其他客户端
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message)
      }
    })
  })
})

优化建议

添加音频压缩处理（如使用 Opus 编码）
实现音频数据分块传输
添加连接状态提示和重连机制
考虑使用 WebRTC 进行点对点传输（如需降低延迟）

错误处理

添加必要的错误处理逻辑：

this.socket.onerror = (error) => {
  console.error('WebSocket error:', error)
}
this.socket.onclose = () => {
  console.log('WebSocket connection closed')
}

vue websocket 实现录音聊天