在看文章之前,首先提2个问题:
-
WebSocket 是什么原理?
-
为什么可以实现持久连接?
如果你不甚了解,请点击传送门
2、概述
websocket是一种全新的协议,不属于http无状态协议,协议名为"ws",这意味着一个websocket连接地址会是这样的写法:ws://**。websocket协议本质上是一个基于tcp的协议。
3、小程序具体实现
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="voice">
<button type="primary" size="default" hover-class="button-hover" class="button-voice-play" bindtap="socketBtnTap">{{socktBtnTitle}}</button>
<button type="primary" size="default" hover-class="button-hover" class="button-voice-play" bindtap="sendMessageBtnTap">发送</button>
</view>
</view>

上面代码中:
连接socket 按钮绑定 socketBtnTap()
发送按钮 绑定 sendMessageBtnTap()
<!--index.js-->
var app = getApp()
var socketOpen = false
var socketMsgQueue = []
Page({
data: {
userInfo: {},
socktBtnTitle: '连接socket'
},
socketBtnTap: function () {
var that = this
var remindTitle = socketOpen ? '正在关闭' : '正在连接'
wx.showToast({
title: remindTitle,
icon: 'loading',
duration: 10000
})
if (!socketOpen) {
wx.connectSocket({
url: 'ws://域名'
})
wx.onSocketError(function (res) {
socketOpen = false
console.log('WebSocket连接打开失败,请检查!')
that.setData({
socktBtnTitle: '连接socket'
})
wx.hideToast()
})
wx.onSocketOpen(function (res) {
console.log('WebSocket连接已打开!')
wx.hideToast()
that.setData({
socktBtnTitle: '断开socket'
})
socketOpen = true
for (var i = 0; i < socketMsgQueue.length; i++) {
that.sendSocketMessage(socketMsgQueue[i])
}
socketMsgQueue = []
})
wx.onSocketMessage(function (res) {
console.log('收到服务器内容:' + res.data)
})
wx.onSocketClose(function (res) {
socketOpen = false
console.log('WebSocket 已关闭!')
wx.hideToast()
that.setData({
socktBtnTitle: '连接socket'
})
})
} else {
wx.closeSocket()
}
},
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
sendSocketMessage: function (msg) {
if (socketOpen) {
wx.sendSocketMessage({
data: msg
})
} else {
socketMsgQueue.push(msg)
}
},
sendMessageBtnTap: function () {
this.sendSocketMessage('小程序来了')
},
onLoad: function () {
console.log('onLoad')
var that = this
app.getUserInfo(function (userInfo) {
that.setData({
userInfo: userInfo
})
})
}
})
4、node.js服务器具体实现
node.js服务器的实现使用了ws
-
安装ws
npm install --save ws
-
使用
<!-- koa2_webSocket/bin/www.js -->
const webSocket = require('ws');
const wss = new webSocket.Server({server});
wss.on('connection', function connection(ws) {
console.log(ws.upgradeReq.url);
ws.on('error', function incoming(message) {
console.log('error: %s', message);
});
ws.on('close', function incoming(message) {
console.log('close: %s', message);
});
ws.on('message', function incoming(message) {
console.log('received: %s', message);
ws.send('something123');
});
ws.send('something');
});
5、如何还不明白,怎么办?