直接上代码了
app.js中声明一个全局对象
globalData: { localSocket: {}, callback: function () {}, exceptionClose: true }, // 初始化socket initSocket() { let that = this; that.globalData.exceptionClose=true; var cookie = ''; var index = 0; for (var key in that.getCookieSync('cookieKey')) { if (index 0) { cookie += ';' } cookie += key + '=' + that.getCookieSync('cookieKey')[key] index = index + 1; } that.globalData.localSocket = wx.connectSocket({ url: api.WebSocketUrl, header:{'Cookie': cookie} }) that.globalData.localSocket.onOpen(function (res) { console.log('WebSocket连接已打开！readyState=' + that.globalData.localSocket.readyState) while (socketMsgQueue.length 0) { var msg = socketMsgQueue.shift(); that.sendSocketMessage(msg); } }) that.globalData.localSocket.onMessage(function (res) { that.globalData.callback(res); }) that.globalData.localSocket.onError(function (res) { console.log('readyState=' + that.globalData.localSocket.readyState) }) that.globalData.localSocket.onClose(function (res) { console.log('WebSocket连接已关闭！readyState=' + that.globalData.localSocket.readyState) if (that.globalData.exceptionClose){ that.initSocket(); } }) }, //统一发送消息 sendSocketMessage: function (msg) { if (this.globalData.localSocket.readyState === 1) { // console.log(JSON.stringify(msg)) this.globalData.localSocket.send({ data: JSON.stringify(msg), success: function(res){ // console.log('发送成功,返回结果为',res) } }) } else { socketMsgQueue.push(msg) } }, onShow: function (options) { // if (this.globalData.localSocket.readyState !== 0 && this.globalData.localSocket.readyState !== 1) { // console.log('开始尝试连接WebSocket！readyState=' + this.globalData.localSocket.readyState) // this.initSocket() // } },需要用到的页面使用,在页面卸载的时候要关闭连接,消息列表页面
var app = getApp(); onHide() { if (app.globalData.localSocket.readyState != 3) { app.globalData.exceptionClose = false; app.globalData.localSocket.close(); } this.setData({ isLastPage: false, list: [], bean: { pageSize: 10, pageNo: 0 } }) }, onUnload() { if (app.globalData.localSocket.readyState != 3) { app.globalData.exceptionClose = false; app.globalData.localSocket.close(); } this.setData({ bean: { pageSize: 10, pageNo: 0 }, list: [], isLastPage: true }) }, onShow(){ var me = this; // 判断是否登录,如果已经登录则保存信息,如果未登录则弹出登录框 var loginUser = app.getCookieSync('loginUser') ? app.getCookieSync('loginUser') : {loginStatus: false }; me.setData({ loginUser: loginUser, isShowAlert: loginUser.loginStatus }) if (!loginUser.loginStatus){ app.globalData.exceptionClose = false; app.checkLogin() } else {//已经登录 // 链接WebSocket app.globalData.exceptionClose = true; if (app.globalData.localSocket.readyState !== 0 && app.globalData.localSocket.readyState !== 1) { console.log('开始尝试连接WebSocket！readyState=' + app.globalData.localSocket.readyState) app.initSocket(); } app.loadingShow(); me.getData(); } app.globalData.callback = function (res) { let resData = JSON.parse(res.data) me.acceptFun(resData); } },另外一个需要用到的页面,消息实际对话页面
onUnload() { app.globalData.exceptionClose = false; app.globalData.localSocket.close(); }, onHide() { app.globalData.exceptionClose = false; app.globalData.localSocket.close(); }, onShow: function (options) { var me = this; // 链接WebSocket app.globalData.exceptionClose = true; if (app.globalData.localSocket.readyState !== 0 && app.globalData.localSocket.readyState !== 1) { console.log('开始尝试连接WebSocket！readyState=' + app.globalData.localSocket.readyState) app.initSocket(); } app.globalData.callback = function (res) { let resData = JSON.parse(res.data); console.log('接收到的消息',resData) let data = resData.result me.acceptFun(resData); } },wx.connectSocket(OBJECT)
创建一个 WebSocket 连接。
基础库版本 1.7.0 及以后，支持存在多个 WebSokcet 连接，每次成功调用 wx.connectSocket 会返回一个新的 SocketTask。
客户端
基本思路是：
- 全局维护一个SocketTask对象，用来表示websocket连接，判断是否断线，作为重连的依据。
- 同时定义一个全局callback回调函数，每个页面初始化的时候更新这个回调函数，那么在每个页面中收到返回消息就会执行当前页面逻辑。
- 维护一个消息队列，所有消息请求会首先判断连接是否可用，如果可用直接发消息，否则将消息push到这个队列中。
- 在app.js的onShow()函数中判断连接是否连上，如果没有连上就会触发websocket连接
- SocketTask对象的onOpen()负责从消息队列中取出请求消息，并发送这个请求消息
- SocketTask对象的onMessage()负责接收返回消息，并调用每个页面自己定义的回调函数
- SocketTask对象的onClose()监听函数中，触发websocket连接
