작은 프로그램이 간단한 음성 채팅을 실현하는 예시 코드

프레임 관련
Demo는 Mpvue 프레임워크를 사용하고 백엔드의 WebSocket은 Node를 사용합니다.js, 파일 서버에서 직접 사용하는 위챗 프로그램의 클라우드 개발 저장소입니다.
비축 지식

위챗 소프로그램 녹음 컨트롤러:recorderManager..

위챗 애플릿 오디오 컨트롤러: innerAudio Context..

위챗 애플릿 웹소켓..

Node.js단 WebScoket 구현

//  WS 
 
//  ws 
var WebSocketServer = require("ws").Server;
//  WebSocket
var wss = new WebSocketServer({ port: 9090 });
//  
var clients = [];
 
//  
wss.on('connection', function (ws) {
 clients.push(ws);
 ws.on("message", function (message) {
  clients.forEach(function (ws1) {
   if (ws1 !== ws) {
    ws1.send(message)
   }
  })
 })
})
 
//  
ws.on("close", function (message) {
 clients = clients.filter(function (ws1) {
  return ws1 !== ws
 })
})

애플릿 구현
html

<div>
 <button @click="palyAudio(value)" v-for="(value,index) in chatContent" :key="index">)))))</button>
 <button class="botom-button" @touchstart="startRecord" @touchend="stopRecord"> </button>
</div>

js

export default {
 data() {
  return {
   //  
   chatContent: [],
   //  
   recorderManager: null,
   //  
   innerAudioContext: null
  };
 },
 methods: {
  //  
  startRecord() {
   this.recorderManager.start({
    format: "mp3"
   });
  },
  //  
  stopRecord() {
   this.recorderManager.stop();
  },
  //  
  palyAudio(value) {
   this.innerAudioContext.src = value;
   this.innerAudioContext.play();
  }
 },
 created() {
  this.recorderManager = wx.getRecorderManager();
  this.innerAudioContext = wx.createInnerAudioContext();
  //  
  this.recorderManager.onStart(res => {
   console.log("recordStart");
  });
  //  
  this.recorderManager.onStop(res => {
   const audioName = new Date().getTime() + ".mp3";
   //  
   wx.cloud.uploadFile({
    cloudPath: audioName,
    filePath: res.tempFilePath,
    success: upload => {
     this.chatContent.push(upload.fileID);
     //  websocket 
     wx.sendSocketMessage({
      data: upload.fileID
     });
    }
   });
  });
  //  websocket 
  wx.connectSocket({
   url: "ws://yoursiteandeport",
   success: res => {
    console.log("success", res);
   },
   fail: err => {
    console.log("error", err);
   }
  });
  // websocket  
  wx.onSocketMessage(data => {
   console.log(data);
   this.chatContent.push(data.data);
  });
 }
};

결론

주로 WebSocket을 통해 실시간 통신을 완료합니다

위챗 애플릿에서 제공하는 API를 통해 음성의 입력과 출력을 완성한다

파일 서버를 통해 음성 파일을 업로드합니다

이 작은 프로그램이 간단한 음성 채팅을 실현하는 예시 코드에 관한 글을 소개합니다. 더 많은 관련 작은 프로그램의 음성 채팅 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!