小程序WebSocket

uniapp官方文档:https://uniapp.dcloud.io/api/request/websocket

小程序官方文档: https://developers.weixin.qq.com/miniprogram/dev/api/network/websocket/wx.sendSocketMessage.html

示例:javascript

<script>
const rmg = uni.getRecorderManager();
const appKey = "";
export default {
  components: {
    vocabulary,
  },
  data() {
    return {
      rmg: "",
    };
  },
  methods: {
    openSocket(cb) {
      this._sid = "uuid-t" + Date.now();
      //  建立websocket 连接
      this.socket = uni.connectSocket({
        url: "" // 你需要链接的url,
        success(res) {
          console.log("ok", res);
        },
        fail(err) {
          console.log("fail", err);
        },
      });
      // 监听websocket 连接是否打开
      this.socket.onOpen((res) => {
        console.log("open", res);
        // 启动录音 (使用16K单声道mp3)
        rmg.start({
          duration: 5000,
          sampleRate: 16000,
          numberOfChannels: 1,
          format: "mp3",
          frameSize: 2,
        });
        // 发送第一个消息包,
        this.socket.send({
          data: JSON.stringify({
            appkey: appKey,
            displayText: "hello, websocket!",
            audioFormat: "mp3",
            eof: this._sid,
          }),
        });
      });
      this.socket.onError((err) => {
        console.log("error", err);
        this.socket.close();
      });
      this.socket.onMessage((res) => {
        // 接收服务器响应消息
        console.log("msg", res);
        // 这里需要判断是否是最后一个包,如果是则close socket
        this.socket.close();
        if (res.data) {
          try {
            const data = JSON.parse(res.data);
            console.log(data);
          } catch (e) {
            console.log("解析result失败");
          }
        }
      });
    },
    init() {
      this.openSocket();
      rmg.onStart(() => {
        console.log(13246);
      });
      rmg.onStop((res) => {});
      rmg.onError((err) => {
        this.socket.close();
      });
      rmg.onFrameRecorded((res) => {
        // 监听录音接口, 并将录音buf发送到服务器
        console.log(res);
        this.isLastFrame = res.isLastFrame; // 是否为最后一帧(是true)
        this.socket.send({
          data: res.frameBuffer,
          success(res) {
            console.log("send ok", res);
          },
          fail(err) {
            console.log("send err", err);
          },
        });
        if (res.isLastFrame) {
          // 录音结束,发送 end 消息包
          this.socket.send({
            data: this._sid,
            complete: () => {
              console.log("send end EOF");
            },
          });
        }
      });
    },
  },
};
</script>

HTML

<view class="bottom" @click="init">点击开启录音发送</view>

注意:本示例是实际项目开发,是开启录音 发送录音文件片段实现实时评分,关闭socket连接返回评分

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐