socket遇上wss协议qq30304_socket请求

在之前的文章中我们所提到的文件的上传和下载以及request请求都是基于http请求的。小程序也给我们提供了另一种通讯方式是基于websocket请求的，那么http请求和websocket它们之间的含义以及有什么什么不同呢？下来就让我们一起来看下吧：

我们可以看到http协议呢是基于TCP/IP通信协议通过万维网服务器传输数据到本地浏览器的应用层协议；websocket是由HTML5规范提出的一种在单个TCP连接上进行全双工通信的应用层协议。在了解了两者的不同后，让我们来看下在小程序中是如何通过websocket进行数据传输的。

url是服务器的wss接口地址，header表示了http header，protocols表示了子协议数组。下面让我们通过一个实例来看下吧：

<!--index.wxml>
<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">Socket状态</view>
          <view class="weui-cell__ft">
            <switch bindchange="toggleSocket" checked="{{isOpen}}"/>
          </view>
        </view>
        <view class="weui-cell">
          <view class="weui-cell__bd">消息</view>
          <view class="weui-cell__ft">
            Hello, 小程序!
          </view>
        </view>
      </view>
    </view>
    <view class="btn-area">
      <button type="primary" size="40" bindtap="sendMessage" disabled="{{socketStatus != 'connected'}}" loading="{{loading}}">点我发送</button>
    </view>
  </view>
</view>
const tunnelUrl = require('../../../../../config').tunnelUrl

function showModal(title, content) {
  wx.showModal({
    title,
    content,
    showCancel: false
  })
}

function showSuccess(title) {
  wx.showToast({
    title,
    icon: 'success',
    duration: 1000
  })
}

Page({
  data: {
    socketStatus: 'closed',
    isOpen: false,
    sendText: 'hello, 小程序'
  },
  socketMsgQueue: [],
  // 注册连接打开事件
  registerOpen() {
    wx.onSocketOpen((res) => {
      console.log('当前webscoket通道已打开并开始发送数据', res);
      this.sendAllMessage();
      this.setData({
        socketStatus: 'connected',
        isOpen: true
      });
    });
  },
  // 注册接受到websocket消息事件
  registerReceive() {
    wx.onSocketMessage(function (res) {
      console.log('收到服务器内容：' + res.data)
    })
  },
  // 注册socket出错事件
  registerError() {
    wx.onSocketError((res) => {
      this.setData({
        socketStatus: 'closed',
        isOpen: false
      })
      console.log('socket连接出错，原因是:', res);
    });
  },
  // 切换switch开关
  toggleSocket: function(e) {
    if(e.detail.value) {
      wx.connectSocket({
        url: tunnelUrl,
        protocols: ['echo-protocol'],
        success: (res) => {
          console.log('打开一个socket连接',res);
          this.registerOpen();
          this.registerReceive();
          this.registerError();
        }
      });
    } else {
      wx.closeSocket({
        success: (res) => {
          console.log('关闭socket连接: ', res);
          wx.onSocketClose((res) => {
            console.log('当前socket通道已关闭', res);
            this.setData({
              socketStatus: 'closed',
              isOpen: false
            });
          })
        },
        fail: (res) => {
          console.log('关闭socket通道出错,原因是:', res);
        },
        complete: (res) => {
          console.log('操作完成！')
        }
      });
    }
 
  },
  // 点击按钮发送消息
  sendMessage: function() {
      let text = this.data.sendText;
      this.sendSingleMessage(text+Math.random()*100);
  },
  // 发送单条websocket消息
  sendSingleMessage: function(text) {
    let isOpen = this.data.isOpen;
    if (isOpen) {
      wx.sendSocketMessage({
        data: text
      })
    } else {
      this.socketMsgQueue.push(text)
    }
  },
  // 发送队列所有websocket消息
  sendAllMessage: function() {
    for (var i = 0; i < this.socketMsgQueue.length; i++) {
      this.sendSingleMessage(this.socketMsgQueue[i])
    }
    this.socketMsgQueue = []
  }
 
})

今天的内容就到这里了，我们下期再见。