假如发现有问题或者觉得有遗漏的当地，欢迎留言评论

关于WebSocket的优缺点

这个网上文档太多了，自行查阅 引荐进口

准备

之前是准备用 STOMPJS 流文本定向音讯协议开发，但涉及到语音转文字，emmm…

所以此功用的语音部分涉及到语音辨认器，语音辨认器语音转文字是调用第三方的 SpeechRecognizer，版权原因这儿不讲第三方的，咱们能够自己去集成第三方sdk；这儿能够共享两个接入语音辨认器踩到的几个坑，如下:

工程在 Chrome 浏览器打开，获取音频设备权限问题

Vue 工程在 Chrome 浏览器打开，无法获取音视频设备，控制台提示获取音频设备权限问题， 咱们能够经过以下方式解决：

一、网页运用https方式拜访

此操作需求依赖web服务提供者完成https的拜访方式。（需求安全证书）

二、修正浏览器安全配置（最直接、简单）

  1. 浏览器地址栏输入： chrome://flags/#unsafely-treat-insecure-origin-as-secure
  2. 敞开Insecure origins treated as secure

在输入栏内输入你需求拜访音频设备的地址url，然后将右侧Disabled 改成 Enabled，浏览器会提示重启（Relaunch）

经过WebSocket的长衔接完成语音查找功用（收拾中。。）
3. 浏览器会提示重启（Relaunch），Relaunch 即可

关于谷歌浏览器的禁止autoplay政策

autoplay: 这个特点是<video><audio>所属的，表示在用户进入页面的时候自动开端播映声音或者播映视频，但是，这个特点会在谷歌浏览器中失效，因为谷歌浏览器在用户体会和安全性方面做出自己的限制，默认阻挠音视频的自动播映。

解决方法也很简单，修正下权限就能够了~

经过WebSocket的长衔接完成语音查找功用（收拾中。。）

新版本里边不叫 Autoplay policy了，而是声音，它会检测页面是否有video或audio标签，假如有的话，就会直接在上图显现，挑选允许，就能够完成和上面相同的效果。假如上面没有声音选项，你也能够点击上图的 网站设置，里边有所有的浏览器的首要权限设置。

点进去，找到声音选项，相同能够设定允许自动播映。

经过WebSocket的长衔接完成语音查找功用（收拾中。。）

注意：这儿的设定只能收效于当前的页面，无法收效所有页面。

以上就是语音辨认器部分

接下来是封装的webSocket 接纳语音指令部分,直接上代码

class Socket {
  /**
     * @description: 初始化实例特点，保存参数
     *
     */
  constructor (options) {
    this.url = options.url // 语音衔接url
    this.callback = options.received // 返回函数
    this.name = options.name || 'default'
    this.ws = null
    this.status = null
    // 心跳定时器
    this.pingInterval = null
    // 心跳检测频率
    this.timeout = options.time
    this.isHeart = options.isHeart
    this.isReconnection = options.isReconnection
  }
  connect (data) {
    this.ws = new WebSocket(this.url)
    // 树立衔接
    this.ws.onopen = (e) => {
      this.status = e.type
      console.log('success', e)
      if (this.isHeart) {
        // 心跳
        this.heartCheck()
      }
      // 给后台发送数据
      if (data !== undefined) {
        return this.ws.send(JSON.stringify({ type: data.type }))
      }
    }
    // 接受服务器返回的信息
    this.ws.onmessage = (e) => {
      if (typeof this.callback === 'function') {
        return this.callback(e.data)
      } else {
        console.log('参数的类型有必要为函数')
      }
    }
    // 关闭衔接
    this.ws.onclose = (e) => {
      console.log('onclose', e)
    }
    // 报错
    this.onerror = (e) => {
      console.log('onerror', e)
      this.closeSocket(e)
    }
  }
  sendMsg (data) {
    const msg = JSON.stringify(data)
    return this.ws.send(msg)
  }
  resetHeart () {
    clearInterval(this.pingInterval)
    return this
  }
  heartCheck () {
    this.pingInterval = setInterval(() => {
      if (this.ws.readyState === 1) {
        console.log('Im alive')
        this.ws.send(JSON.stringify({ type: 'ping' }))
      }
    }, this.timeout * 8)
  }
  closeSocket (e) {
    this.resetHeart()
    if (this.status !== 'close') {
      console.log('disconnect and reconnect', e)
      //   if (this.isReconnection) {
      // 重连
      this.connect()
    //   }
    } else {
      console.log('close manually', e)
    }
  }
  close () {
    this.status = 'close'
    this.resetHeart()
    console.log('998899')
    return this.ws.close()
  }
}
export default Socket

订阅

    window.ws = new Socket({
      url: `${this.socketUrl}${id}`,// url和参数
      name: '', 
      isHeart: true, // 是否心跳
      time: 60000,
      received: (data) => {
        if (typeof this.callbackMsg === 'function') {
          return this.callbackMsg(data)
        } else {
          console.log('参数的类型有必要为函数')
        }
      }
    })
    // this.ws = ws
    const data = {
      type: 'init'
    }
    window.ws.connect(data)

这儿的socket仅仅做接纳指令，发送指令是经过接入的收音设备，发送语音流到数据中控