微信小程序webSocket

这两周，深度学习要借助微信小程序平台作为用户端。后端跟深度学习通信之前需要我调用一次WebSocket，帮助后端与深度学习发起通信。

WebSocket简单介绍  

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

  WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

  在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

                                                                   

 

列表说明

• wx.connectSocket 的最大并发限制是 5 个。
• 小程序进入后台运行后，如果 5s 内网络请求没有结束，会回调错误信息 fail interrupted；在回到前台之前，网络请求接口调用都会无法调用。

创建一个 WebSocket 连接；一个微信小程序同时只能有一个 WebSocket 连接，如果当前已存在一个 WebSocket 连接，会自动关闭该连接，并重新创建一个 WebSocket 连接。

通过 WebSocket 连接发送数据。需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发

送。

创建一个 WebSocket 连接	wx.connectSocket
监听WebSocket连接打开事件	wx.onSocketOpen
监听WebSocket错误	wx.onSocketError
通过 WebSocket 连接发送数据	wx.sendSocketMessage
监听WebSocket接受到服务器的消息事件	wx.onSocketMessage
关闭WebSocket连接	wx.closeSocket
监听WebSocket关闭	wx.onSocketClose

 

详例

                                                                                                                       

点击查询，同时发起三次网络请求，给深度学习解析

  search: function (e) {
    // 调用ws接口
    let socketOpen = false
    let socketMsgQueue = []
    wx.connectSocket({ //请求socket
      url: 'ws接口',
      success: res => {
        console.log("连接成功", res)
        wx.request({
          url: 'HTTPS接口1',
          method: "POST",
          data: {
            uploadFile: this.data.tempFilePaths
          },
          success: res => {
            console.log("第二次请求成功", res.data.data)
            wx.request({
              url: 'HTTPS接口2',
              method: "GET",
              header: {
                'content-type': 'application/json' // 默认值
              },
              data: {
                pictureId: res.data.data
              },
              success: res => {
                console.log("第三次请求成功", res)
              }
            })
          }
        })
      }
    })
    wx.onSocketOpen(function (res) { //监听socket
      console.log(res)
      socketOpen = true
      for (let i = 0; i < socketMsgQueue.length; i++) {
        sendSocketMessage(socketMsgQueue[i])
      }
      //-----页面内使用长链接接口发送和接收数据时也是如下方法：
      let streamconfig = {
        hm: "fsdg"
      }
      //发送数据
      wx.sendSocketMessage({ //
        data: JSON.stringify(streamconfig),
        success: res => {
          console.log('发送数据')
          console.log(res)
        }
      })
      //接收数据
      wx.onSocketMessage(res => {
        console.log(res)
      })
    })
  }

没有疯装，将就先用