在之前的文章中我们所提到的文件的上传和下载以及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 = []
}
})今天的内容就到这里了，我们下期再见。