Browse Source

[websocket][新增]:小程序支持websocket

websocket
Stormeye Wu 6 years ago
parent
commit
b9972e791a
4 changed files with 172 additions and 7 deletions
  1. +140
    -0
      app.js
  2. +7
    -0
      config/config.js
  3. +17
    -7
      pages/index/index.js
  4. +8
    -0
      utils/stomp.min.js

+ 140
- 0
app.js View File

@@ -25,6 +25,8 @@ App({
globalData: { globalData: {
// token // token
token: null, token: null,
// user openId
openId: null,
// 渠道 // 渠道
sceneAddress: null, sceneAddress: null,
// location info // location info
@@ -41,6 +43,144 @@ App({
// 当前商场信息 // 当前商场信息
market: { market: {
name: "陕西大悦城" name: "陕西大悦城"
},
// websocket
socketClient: null,
socketReceiver: function (e) { }, //收到消息回调
},

// 初始化websocket
initSocket: function () {
let that = this;
// socket是否连接
let socketConnected = false;
// 待发送的消息队列
let messageQueue = [];
// 是否断线重连
let reconnect = true;

// 发送消息
function sendSocketMessage(msg) {
// console.log(msg);
// 如果socket已连接则发送消息
if (socketConnected) {
wx.sendSocketMessage({
data: msg
})
} else {
// socket没有连接将消息放入队列中
messageQueue.push(msg);
}
}

// 关闭连接
function close() {
if (socketConnected) {
wx.closeSocket()
socketConnected = false;
}
}

// 符合WebSocket定义的对象
var ws = {
send: sendSocketMessage,
close: close
} }

// 创建一个 WebSocket 连接
function connect() {
wx.connectSocket({
url: config.wsurl,
header: {
token: that.globalData.token //从服务端获取一个token,服务端验证token是否允许连接,案例中没做限制
}
})
}
connect();

// 监听 WebSocket 连接打开事件
wx.onSocketOpen(function (res) {
console.log("WebSocket 连接成功")
socketConnected = true;
ws.onopen();
// 连接成功后,将队列中的消息发送出去
let queueLength = messageQueue.length
for (let i = 0; i < queueLength; i++) {
sendSocketMessage(messageQueue.shift())
}
})

// 监听 WebSocket 接受到服务器的消息事件
wx.onSocketMessage(function (res) {
ws.onmessage(res);
})

// 监听 WebSocket 错误事件
wx.onSocketError(function (res) {
console.log("WebSocket 错误事件")
if (!socketConnected) {
// 断线重连
if (reconnect) {
connect();
}
}
})

// 监听 WebSocket 连接关闭事件
wx.onSocketClose(function (res) {
console.log("WebSocket 连接关闭")
socketConnected = false;
// 断线重连
if (reconnect) {
connect();
}
})

const Stomp = require('/utils/stomp.min.js').Stomp;

/**
* 定期发送心跳或检测服务器心跳
* The heart-beating is using window.setInterval() to regularly send heart-beats and/or check server heart-beats.
* 可看stomp.js的源码(195,207,489行),由于小程序没有window对象,所以我们要调用小程序的定时器api实现
*/
Stomp.setInterval = function (interval, f) {
return setInterval(f, interval);
};
// 结束定时器的循环调用
Stomp.clearInterval = function (id) {
return clearInterval(id);
};

const stompClient = Stomp.over(ws);

that.globalData.socketClient = stompClient;

stompClient.connect({}, function (callback) {

// 订阅自己的
stompClient.subscribe('/user/'+that.globalData.openId+'/message', function (message, headers) {
console.log('收到只发送给我的消息:', message);
that.globalData.socketReceiver(JSON.parse(message.body));
// 通知服务端收到消息
message.ack();
});

stompClient.subscribe('/topic/1001A', function (message, headers) {
console.log('收到TOPIC的消息:', message);
that.globalData.socketReceiver(JSON.parse(message.body));
// 通知服务端收到消息
//message.ack();
});

// 向服务端发送消息
stompClient.send("/app/message", {}, JSON.stringify({
'msg': 'client: ' + that.globalData.openId
}));
})
},

//统一发送消息
sendSocketMessage: function (msg) {
this.globalData.socketClient.send("/app/message", {}, JSON.stringify(msg));
} }
}); });

+ 7
- 0
config/config.js View File

@@ -10,6 +10,7 @@ if (Object.keys(extConfig).length == 0){
} }
var config = { var config = {
url: configUrls, url: configUrls,
wsurl: "ws://10.100.30.171:7100/W/ws",
api: { api: {
/** /**
* 接口用途:login * 接口用途:login
@@ -253,6 +254,12 @@ var config = {
*/ */
queryAttendStatus:'/orderGroup/queryAttendStatus' queryAttendStatus:'/orderGroup/queryAttendStatus'
}, },
wsapi: {
/**
*
*/

},
weapp: { weapp: {
AppId: weappId AppId: weappId
}, },


+ 17
- 7
pages/index/index.js View File

@@ -148,18 +148,24 @@ Page({
userLogin: function (options) { userLogin: function (options) {
console.log(1111,options,2222222222) console.log(1111,options,2222222222)
var that = this; var that = this;
// 获取系统信息
wx.getSystemInfo({
success: function (res) {
var name = res.model
// 检测是否为iphonex xs xr
// if (name.indexOf("iPhone X") > -1) {
// that.globalData.isIpx = true
//}
that.setData({
systemInfo: JSON.stringify(res)
})
}
})
// 登录 // 登录
wx.login({ wx.login({
success: ({ success: ({
code code
}) => { }) => {
wx.getSystemInfo({
success: function(res) {
that.setData({
systemInfo: JSON.stringify(res)
})
}
})
var usrdata = { var usrdata = {
appId: config.weapp.AppId, appId: config.weapp.AppId,
code: code, code: code,
@@ -186,7 +192,11 @@ Page({
that.setData({ that.setData({
showPages: true showPages: true
}) })
console.log(res)
app.globalData.token = res.data.token; app.globalData.token = res.data.token;
app.globalData.openId = res.data.openId;
// 初始化websocket
app.initSocket();
Http.setToken(res.data.token); Http.setToken(res.data.token);
if (options&&(options.couponChannelId || options.orderId)){ if (options&&(options.couponChannelId || options.orderId)){
that.checkuerstatus(options); that.checkuerstatus(options);


+ 8
- 0
utils/stomp.min.js
File diff suppressed because it is too large
View File


Loading…
Cancel
Save